import './style.css'; import {Map, View} from 'ol'; import {fromLonLat, get} from 'ol/proj.js'; import {defaults as defaultControls} from 'ol/control.js'; import Overlay from 'ol/Overlay.js'; import ToggleMenuControl from './ui/controls.js'; import layerCategories from './layers/index.js'; // from https://openlayers.org/en/latest/examples/popup.html const container = document.getElementById('popup'); const content = document.getElementById('popup-content'); const closer = document.getElementById('popup-closer'); const popupOverlay = new Overlay({ element: container, autoPan: { animation: { duration: 250, }, }, }); closer.onclick = function () { popupOverlay.setPosition(undefined); closer.blur(); return false; }; const map = new Map({ controls: defaultControls().extend([new ToggleMenuControl()]), target: 'map', layers: [], overlays: [popupOverlay], 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 = `
l.enabled).length > 0 ? "open" : ""}> ${category.name} ${category.details ? "

" + category.details + "

" : ""}
`; for (let layer of category.layers) { const li = document.createElement("li"); li.innerHTML = ` `; 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); } } } function objectToTable(o) { // TODO: hack hack hack let table = ``; for (let [key, value] of Object.entries(o)) { if (typeof value === "object") { value = objectToTable(value); } if (typeof value === "string" && value.startsWith('https://')) { value = `${value}` } table += ``; } table += `
${key}${value}
`; return table; } // from https://openlayers.org/en/latest/examples/icon.html map.on('click', function (evt) { let layer; const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, l) { layer = l; return feature; }); if (!feature) { return; } if (layer.hasOwnProperty('customPopup')) { content.innerHTML = layer.customPopup(feature); if (layer.hasOwnProperty('customPopupCallback')) { layer.customPopupCallback(feature); } } else { // exclude geometry -- https://stackoverflow.com/a/208106 const {geometry: _, ...featureData} = feature.values_; content.innerHTML = objectToTable(featureData); } popupOverlay.setPosition(evt.coordinate); });