59 lines
1.8 KiB
JavaScript
59 lines
1.8 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>
|
|
${category.details ? "<p>" + category.details + "</p>" : ""}
|
|
<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);
|
|
}
|
|
}
|
|
}
|