maps.chandlerswift.com/main.js

58 lines
1.7 KiB
JavaScript

import './style.css';
import {Map, View} from 'ol';
import {fromLonLat, get} from 'ol/proj.js';
import {defaults as defaultControls} from 'ol/control.js';
import ToggleMenuControl from './ui/controls.js';
import layerCategories from './layers/index.js';
const map = new Map({
controls: defaultControls().extend([new ToggleMenuControl()]),
target: 'map',
layers: [],
view: new View({
center: fromLonLat([-93.24151, 44.80376]),
zoom: 10,
})
});
// 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 = `
<details ${category.layers.filter(l => l.enabled).length > 0 ? "open" : ""}>
<summary>${category.name}</summary>
<ul></ul>
</details>
`;
for (let layer of category.layers) {
const li = document.createElement("li");
li.innerHTML = `
<label><input type="checkbox" ${layer.enabled ? "checked" : ""}> ${layer.name}</label>
`;
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);
}
}
}