Add custom marker icon images

resources/js/index.js

@@ -7,6 +7,7 @@ import mapkit from './services/mapkit';
 
 import parser from './utils/parser';
 import {isDefined, logError} from './utils/helper';
+import './utils/customEventPolyfill';
 
 const createMap = (element, createMap, createMarker) => {
   if (!isDefined(element)) {
@@ -24,9 +25,12 @@ const createMap = (element, createMap, createMarker) => {
     return;
   }
 
-  mapData.markers.forEach(markerData => {
-    createMarker(map, markerData);
-  })
+  const markers = mapData.markers.map(markerData => createMarker(map, markerData));
+
+  return {
+    map,
+    markers,
+  };
 };
 
 const createMapService = service => {
@@ -36,8 +40,23 @@ const createMapService = service => {
     service.createMarker,
   );
   const selector = `[data-map-${service.NAME}]`;
-  const elements = document.querySelectorAll(selector) || [];
-  elements.forEach(createMapService);
+  const elements = Array.prototype.slice.call(document.querySelectorAll(selector) || []);
+  elements.forEach(element => {
+    const data = createMapService(element);
+    dispatchEvent(service.NAME, element, data);
+  });
+};
+
+const dispatchEvent = (serviceName, element, data) => {
+  const event = new CustomEvent('LaravelMapInitialized', {
+    detail: {
+      element: element,
+      map: data.map,
+      markers: data.markers || [],
+      service: serviceName,
+    },
+  });
+  window.dispatchEvent(event);
 };
 
 window.onGoogleMapsReady = () => createMapService(google);

resources/js/services/bing.js

@@ -1,5 +1,6 @@
 import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
 import 'leaflet-bing-layer';
+import {createMarker} from '../utils/leaflet';
 
 // TODO: locales/culture
 
@@ -28,22 +29,5 @@ export default {
 
     return map;
   },
-  createMarker(map, markerData) {
-    const {title, lat, lng, url} = markerData;
-
-    const marker = window.L.marker([lat, lng], {
-      title,
-      keyboard: false,
-      draggable: false,
-    });
-
-    if (url) {
-      marker.on('click', event => {
-        event.originalEvent.preventDefault();
-        openUrl(url);
-      });
-    }
-
-    marker.addTo(map);
-  },
+  createMarker,
 }

resources/js/services/google.js

@@ -27,22 +27,35 @@ export default {
     return map;
   },
   createMarker(map, markerData) {
-    const {title, lat, lng, url} = markerData;
+    const {title, lat, lng, url, icon, iconSize, iconAnchor} = markerData;
 
-    const marker = new window.google.maps.Marker({
+    const markerOptions = {
       position: new window.google.maps.LatLng(lat, lng),
       map,
       title,
       draggable: false,
-      // icon: {
-      //   url: markerConfig.mapMarkerImg,
-      // },
-    });
+    };
+
+    if (icon) {
+      markerOptions.icon = {
+        url: icon,
+      };
+      if (iconSize) {
+        markerOptions.icon.size = new window.google.maps.Size(...iconSize);
+      }
+      if (iconAnchor) {
+        markerOptions.icon.anchor = new window.google.maps.Point(...iconAnchor);
+      }
+    }
+
+    const marker = new window.google.maps.Marker(markerOptions);
 
     if (url) {
       marker.addListener('click', () => {
         openUrl(url);
       });
     }
+
+    return marker;
   },
 };

resources/js/services/mapkit.js

@@ -41,13 +41,35 @@ export default {
     return map;
   },
   createMarker(map, markerData) {
-    const {title, lat, lng, url} = markerData;
+    const {title, lat, lng, url, icon} = markerData;
 
     const coordinate = new window.mapkit.Coordinate(lat, lng);
-    const marker = new window.mapkit.MarkerAnnotation(coordinate, {
-      title,
-    });
+
+    const markerAnnotationOptions = {title};
+
+    if (url) {
+      markerAnnotationOptions.callout = {
+        calloutRightAccessoryForAnnotation: function() {
+          const accessoryViewRight = document.createElement('a');
+          accessoryViewRight.className = 'right-accessory-view';
+          accessoryViewRight.href = url;
+          accessoryViewRight.target = '_blank';
+          accessoryViewRight.appendChild(document.createTextNode('ⓘ'));
+          return accessoryViewRight;
+        }
+      };
+    }
+
+    if (icon) {
+        markerAnnotationOptions.glyphImage = {
+            1: icon,
+        };
+    }
+
+    const marker = new window.mapkit.MarkerAnnotation(coordinate, markerAnnotationOptions);
 
     map.showItems([marker]); // TODO: map auto resize bugging if multiple markers
+
+    return marker;
   },
 };

resources/js/services/mapquest.js

@@ -1,4 +1,5 @@
 import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+import {createMarker} from '../utils/leaflet';
 
 // TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/
 
@@ -34,22 +35,5 @@ export default {
 
     return map;
   },
-  createMarker(map, markerData) {
-    const {title, lat, lng, url} = markerData;
-
-    const marker = window.L.marker([lat, lng], {
-      title,
-      keyboard: false,
-      draggable: false,
-    });
-
-    if (url) {
-      marker.on('click', event => {
-        event.originalEvent.preventDefault();
-        openUrl(url);
-      });
-    }
-
-    marker.addTo(map);
-  },
+  createMarker,
 }

resources/js/services/osm.js

@@ -1,4 +1,5 @@
 import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+import {createMarker} from '../utils/leaflet';
 
 // TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/
 
@@ -31,22 +32,5 @@ export default {
 
     return map;
   },
-  createMarker(map, markerData) {
-    const {title, lat, lng, url} = markerData;
-
-    const marker = window.L.marker([lat, lng], {
-      title,
-      keyboard: false,
-      draggable: false,
-    });
-
-    if (url) {
-      marker.on('click', event => {
-        event.originalEvent.preventDefault();
-        openUrl(url);
-      });
-    }
-
-    marker.addTo(map);
-  },
+  createMarker,
 }

resources/js/services/yandex.js

@@ -21,11 +21,26 @@ export default {
     return map;
   },
   createMarker(map, markerData) {
-    const {title, lat, lng, url} = markerData;
+    const {title, lat, lng, url, icon, iconSize, iconAnchor} = markerData;
 
-    const marker = new window.ymaps.Placemark([lat, lng], {
+    const placemarkProperties = {
       hintContent: title,
-    });
+    };
+
+    const placemarkOptions = {};
+
+    if (icon) {
+      placemarkOptions.iconLayout = 'default#imageWithContent';
+      placemarkOptions.iconImageHref = icon;
+      if (iconSize) {
+        placemarkOptions.iconImageSize = iconSize;
+      }
+      if (iconAnchor) {
+        placemarkOptions.iconImageOffset = iconAnchor;
+      }
+    }
+
+    const marker = new window.ymaps.Placemark([lat, lng], placemarkProperties, placemarkOptions);
 
     // if (url) {
     //   marker.addListener('click', () => {
@@ -34,5 +49,7 @@ export default {
     // }
 
     map.geoObjects.add(marker);
+
+    return marker;
   },
 };

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,
     };
   });
 };