[#49] Create fnMarker & handle MarkerIcon props

akvo · Nov 19, 2024 · ae5d0bb · ae5d0bb
1 parent 4780c5a
commit ae5d0bb
Showing 1 changed file with 31 additions and 9 deletions.
diff --git a/src/components/Map/Utils.js b/src/components/Map/Utils.js
@@ -2,19 +2,23 @@ import L from 'leaflet';
 import mIcon from 'leaflet/dist/images/marker-icon.png';
 import mShadow from 'leaflet/dist/images/marker-shadow.png';
 import * as topojson from 'topojson-client';
+import { renderReactToDiv } from '../../utils/mapHelper';
 
-export const MarkerIcon = () => {
+export const MarkerIcon = (props = {}) => {
   const defaultIcon = typeof mIcon === 'object' ? mIcon?.src : mIcon;
   const defaultShadow = typeof mShadow === 'object' ? mShadow?.src : mShadow;
 
-  const Icon = L.icon({
-    iconUrl: defaultIcon,
-    shadowUrl: defaultShadow,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    shadowSize: [41, 41]
-  });
+  const Icon = props?.html
+    ? L.divIcon(props)
+    : L.icon({
+        iconUrl: defaultIcon,
+        shadowUrl: defaultShadow,
+        iconSize: [25, 41],
+        iconAnchor: [12, 41],
+        popupAnchor: [1, -34],
+        shadowSize: [41, 41],
+        ...props
+      });
 
   return Icon;
 };
@@ -33,3 +37,21 @@ export const getGeoJSONList = (d) => {
   }
   return [d];
 };
+
+export const fnMarker = (
+  latlng,
+  { children = null, label = null, popUp = {}, icon = {}, ...props }
+) => {
+  const m = L.marker(latlng, {
+    icon: MarkerIcon(icon),
+    ...props
+  });
+  if (label) {
+    m.bindPopup(label, popUp || {});
+  }
+  if (children) {
+    const content = renderReactToDiv(children);
+    m.bindPopup(content, popUp || {});
+  }
+  return m;
+};