aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--main.js34
1 files changed, 30 insertions, 4 deletions
diff --git a/main.js b/main.js
index f0ab6f5..d43a87c 100644
--- a/main.js
+++ b/main.js
@@ -34,6 +34,9 @@ import VectorTileLayer from 'ol/layer/VectorTile.js';
import VectorTile from 'ol/source/VectorTile.js';
import { createXYZ } from 'ol/tilegrid.js';
+import VectorLayer from 'ol/layer/Vector.js';
+import VectorSource from 'ol/source/Vector.js';
+
import CircleStyle from 'ol/style/Circle.js';
import Fill from 'ol/style/Fill.js';
import RegularShape from 'ol/style/RegularShape.js';
@@ -142,7 +145,9 @@ const map = new Map({
],
target: document.getElementById('map'),
});
+
const popup = document.getElementById('popup');
+const featureOverlaySource = new VectorSource();
/* move the control container to the viewport */
const container = document.getElementById('map-control-container');
@@ -336,6 +341,7 @@ if (window.location !== window.parent.location) {
map.addControl(control);
control.addEventListener('enterfullscreen', function() {
+ featureOverlaySource.clear(true);
const popover = Popover.getInstance(popup);
if (popover !== null) {
/* dispose popover as entering fullscreen messes up its position */
@@ -353,6 +359,7 @@ if (window.location !== window.parent.location) {
}
})
control.addEventListener('leavefullscreen', function() {
+ featureOverlaySource.clear(true);
const popover = Popover.getInstance(popup);
if (popover !== null) {
/* dispose popover as is might overflow the viewport */
@@ -468,6 +475,7 @@ if (window.location !== window.parent.location) {
container.setAttribute('aria-hidden', 'false');
view.on('change', function(event) {
+ featureOverlaySource.clear(true);
const popover = Popover.getInstance(popup);
if (popover !== null) {
popover.dispose();
@@ -801,14 +809,24 @@ map.addLayer(vectorLayer);
body.innerHTML = 'legend TODO';
})();
-/* popup overlay */
+/* popup and feature overlays */
(function() {
const popupOverlay = new Overlay({
stopEvent: true,
element: popup,
});
-
map.addOverlay(popupOverlay);
+
+ map.addLayer(new VectorLayer({
+ source: featureOverlaySource,
+ style: new Style({
+ stroke: new Stroke({
+ color: 'rgba(0, 255, 255, .8)',
+ width: 3,
+ }),
+ }),
+ }));
+
const features = [];
let popover, featureNum = 0;
@@ -892,8 +910,13 @@ map.addLayer(vectorLayer);
btnNext.classList.add('disabled');
}
+ const x = features[featureNum];
+ featureOverlaySource.clear(true);
+ featureOverlaySource.addFeature(x.feature);
+
pageNum.innerHTML = (featureNum + 1).toString();
- popover.tip.getElementsByClassName('popover-body')[0].replaceChildren(features[featureNum]);
+ popover.tip.getElementsByClassName('popover-body')[0].
+ replaceChildren(x.formattedContent);
setTimeout(function() { btn.blur() }, 100);
};
@@ -918,6 +941,7 @@ map.addLayer(vectorLayer);
btnClose.setAttribute('type', 'button');
btnClose.title = 'Stäng';
btnClose.onclick = function(event) {
+ featureOverlaySource.clear(true);
if (popover !== null) {
popover.dispose();
}
@@ -930,6 +954,7 @@ map.addLayer(vectorLayer);
const container0 = map.getViewport().getElementsByClassName('ol-overlaycontainer-stopevent')[0];
map.on('singleclick', function(event) {
/* clear the features list */
+ featureOverlaySource.clear(true);
features.length = 0;
featureNum = 0;
@@ -1004,7 +1029,7 @@ map.addLayer(vectorLayer);
// console.log(properties);
content.appendChild(table);
- features.push(content);
+ features.push({feature: feature, formattedContent: content});
pageCount.innerHTML = features.length.toString();
if (features.length == 2) {
@@ -1030,6 +1055,7 @@ map.addLayer(vectorLayer);
container: container0,
});
popover.show();
+ featureOverlaySource.addFeature(feature);
}
}, {
hitTolerance: 5,