huge Laravel 10 upgrade

support/laravel-maps/resources/js/services/bing.js

@@ -0,0 +1,33 @@
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+import 'leaflet-bing-layer';
+import {createMarker} from '../utils/leaflet';
+
+const name = 'bing';
+
+export default {
+  name,
+  createMap(element, mapData) {
+    if (!isDefined(window.L)) {
+      logError('leaflet is undefined');
+      return;
+    }
+    const {lat, lng, zoom, service} = mapData;
+
+    const map = window.L
+      .map(element, {})
+      .on('load', () => {
+        fadeElementIn(element);
+      })
+      .setView([lat, lng], zoom);
+
+    window.L.tileLayer
+      .bing({
+        bingMapsKey: service.key,
+        imagerySet: 'CanvasLight',
+      })
+      .addTo(map);
+
+    return map;
+  },
+  createMarker: createMarker.bind(null, name),
+}

support/laravel-maps/resources/js/services/google.js

@@ -0,0 +1,70 @@
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+import {dispatchEventMarkerClicked} from '../utils/dispatchEvent';
+
+const name = 'google';
+
+export default {
+  name,
+  createMap(element, mapData) {
+    if (!isDefined(window.google)) {
+      logError('google is undefined');
+      return;
+    }
+    if (!isDefined(window.google.maps)) {
+      logError('google maps is undefined');
+      return;
+    }
+
+    const {lat, lng, zoom, service} = mapData;
+
+    const map = new window.google.maps.Map(element, {
+      center: new window.google.maps.LatLng(lat, lng),
+      zoom,
+      mapTypeId: service.type || window.google.maps.MapTypeId.ROADMAP,
+    });
+
+    window.google.maps.event.addListenerOnce(map, 'idle', () => {
+      fadeElementIn(element);
+    });
+
+    return map;
+  },
+  createMarker(element, map, markerData) {
+    const {title, lat, lng, url, popup, icon, iconSize, iconAnchor} = markerData;
+
+    const markerOptions = {
+      position: new window.google.maps.LatLng(lat, lng),
+      map,
+      title,
+      draggable: false,
+    };
+
+    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);
+
+    marker.addListener('click', () => {
+      dispatchEventMarkerClicked(name, element, map, marker);
+      if (popup) {
+        const infoWindow = new window.google.maps.InfoWindow({
+          content: popup
+        });
+        infoWindow.open(map, marker);
+      } else if (url) {
+        openUrl(url);
+      }
+    });
+
+    return marker;
+  },
+};

support/laravel-maps/resources/js/services/mapkit.js

@@ -0,0 +1,66 @@
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+import {dispatchEventMarkerClicked} from "../utils/dispatchEvent";
+
+const name = 'mapkit';
+
+export default {
+  name,
+  createMap(element, mapData) {
+    if (!isDefined(window.mapkit)) {
+      logError('mapkit is undefined');
+      return;
+    }
+    const {lat, lng, zoom, service} = mapData;
+
+    window.mapkit.init({
+      authorizationCallback(done) {
+        done(service.key);
+      },
+    });
+    window.mapkit.addEventListener('configuration-change', event => {
+      if (event.status === 'Initialized') {
+        fadeElementIn(element);
+      }
+    });
+
+    const map = new window.mapkit.Map(element, {
+      mapType: service.type || window.mapkit.Map.MapTypes.Standard,
+    });
+
+    const delta = Math.exp(Math.log(360) - (zoom * Math.LN2)); // TODO: zoom to delta not working
+    map.region = new window.mapkit.CoordinateRegion(
+      new window.mapkit.Coordinate(lat, lng),
+      new window.mapkit.CoordinateSpan(delta, delta),
+    );
+
+    return map;
+  },
+  createMarker(element, map, markerData) {
+    const {title, lat, lng, url, popup, icon} = markerData;
+
+    const coordinate = new window.mapkit.Coordinate(lat, lng);
+
+    const markerAnnotationOptions = {title};
+
+    if (icon) {
+        markerAnnotationOptions.glyphImage = {
+            1: icon,
+        };
+    }
+
+    const marker = new window.mapkit.MarkerAnnotation(coordinate, markerAnnotationOptions);
+
+    marker.addEventListener('select', event => {
+      dispatchEventMarkerClicked(name, element, map, marker);
+      if (popup) {
+        // TODO
+      } else if (url) {
+        openUrl(url);
+      }
+    });
+
+    map.showItems([marker]); // TODO: map auto resize bugging if multiple markers
+
+    return marker;
+  },
+};

