Highlight features shown in popover.

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,