Add marker popups

resources/js/utils/dispatchEvent.js

@@ -0,0 +1,23 @@
+export function dispatchEventMapInitialized (serviceName, element, data) {
+  const event = new CustomEvent('LaravelMaps:MapInitialized', {
+    detail: {
+      element: element,
+      map: data.map,
+      markers: data.markers || [],
+      service: serviceName,
+    },
+  });
+  window.dispatchEvent(event);
+}
+
+export function dispatchEventMarkerClicked (serviceName, element, map, marker) {
+  const event = new CustomEvent('LaravelMaps:MarkerClicked', {
+    detail: {
+      element: element,
+      map: map,
+      marker: marker,
+      service: serviceName,
+    },
+  });
+  window.dispatchEvent(event);
+}

resources/js/utils/leaflet.js

@@ -1,7 +1,8 @@
 import {openUrl} from './helper';
+import {dispatchEventMarkerClicked} from './dispatchEvent';
 
-export function createMarker(map, markerData) {
-  const {title, lat, lng, url, icon, iconSize, iconAnchor} = markerData;
+export function createMarker(service, element, map, markerData) {
+  const {title, lat, lng, url, popup, icon, iconSize, iconAnchor} = markerData;
 
   const markerOptions = {
     title,
@@ -24,12 +25,18 @@ export function createMarker(map, markerData) {
 
   const marker = window.L.marker([lat, lng], markerOptions);
 
-  if (url) {
-    marker.on('click', event => {
-      event.originalEvent.preventDefault();
+  marker.on('click', event => {
+    event.originalEvent.preventDefault();
+    dispatchEventMarkerClicked(service, element, map, marker);
+    if (popup) {
+      window.L.popup()
+        .setLatLng([lat, lng])
+        .setContent(popup)
+        .openOn(map);
+    } else if (url) {
       openUrl(url);
-    });
-  }
+    }
+  });
 
   marker.addTo(map);
 

resources/js/utils/parser.js

@@ -1,4 +1,4 @@
-import {logError} from "./helper";
+import {logError} from './helper';
 
 const parseMap = element => JSON.parse(
   element.dataset.mapGoogle
@@ -21,15 +21,17 @@ const parseService = element => {
 const parseMarkers = element => {
   const markers = JSON.parse(element.dataset.mapMarkers) || [];
   return markers.map(marker => {
-    const lat = parseFloat(marker.lat);
-    const lng = parseFloat(marker.lng);
-    const {title, url, icon, iconSize, iconAnchor} = marker;
+    const lat = parseNumberFloat(marker.lat);
+    const lng = parseNumberFloat(marker.lng);
+
+    const {title, url, popup, icon, iconSize, iconAnchor} = marker;
 
     return {
       title,
       lat,
       lng,
       url,
+      popup,
       icon,
       iconSize,
       iconAnchor,
@@ -37,13 +39,25 @@ const parseMarkers = element => {
   });
 };
 
+const parseNumberFloat = number => {
+  return typeof number === 'string'
+    ? parseFloat(number)
+    : number;
+};
+
+const parseNumberInt = number => {
+  return typeof number === 'string'
+    ? parseFloat(number)
+    : number;
+};
+
 export default {
   map(element) {
     try {
       const map = parseMap(element);
-      const lat = parseFloat(map.lat);
-      const lng = parseFloat(map.lng);
-      const zoom = parseInt(map.zoom);
+      const lat = parseNumberFloat(map.lat);
+      const lng = parseNumberFloat(map.lng);
+      const zoom = parseNumberInt(map.zoom);
       const service = parseService(element);
       const markers = parseMarkers(element);
       return {