feature: make markers queryable and removeable (origo-map#1750)

Flodkvist · Apr 26, 2023 · de6a4b9 · de6a4b9
1 parent 32d4647
commit de6a4b9
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 58 deletions.
diff --git a/src/maputils.js b/src/maputils.js
@@ -4,13 +4,11 @@ import TileGrid from 'ol/tilegrid/TileGrid';
 import Feature from 'ol/Feature';
 import Point from 'ol/geom/Point';
 import Vector from 'ol/source/Vector';
-import VectorLayer from 'ol/layer/Vector';
 import Overlay from 'ol/Overlay';
 import GeoJSON from 'ol/format/GeoJSON';
 import { getTopLeft, getBottomLeft } from 'ol/extent';
 import WKT from 'ol/format/WKT';
 import numberFormatter from './utils/numberformatter';
-import Style from './style';
 import Popup from './popup';
 
 const maputils = {
@@ -140,61 +138,71 @@ const maputils = {
     }
     return scaleValue;
   },
-  createMarker: function createMarker(coordinates, title, content, viewer) {
-    const featureStyles = {
-      stroke: {
-        color: [100, 149, 237, 1],
-        width: 4,
-        lineDash: null
-      },
-      fill: {
-        color: [100, 149, 237, 0.2]
-      },
-      circle: {
-        radius: 7,
-        stroke: {
-          color: [100, 149, 237, 1],
-          width: 2
-        },
-        fill: {
-          color: [255, 255, 255, 1]
-        }
-      }
-    };
-    const vectorStyles = Style.createStyleRule(featureStyles);
-    const layer = new VectorLayer({
-      source: new Vector({
-        features: [
-          new Feature({
-            geometry: new Point(coordinates)
-          })
-        ]
-      }),
-      style: vectorStyles
-    });
-    const popup = Popup(`#${viewer.getId()}`);
-    popup.setContent({
+  createMarker: function createMarker(coordinates, title, content, viewer, layerProps = {}, showPopup = true) {
+    const {
+      name = 'markerLayer',
+      layerTitle = 'Markörer',
+      group = 'none',
+      style = 'default',
+      featureinfoTitle = '{{title}}',
+      queryable = true
+    } = layerProps;
+    let layer = viewer.getLayer(name);
+    if (!layer) {
+      const props = {
+        name,
+        title: layerTitle,
+        group,
+        style,
+        type: 'FEATURE',
+        layerType: 'vector',
+        featureinfoTitle,
+        attributes: [
+          {
+            html: '{{content}}'
+          }
+        ],
+        visible: true,
+        queryable
+      };
+      layer = viewer.addLayer(props);
+    }
+    layer.getSource().addFeature(new Feature({
+      geometry: new Point(coordinates),
       content,
       title
-    });
-    popup.setTitle(title);
-    popup.setVisibility(true);
-    const popupEl = popup.getEl();
-    const popupHeight = document.querySelector('.o-popup').offsetHeight + 10;
-    popupEl.style.height = `${popupHeight}px`;
-    const overlay = new Overlay({
-      element: popupEl,
-      autoPan: {
-        margin: 55,
-        animation: {
-          duration: 500
-        }
-      },
-      positioning: 'bottom-center'
-    });
-    viewer.getMap().addOverlay(overlay);
-    overlay.setPosition(coordinates);
-    return layer;
+    }));
+    if (showPopup) {
+      const popup = Popup(`#${viewer.getId()}`);
+      popup.setContent({
+        content,
+        title
+      });
+      popup.setTitle(title);
+      popup.setVisibility(true);
+      const popupEl = popup.getEl();
+      const popupHeight = document.querySelector('.o-popup').offsetHeight + 10;
+      popupEl.style.height = `${popupHeight}px`;
+      const overlay = new Overlay({
+        element: popupEl,
+        autoPan: {
+          margin: 55,
+          animation: {
+            duration: 500
+          }
+        },
+        positioning: 'bottom-center'
+      });
+      viewer.getMap().addOverlay(overlay);
+      overlay.setPosition(coordinates);
+    }
+  },
+  removeMarkers: function removeMarkers(viewer, layerName = 'markerLayer') {
+    const layer = viewer.getLayer(layerName);
+    if (layer) {
+      layer.getSource().clear();
+      viewer.removeOverlays();
+    }
   },
   transformCoordinate: function transformCoordinate(coordinate, source, destination) {
     return transform(coordinate, source, destination);

diff --git a/src/viewer.js b/src/viewer.js
@@ -503,9 +503,12 @@ const Viewer = function Viewer(targetOption, options = {}) {
     }
   };
 
-  const addMarker = function addMarker(coordinates, title, content) {
-    const layer = maputils.createMarker(coordinates, title, content, this);
-    map.addLayer(layer);
+  const addMarker = function addMarker(coordinates, title, content, layerProps, showPopup) {
+    maputils.createMarker(coordinates, title, content, this, layerProps, showPopup);
+  };
+
+  const removeMarkers = function removeMarkers(layerName) {
+    maputils.removeMarkers(this, layerName);
   };
 
   const getUrlParams = function getUrlParams() {
@@ -682,6 +685,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
     removeGroup,
     removeLayer,
     removeOverlays,
+    removeMarkers,
     setStyle,
     zoomToExtent,
     getSelectionManager,