diff --git a/index.html b/index.html index e812452..d369ab6 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Chandler Swift's Maps @@ -15,10 +15,6 @@
- diff --git a/main.js b/main.js index 0ac7688..d333838 100644 --- a/main.js +++ b/main.js @@ -2,36 +2,15 @@ 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, @@ -77,37 +56,3 @@ for (let category of layerCategories) { } } } - -function objectToTable(o) { - let table = ``; - // TODO: hack hack hack - for (let [key, value] of Object.entries(o)) { - console.log(`typeof ${value} = ${typeof value}`); - 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) { - const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { - return feature; - }); - if (!feature) { - return; - } - - // https://stackoverflow.com/a/208106 - const {geometry: _, ...featureData} = feature.values_; - - content.innerHTML = objectToTable(featureData); - popupOverlay.setPosition(evt.coordinate); - console.log(feature); -}); diff --git a/style.css b/style.css index 3973b8b..b1beee7 100644 --- a/style.css +++ b/style.css @@ -82,47 +82,3 @@ aside summary { right: 0.5em; } } - -/* POPUP (from https://openlayers.org/en/latest/examples/popup.html) */ -.ol-popup { - position: absolute; - background-color: white; - box-shadow: 0 1px 4px rgba(0,0,0,0.2); - padding: 15px; - border-radius: 10px; - border: 1px solid #cccccc; - bottom: 12px; - left: -50px; - min-width: 280px; -} -.ol-popup:after, .ol-popup:before { - top: 100%; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} -.ol-popup:after { - border-top-color: white; - border-width: 10px; - left: 48px; - margin-left: -10px; -} -.ol-popup:before { - border-top-color: #cccccc; - border-width: 11px; - left: 48px; - margin-left: -11px; -} -.ol-popup-closer { - text-decoration: none; - position: absolute; - top: 2px; - right: 8px; -} -.ol-popup-closer:after { - content: "✖"; -} -/* END POPUP */