Merge branch 'master' of https://github.com/origo-map/origo into not-…

…hidden
Flodkvist · Apr 26, 2023 · d994d07 · d994d07
2 parents 1d1b62d + de6a4b9
commit d994d07
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 81 deletions.
diff --git a/src/controls/print/print-resize.js b/src/controls/print/print-resize.js
@@ -453,8 +453,6 @@ export default function PrintResize(options = {}) {
       } else if (features) {
         features.forEach(feature => {
           const featureStyle = feature.getStyle();
-          console.log(featureStyle);
-          console.log(styleName);
           if (styleName === 'origoStylefunction' || styleName === 'default') {
             feature.set('styleScale', 1);
           } else if (featureStyle) {

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/style/drawstyles.js b/src/style/drawstyles.js
@@ -1,6 +1,7 @@
 import {
   Circle as CircleStyle,
   Fill,
+  Icon,
   RegularShape,
   Stroke,
   Style,
@@ -9,8 +10,15 @@ import {
 import { getArea, getLength } from 'ol/sphere';
 import { LineString, MultiPoint, Point } from 'ol/geom';
 
-function createRegularShape(type, size, fill, stroke) {
+function createRegularShape(type, pointSize, pointFill, pointStroke) {
   let style;
+  const size = pointSize || 10;
+  const stroke = pointStroke || new Stroke({
+    color: 'rgba(0, 0, 0, 0.7)'
+  });
+  const fill = pointFill || new Fill({
+    color: 'rgba(0, 153, 255, 0.8)'
+  });
   switch (type) {
     case 'square':
       style = new Style({
@@ -86,6 +94,29 @@ function createRegularShape(type, size, fill, stroke) {
       });
       break;
 
+    case 'marker': {
+      let fillColor = 'blue';
+      let strokeColor = 'black';
+      let strokeWidth = 10;
+      if (fill && fill.getColor) {
+        fillColor = encodeURIComponent(fill.getColor());
+      }
+      if (stroke && stroke.getColor) {
+        strokeColor = encodeURIComponent(stroke.getColor());
+      }
+      if (stroke && stroke.getWidth) {
+        strokeWidth = 5 * stroke.getWidth();
+      }
+      const svg = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path stroke="${strokeColor}" stroke-width="${strokeWidth}" fill="${fillColor}" d="M480 897q133-121 196.5-219.5T740 504q0-117.79-75.292-192.895Q589.417 236 480 236t-184.708 75.105Q220 386.21 220 504q0 75 65 173.5T480 897Zm0 79"/></svg>`;
+      style = new Style({
+        image: new Icon({
+          src: `data:image/svg+xml;utf8,${svg}`,
+          scale: size / 10 || 1,
+          anchor: [0.5, 0.85]
+        })
+      });
+      break;
+    }
     default:
       style = new Style({
         image: new CircleStyle({

diff --git a/src/style/styletemplate.js b/src/style/styletemplate.js
@@ -74,6 +74,7 @@ export default function styleTemplate(palette, swStyle) {
       <option value="star"${swStyle.pointType === 'star' ? ' selected' : ''}>Stjärna</option>
       <option value="triangle"${swStyle.pointType === 'triangle' ? ' selected' : ''}>Triangel</option>
       <option value="square"${swStyle.pointType === 'square' ? ' selected' : ''}>Kvadrat</option>
+      <option value="marker"${swStyle.pointType === 'marker' ? ' selected' : ''}>Markör</option>
     </select>
   </div></div>`;
 

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() {
@@ -537,12 +540,31 @@ const Viewer = function Viewer(targetOption, options = {}) {
             mapId: this.getId()
           });
 
+          if (urlParams.pin) {
+            featureinfoOptions.savedPin = urlParams.pin;
+          } else if (urlParams.selection) {
+            // This needs further development for proper handling in permalink
+            featureinfoOptions.savedSelection = new Feature({
+              geometry: new geom[urlParams.selection.geometryType](urlParams.selection.coordinates)
+            });
+          }
+
+          featureinfoOptions.viewer = this;
+
+          selectionmanager = Selectionmanager(featureinfoOptions);
+          featureinfo = Featureinfo(featureinfoOptions);
+          this.addComponent(selectionmanager);
+          this.addComponent(featureinfo);
+          this.addComponent(centerMarker);
+
+          this.addControls();
+
           if (urlParams.feature) {
             const featureId = urlParams.feature;
             const layerName = featureId.split('.')[0];
             const layer = getLayer(layerName);
-            const layerType = layer.get('type');
-            if (layer && layerType !== 'GROUP') {
+            if (layer && layer.get('type') !== 'GROUP') {
+              const layerType = layer.get('type');
               // FIXME: postrender event is only emitted if any features from a layer is actually drawn, which means there is no feature in the default extent,
               // it will not be triggered until map is panned or zoomed where a feature exists.
               layer.once('postrender', () => {
@@ -590,28 +612,10 @@ const Viewer = function Viewer(targetOption, options = {}) {
             }
           }
 
-          if (urlParams.pin) {
-            featureinfoOptions.savedPin = urlParams.pin;
-          } else if (urlParams.selection) {
-            // This needs further development for proper handling in permalink
-            featureinfoOptions.savedSelection = new Feature({
-              geometry: new geom[urlParams.selection.geometryType](urlParams.selection.coordinates)
-            });
-          }
-
           if (!urlParams.zoom && !urlParams.mapStateId && startExtent) {
             map.getView().fit(startExtent, { size: map.getSize() });
           }
 
-          featureinfoOptions.viewer = this;
-
-          selectionmanager = Selectionmanager(featureinfoOptions);
-          featureinfo = Featureinfo(featureinfoOptions);
-          this.addComponent(selectionmanager);
-          this.addComponent(featureinfo);
-          this.addComponent(centerMarker);
-
-          this.addControls();
           this.dispatch('loaded');
         });
     },
@@ -681,6 +685,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
     removeGroup,
     removeLayer,
     removeOverlays,
+    removeMarkers,
     setStyle,
     zoomToExtent,
     getSelectionManager,