Add custom marker icon images

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