Compare commits
No commits in common. "05fd104e563c8f9bedc72aeb967ad4772ce9c73b" and "6220dd76d5a70c1dc6fe27646367f73d969c8fc5" have entirely different histories.
05fd104e56
...
6220dd76d5
|
|
@ -3,7 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/x-icon" href="https://chandlerswift.com/favicon.png" />
|
<link rel="icon" type="image/x-icon" href="https://chandlerswift.com/favicon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Chandler Swift's Maps</title>
|
<title>Chandler Swift's Maps</title>
|
||||||
</head>
|
</head>
|
||||||
<body class="nav-open">
|
<body class="nav-open">
|
||||||
|
|
@ -15,10 +15,6 @@
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<div id="popup" class="ol-popup">
|
|
||||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
|
||||||
<div id="popup-content"></div>
|
|
||||||
</div>
|
|
||||||
<script type="module" src="./main.js"></script>
|
<script type="module" src="./main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
55
main.js
55
main.js
|
|
@ -2,36 +2,15 @@ import './style.css';
|
||||||
import {Map, View} from 'ol';
|
import {Map, View} from 'ol';
|
||||||
import {fromLonLat, get} from 'ol/proj.js';
|
import {fromLonLat, get} from 'ol/proj.js';
|
||||||
import {defaults as defaultControls} from 'ol/control.js';
|
import {defaults as defaultControls} from 'ol/control.js';
|
||||||
import Overlay from 'ol/Overlay.js';
|
|
||||||
|
|
||||||
import ToggleMenuControl from './ui/controls.js';
|
import ToggleMenuControl from './ui/controls.js';
|
||||||
|
|
||||||
import layerCategories from './layers/index.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({
|
const map = new Map({
|
||||||
controls: defaultControls().extend([new ToggleMenuControl()]),
|
controls: defaultControls().extend([new ToggleMenuControl()]),
|
||||||
target: 'map',
|
target: 'map',
|
||||||
layers: [],
|
layers: [],
|
||||||
overlays: [popupOverlay],
|
|
||||||
view: new View({
|
view: new View({
|
||||||
center: fromLonLat([-93.24151, 44.80376]),
|
center: fromLonLat([-93.24151, 44.80376]),
|
||||||
zoom: 10,
|
zoom: 10,
|
||||||
|
|
@ -77,37 +56,3 @@ for (let category of layerCategories) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function objectToTable(o) {
|
|
||||||
let table = `<table style="margin: 0.5em; border-collapse: collapse;">`;
|
|
||||||
// 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 = `<a href="${value}">${value}</a>`
|
|
||||||
}
|
|
||||||
table += `<tr><td style="border: 1px solid;">${key}</td><td style="border: 1px solid;">${value}</td></tr>`;
|
|
||||||
}
|
|
||||||
table += `</table>`;
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
|
|
|
||||||
44
style.css
44
style.css
|
|
@ -82,47 +82,3 @@ aside summary {
|
||||||
right: 0.5em;
|
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 */
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue