Add custom marker icon images

resources/js/utils/customEventPolyfill.js

@@ -0,0 +1,15 @@
+(function () {
+  if (window.CustomEvent) return false;
+  function CustomEvent(event, params) {
+    params = params || {
+      bubbles: false, cancelable: false, detail: undefined
+    };
+    var evt = document.createEvent( 'CustomEvent' );
+    evt.initCustomEvent(
+      event, params.bubbles, params.cancelable, params.detail
+    );
+    return evt;
+  }
+  CustomEvent.prototype = window.Event.prototype;
+  window.CustomEvent = CustomEvent;
+})();

resources/js/utils/leaflet.js

@@ -0,0 +1,37 @@
+import {openUrl} from './helper';
+
+export function createMarker(map, markerData) {
+  const {title, lat, lng, url, icon, iconSize, iconAnchor} = markerData;
+
+  const markerOptions = {
+    title,
+    keyboard: false,
+    draggable: false,
+  };
+
+  if (icon) {
+    const iconOptions = {
+      iconUrl: icon,
+    };
+    if (iconSize) {
+      iconOptions.iconSize = iconSize;
+    }
+    if (iconAnchor) {
+      iconOptions.iconAnchor = iconAnchor;
+    }
+    markerOptions.icon = window.L.icon(iconOptions);
+  }
+
+  const marker = window.L.marker([lat, lng], markerOptions);
+
+  if (url) {
+    marker.on('click', event => {
+      event.originalEvent.preventDefault();
+      openUrl(url);
+    });
+  }
+
+  marker.addTo(map);
+
+  return marker;
+}

resources/js/utils/parser.js

@@ -23,13 +23,16 @@ const parseMarkers = element => {
   return markers.map(marker => {
     const lat = parseFloat(marker.lat);
     const lng = parseFloat(marker.lng);
-    const {title, url} = marker;
+    const {title, url, icon, iconSize, iconAnchor} = marker;
 
     return {
       title,
       lat,
       lng,
       url,
+      icon,
+      iconSize,
+      iconAnchor,
     };
   });
 };