Refacor marker functions

Author: allen-kim-chi

src/lib/Marker.tsx

@@ -1,23 +1,8 @@
 import { useEffect } from 'react';
-import { Feature as OlFeature } from 'ol';
 import { fromLonLat, toLonLat } from 'ol/proj';
-import Style from 'ol/style/Style';
-import Icon from 'ol/style/Icon';
-import Point from 'ol/geom/Point';
-import VectorLayer from 'ol/layer/Vector';
 import { useMap } from './Map';
 import { getLonLat } from './util';
-import VectorSource from 'ol/source/Vector';
-
-export function getMarkerImage(color='red', text='A') {
-  return `data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E` +
-    `%3Csvg%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2015%2015%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E` +
-      `%3Cpath%20fill%3D%22${color}%22%20d%3D%22M7.5%2C0C5.0676%2C0%2C2.2297%2C1.4865%2C2.2297%2C5.2703%26%23xA%3B%26%23x9%3BC2.2297%2C7.8378%2C6.2838%2C13.5135%2C7.5%2C15c1.0811-1.4865%2C5.2703-7.027%2C5.2703-9.7297C12.7703%2C1.4865%2C9.9324%2C0%2C7.5%2C0z%22%2F%3E` +
-      `%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%20font-size%3D%226px%22%3E`+
-        text +
-      `%3C%2Ftext%3E`+
-    `%3C%2Fsvg%3E`;
-}
+import { addMarker, removeMarker } from './marker-func';
 
 function getNextChar(char) {
   const ascii = char.charCodeAt(0);
@@ -29,43 +14,6 @@ function getNextChar(char) {
   }
 }
 
-
-function addMarker(markerLayer, lonLat, color, char) {
-  const markerFeature = new OlFeature({
-    geometry: new Point(fromLonLat(lonLat))
-  });
-  markerFeature.setStyle(new Style({
-    image: new Icon({
-      scale: 1,
-      anchor: [0.5,40],
-      anchorXUnits: 'fraction',
-      anchorYUnits: 'pixels',
-      src: getMarkerImage(color, char)
-    }),
-  }));
-
-  markerLayer.getSource().addFeature(markerFeature);
-  return markerFeature;
-}
-
-function getMarkerLayer(map) {
-  const markerLayer = map.getLayers().getArray()
-    .find(el => el.get('key') === 'markerLayer') as VectorLayer;
-  if (markerLayer) {
-    return markerLayer;
-  }
-
-  // container of markers, this can be set when marker is added, so that I can remove it here.
-  const newMarkerLayer = new VectorLayer({
-    source: new VectorSource({ features: [] }),
-    properties: {key: 'markerLayer'},
-    zIndex: 1,
-  });
-
-  map.addLayer(newMarkerLayer);
-  return newMarkerLayer;
-}
-
 export function Marker({
   lonLat=undefined,
   address=undefined,
@@ -80,16 +28,14 @@ export function Marker({
   useEffect(() => {
     if (!map) return;
 
-    const markerLayer = getMarkerLayer(map);
-
     if (lonLat) {
-      addMarker(markerLayer, lonLat, color, markerChar);
+      addMarker(map, lonLat, color, markerChar);
       map.getView().setCenter(fromLonLat(lonLat))
     } else if (address) {
       getLonLat(address).then(resp => {
         if (resp[0]) {
           const lonLat = [resp[0].lon, resp[0].lat];
-          const feature = addMarker(markerLayer, lonLat, color, markerChar);
+          const feature = addMarker(map, lonLat, color, markerChar);
           feature.set('address', resp[0].display_name)
           map.getView().setCenter(fromLonLat(lonLat))
         }
@@ -99,11 +45,11 @@ export function Marker({
     map.on('singleclick', function (evt) {
       const feature = map.forEachFeatureAtPixel(evt.pixel, feature => feature);
       if (feature) {
-        removeOnClick && markerLayer?.getSource().removeFeature(feature);
+        removeOnClick && removeMarker(map, feature);
       } else {
         const clickLonLat = toLonLat(evt.coordinate);
         markerChar = getNextChar(markerChar);
-        addOnClick && addMarker(markerLayer, clickLonLat, color, markerChar)
+        addOnClick && addMarker(map, clickLonLat, color, markerChar)
       }
     });
   }, [map]);

src/lib/controls/SearchControl.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { useMap } from '../Map';
 import { searchIcon } from './icons';
 import './SearchControl.css';
-import { addMarker } from '../add-marker';
+import { addMarker } from '../marker-func';
 import { fromLonLat } from 'ol/proj';
 
 declare let google: any;

src/lib/index.ts

@@ -2,8 +2,9 @@ export { getAddress, getLonLat } from './util';
 
 export { Map } from './Map';
 export { View } from './View';
-export { Marker, getMarkerImage } from './Marker';
+export { Marker } from './Marker';
 export { Overlay } from './Overlay';
+export { addMarker, removeMarker, getMarkerImage } from './marker-func';
 
 export { LayerGroup } from './layers/LayerGroup';
 export { TileLayer } from './layers/TileLayer';

src/lib/add-marker.ts renamed to src/lib/marker-func.ts

@@ -5,7 +5,22 @@ import { fromLonLat } from 'ol/proj';
 import VectorSource from 'ol/source/Vector';
 import Icon from 'ol/style/Icon';
 import Style from 'ol/style/Style';
-import { getMarkerImage } from './Marker';
+
+export function removeMarker(map, marker) {
+  const markerLayer = map.getLayers().getArray()
+    .find(el => el.get('key') === 'markerLayer') as VectorLayer;
+  markerLayer?.getSource().removeFeature(marker);
+}
+
+export function getMarkerImage(color='red', text='A') {
+  return `data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E` +
+    `%3Csvg%20width%3D%2240px%22%20height%3D%2240px%22%20viewBox%3D%220%200%2015%2015%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E` +
+      `%3Cpath%20fill%3D%22${color}%22%20d%3D%22M7.5%2C0C5.0676%2C0%2C2.2297%2C1.4865%2C2.2297%2C5.2703%26%23xA%3B%26%23x9%3BC2.2297%2C7.8378%2C6.2838%2C13.5135%2C7.5%2C15c1.0811-1.4865%2C5.2703-7.027%2C5.2703-9.7297C12.7703%2C1.4865%2C9.9324%2C0%2C7.5%2C0z%22%2F%3E` +
+      `%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%20font-size%3D%226px%22%3E`+
+        text +
+      `%3C%2Ftext%3E`+
+    `%3C%2Fsvg%3E`;
+}
 
 export function addMarker(map, lonLat, color='red', char='') {
   let markerLayer = map.getLayers().getArray()