Merge pull request #18 from RyanBirtch-aot/marker-image-bug

Marker image bug

components/src/components/Map/services/MapService.ts

@@ -2,15 +2,17 @@ import * as L from 'leaflet';
 import 'leaflet-draw';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-draw/dist/leaflet.draw-src.css';
+
 const DEFAULT_MAP_LAYER_URL =
   'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 const DEFAULT_LAYER_ATTRIBUTION =
   '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 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_PATH =
-  'https://unpkg.com/[email protected]/dist/images/marker-icon.png';
+const CUSTOM_MARKER_PATH = 'https://unpkg.com/[email protected]/dist/images/';
+
+L.Icon.Default.imagePath = CUSTOM_MARKER_PATH;
 
 interface MapServiceOptions {
   mapContainer: HTMLElement;
@@ -34,6 +36,7 @@ class MapService {
 
     if (options.mapContainer) {
       const { map, drawnItems } = this.initializeMap(options);
+
       this.map = map;
       this.drawnItems = drawnItems;
 
@@ -49,9 +52,6 @@ class MapService {
             .setContent('<p>Only one marker for submission</p>')
             .openOn(map);
         } else {
-          if (layer.type === 'marker') {
-            layer.setIcon(this.customMarker);
-          }
           drawnItems.addLayer(layer);
         }
         this.bindPopupToLayer(layer);
@@ -64,9 +64,6 @@ class MapService {
         options.onDrawnItemsChange(drawnItems.getLayers());
       });
 
-      map.on(L.Draw.Event.DRAWSTART, (e) => {
-        e.layer.setIcon(this.customMarker);
-      });
       map.on('resize', () => {
         map.invalidateSize();
       });
@@ -87,7 +84,6 @@ class MapService {
     if (drawOptions.rectangle) {
       drawOptions.rectangle.showArea = false;
     }
-
     const map = L.map(mapContainer).setView(
       center,
       defaultZoom || DEFAULT_MAP_ZOOM
@@ -174,7 +170,7 @@ class MapService {
     items.forEach((item) => {
       let layer;
       if (item.type === 'marker') {
-        layer = L.marker(item.coordinates).setIcon(this.customMarker);
+        layer = L.marker(item.coordinates);
       } else if (item.type === 'rectangle') {
         layer = L.rectangle(item.bounds);
       } else if (item.type === 'circle') {
@@ -202,10 +198,5 @@ class MapService {
     }
     return false;
   }
-  customMarker = L.icon({
-    iconUrl: CUSTOM_MARKER_PATH,
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-  });
 }
 export default MapService;