support/laravel-maps/resources/js/services/mapquest.js

@@ -0,0 +1,40 @@
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+import {createMarker} from '../utils/leaflet';
+
+// TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/
+
+// TODO add config for different styles like database connections: https://wiki.openstreetmap.org/wiki/Tile_servers
+// http://leaflet-extras.github.io/leaflet-providers/preview/
+
+// TODO custom icons: https://leafletjs.com/examples/custom-icons/
+const name = 'mapquest';
+
+export default {
+  name,
+  createMap(element, mapData) {
+    if (!isDefined(window.L)) {
+      logError('leaflet is undefined');
+      return;
+    }
+    if (!isDefined(window.L.mapquest)) {
+      logError('mapquest is undefined');
+      return
+    }
+    const {lat, lng, zoom, service} = mapData;
+    window.L.mapquest.key = service.key;
+
+    const map = window.L.mapquest
+      .map(element, {
+        center: [lat, lng],
+        zoom,
+        layers: window.L.mapquest.tileLayer(service.type || 'map'),
+      })
+      .on('load', () => {
+        fadeElementIn(element);
+      })
+      .setView([lat, lng], zoom);
+
+    return map;
+  },
+  createMarker: createMarker.bind(null, name),
+}

support/laravel-maps/resources/js/services/osm.js

@@ -0,0 +1,38 @@
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+import {createMarker} from '../utils/leaflet';
+
+// TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/
+
+// TODO add config for different styles like database connections: https://wiki.openstreetmap.org/wiki/Tile_servers
+// http://leaflet-extras.github.io/leaflet-providers/preview/
+
+// TODO custom icons: https://leafletjs.com/examples/custom-icons/
+
+const name = 'osm';
+
+export default {
+  name,
+  createMap(element, mapData) {
+    if (!isDefined(window.L)) {
+      logError('leaflet is undefined');
+      return;
+    }
+    const {lat, lng, zoom, service} = mapData;
+
+    const map = window.L
+      .map(element, {})
+      .on('load', () => {
+        fadeElementIn(element);
+      })
+      .setView([lat, lng], zoom);
+
+    window.L
+      .tileLayer(service.type || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+      })
+      .addTo(map);
+
+    return map;
+  },
+  createMarker: createMarker.bind(null, name),
+}

support/laravel-maps/resources/js/services/yandex.js

@@ -0,0 +1,65 @@
+import {isDefined, logError, openUrl} from '../utils/helper';
+import {dispatchEventMarkerClicked} from '../utils/dispatchEvent';
+
+const name = 'yandex';
+
+export default {
+  name,
+  createMap(element, mapData) {
+    if (!isDefined(window.ymaps)) {
+      logError('ymaps is undefined');
+      return;
+    }
+    const {lat, lng, zoom} = mapData;
+
+    const map = new window.ymaps.Map(element, {
+      center: [lat, lng],
+      zoom,
+    });
+
+    // window.google.maps.event.addListenerOnce(map, 'idle', () => {
+    //   fadeElementIn(element);
+    // });
+
+    return map;
+  },
+  createMarker(element, map, markerData) {
+    const {title, lat, lng, url, popup, icon, iconSize, iconAnchor} = markerData;
+
+    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;
+      }
+    }
+
+    if (popup) {
+      placemarkProperties.balloonContentBody = popup;
+    }
+
+    const marker = new window.ymaps.Placemark([lat, lng], placemarkProperties, placemarkOptions);
+
+    marker.events.add('click', e => {
+      dispatchEventMarkerClicked(name, element, map, marker);
+      if (popup) {
+        // Handled with ballonContentBody
+      } else if (url) {
+        openUrl(url);
+      }
+    });
+
+    map.geoObjects.add(marker);
+
+    return marker;
+  },
+};