Add basic side menu for layer selection

This _should_ be smart and not load expensive layers until they're rendered.

main.js

@@ -1,26 +1,51 @@
 import './style.css';
 import {Map, View} from 'ol';
-import TileLayer from 'ol/layer/Tile';
-import OSM from 'ol/source/OSM';
 import {fromLonLat} from 'ol/proj.js';
 
-import amtrakLayer from './layers/amtrak/layer.js';
-import arenasLayer from './layers/nhl-arenas/layer.js';
+import layerCategories from './layers/index.js';
 
 const map = new Map({
   target: 'map',
-  layers: [
-    new TileLayer({
-      source: new OSM()
-    })
-  ],
+  layers: [],
   view: new View({
     center: fromLonLat([-93.24151, 44.80376]),
     zoom: 10,
   })
 });
 
-map.getLayers().extend([
-  amtrakLayer,
-  arenasLayer,
-]);
+// Basic reactivity binding: like vue.js, just worse :)
+//
+// This implements some basic reactivity so that I can add and remove layers.
+// Nothing too fancy, at this point. Eventually, I'll likely pull in proper Vue,
+// as I aim for more complex interactions, like layer ordering, color selection,
+// custom layer imports, and more.
+for (let category of layerCategories) {
+  const catDiv = document.createElement("div");
+  catDiv.innerHTML = `
+    <h3>${category.name}</h3>
+    <ul></ul>
+  `;
+  for (let layer of category.layers) {
+    const li = document.createElement("li");
+    li.innerHTML = `
+      <input type="checkbox" ${layer.enabled ? "checked" : ""}> ${layer.name}
+    `;
+    li.querySelector("input").addEventListener("change", function(e){
+      if (e.target.checked) {
+        map.getLayers().push(layer.layer);
+      } else {
+        map.getLayers().remove(layer.layer);
+      }
+    });
+    catDiv.querySelector("ul").appendChild(li);
+  }
+  document.querySelector("aside").appendChild(catDiv);
+}
+
+for (let category of layerCategories) {
+  for (let layer of category.layers) {
+    if (layer.enabled) {
+      map.addLayer(layer.layer);
+    }
+  }
+}