diff --git a/index.html b/index.html
index f554420..d2604fe 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,9 @@
+
diff --git a/layers/index.js b/layers/index.js
new file mode 100644
index 0000000..1ff6548
--- /dev/null
+++ b/layers/index.js
@@ -0,0 +1,35 @@
+import TileLayer from 'ol/layer/Tile';
+import OSM from 'ol/source/OSM';
+
+import amtrakLayer from './amtrak/layer.js';
+import arenasLayer from './nhl-arenas/layer.js';
+
+const layerCategories = [
+ {
+ name: "Base maps",
+ layers: [
+ {
+ name: "OpenStreetMap Carto",
+ enabled: true,
+ layer: new TileLayer({
+ source: new OSM(),
+ }),
+ },
+ ],
+ },
+ {
+ name: "Overlays",
+ layers: [
+ {
+ name: "Amtrak Routes",
+ layer: amtrakLayer,
+ },
+ {
+ name: "NHL Arenas",
+ layer: arenasLayer,
+ },
+ ]
+ }
+];
+
+export default layerCategories;
diff --git a/main.js b/main.js
index 3f9c993..92cd4ef 100644
--- a/main.js
+++ b/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 = `
+ ${category.name}
+
+ `;
+ for (let layer of category.layers) {
+ const li = document.createElement("li");
+ li.innerHTML = `
+ ${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);
+ }
+ }
+}
diff --git a/style.css b/style.css
index 8a920c9..f4373d4 100644
--- a/style.css
+++ b/style.css
@@ -8,5 +8,24 @@ html, body {
position: absolute;
top: 0;
bottom: 0;
- width: 100%;
+ left: min(max(200px, 20%), 400px);
+ right: 0;
+}
+
+aside {
+ width: min(max(200px, 20%), 400px);
+ padding: 0 1em;
+}
+
+aside ul {
+ margin: 0;
+ padding: 0;
+}
+
+aside ul li {
+ list-style: none;
+}
+
+h1 {
+ text-align: center;
}