From f459450222d76a463371bbb61cb5edb641ea5ffe Mon Sep 17 00:00:00 2001
From: RyanBirtch-aot <ryan.birtch@aot-technologies.com>
Date: Wed, 31 Jul 2024 19:20:30 +0000
Subject: [PATCH] Added custom marker, placeholder marker image

---
 .../src/components/Map/services/MapService.ts    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts
index 174d27471..9a456aeed 100644
--- a/components/src/components/Map/services/MapService.ts
+++ b/components/src/components/Map/services/MapService.ts
@@ -9,7 +9,8 @@ const DEFAULT_LAYER_ATTRIBUTION =
 const DEFAULT_MAP_ZOOM = 5;
 const DECIMALS_LATLNG = 5; // the number of decimals of latitude and longitude to be displayed in the marker popup
 const COMPONENT_EDIT_CLASS = 'component-edit-tabs';
-const CUSTOM_MARKER_URI = '../Common/marker-icon.png/';
+const CUSTOM_MARKER_PATH =
+  'http://leafletjs.com/examples/custom-icons/leaf-green.png';
 
 interface MapServiceOptions {
   mapContainer: HTMLElement;
@@ -45,7 +46,10 @@ class MapService {
             .openOn(map);
         } else {
           console.log(layer);
-          layer.icon({ iconUrl: CUSTOM_MARKER_URI });
+          if (layer.type === 'marker') {
+            layer.setIcon(this.customMarker);
+            console.log('Adding marker' + layer);
+          }
           drawnItems.addLayer(layer);
         }
         this.bindPopupToLayer(layer);
@@ -157,7 +161,8 @@ class MapService {
     items.forEach((item) => {
       let layer;
       if (item.type === 'marker') {
-        layer = L.marker(item.coordinates);
+        layer = L.marker(item.coordinates).setIcon(this.customMarker); //layer.setIcon(this.customMarker);
+        console.log('Loading Marker' + layer);
       } else if (item.type === 'rectangle') {
         layer = L.rectangle(item.bounds);
       } else if (item.type === 'circle') {
@@ -184,5 +189,10 @@ class MapService {
     }
     return false;
   }
+  customMarker = L.icon({
+    iconUrl: CUSTOM_MARKER_PATH,
+    iconSize: [25, 41],
+    iconAnchor: [12, 20],
+  });
 }
 export default MapService;