huge Laravel 10 upgrade

support/laravel-maps/resources/js/index.js

@@ -0,0 +1,69 @@
+import google from './services/google';
+import osm from './services/osm';
+import bing from './services/bing';
+import mapquest from './services/mapquest';
+import yandex from './services/yandex';
+import mapkit from './services/mapkit';
+
+import parser from './utils/parser';
+import {isDefined, logError} from './utils/helper';
+import './utils/customEventPolyfill';
+import {dispatchEventMapInitialized} from './utils/dispatchEvent';
+
+const createMap = (element, createMap, createMarker) => {
+  if (!isDefined(element)) {
+    logError('element is undefined');
+    return;
+  }
+  const mapData = parser.map(element);
+  if (!isDefined(mapData)) {
+    logError('map data is undefined');
+    return;
+  }
+  const map = createMap(element, mapData);
+  if (!isDefined(map)) {
+    logError('map is undefined');
+    return;
+  }
+
+  const markers = mapData.markers.map(markerData => createMarker(element, map, markerData));
+
+  return {
+    map,
+    markers,
+  };
+};
+
+const createMapService = service => {
+  const createMapService = element => createMap(
+    element,
+    service.createMap,
+    service.createMarker,
+  );
+  const selector = `[data-map-${service.name}]`;
+  const elements = Array.prototype.slice.call(document.querySelectorAll(selector) || []);
+  elements.forEach(element => {
+    if (element.getAttribute('data-map-initialized') === true) {
+      return;
+    }
+    const data = createMapService(element);
+    dispatchEventMapInitialized(service.name, element, data);
+    element.setAttribute('data-map-initialized', true);
+  });
+};
+
+window.onGoogleMapsReady = () => createMapService(google);
+
+window.onYandexMapsReady = () => createMapService(yandex);
+
+window.addEventListener('DOMContentLoaded', () => {
+  (() => createMapService(osm))();
+
+  (() => createMapService(bing))();
+
+  (() => createMapService(mapquest))();
+
+  (() => createMapService(mapkit))();
+});
+
+

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

support/laravel-maps/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;
+})();

support/laravel-maps/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);
+}

support/laravel-maps/resources/js/utils/helper.js

@@ -0,0 +1,11 @@
+export const isDefined = object => typeof object !== 'undefined';
+
+export const fadeElementIn = element => {
+  const target = element.closest('.fade');
+  target.classList.add('show'); // Bootstrap 4
+  target.classList.add('in'); // Backwards compatibility Bootstrap 3.3.7
+};
+
+export const openUrl = url => window.open(url, '_blank');
+
+export const logError = error => isDefined(console) && console.error('[laravel-maps] error:', error);

support/laravel-maps/resources/js/utils/leaflet.js

@@ -0,0 +1,44 @@
+import {openUrl} from './helper';
+import {dispatchEventMarkerClicked} from './dispatchEvent';
+
+export function createMarker(service, element, map, markerData) {
+  const {title, lat, lng, url, popup, 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);
+
+  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);
+
+  return marker;
+}

support/laravel-maps/resources/js/utils/parser.js

@@ -0,0 +1,74 @@
+import {logError} from './helper';
+
+const parseMap = element => JSON.parse(
+  element.dataset.mapGoogle
+  || element.dataset.mapOsm
+  || element.dataset.mapBing
+  || element.dataset.mapMapquest
+  || element.dataset.mapYandex
+  || element.dataset.mapMapkit
+);
+
+const parseService = element => {
+  const {key, type} = JSON.parse(element.dataset.mapService);
+
+  return {
+    key,
+    type,
+  }
+};
+
+const parseMarkers = element => {
+  const markers = JSON.parse(element.dataset.mapMarkers) || [];
+  return markers.map(marker => {
+    const lat = parseNumberFloat(marker.lat);
+    const lng = parseNumberFloat(marker.lng);
+
+    const {title, url, popup, icon, icon_size, icon_anchor} = marker;
+
+    return {
+      title,
+      lat,
+      lng,
+      url,
+      popup,
+      icon,
+      iconSize: icon_size || marker.iconSize,
+      iconAnchor: icon_anchor || marker.iconAnchor,
+    };
+  });
+};
+
+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 = parseNumberFloat(map.lat);
+      const lng = parseNumberFloat(map.lng);
+      const zoom = parseNumberInt(map.zoom);
+      const service = parseService(element);
+      const markers = parseMarkers(element);
+      return {
+        lat,
+        lng,
+        zoom,
+        service,
+        markers,
+      };
+    } catch (e) {
+      logError(e);
+    }
+  },
+}

support/laravel-maps/resources/sass/index.scss

@@ -0,0 +1,30 @@
+.gnw-map-service {
+  position: relative;
+  height: 400px;
+
+  &__google {
+    background: rgb(229, 227, 223);
+  }
+  &__osm,
+  &__bing,
+  &__mapquest {
+    background: rgb(221, 221, 221);
+  }
+  &__yandex {
+    background: rgb(243, 241, 237);
+  }
+  &__mapkit {
+    background: rgb(248, 244, 236);
+  }
+}
+
+.gnw-map {
+  height: inherit;
+
+  // Fix Mapkit canvas
+  .mk-map-view {
+    > .syrup-canvas {
+      margin-left: -50%;
+    }
+  }
+}

support/laravel-maps/resources/views/index.blade.php

@@ -0,0 +1,23 @@
+@if ($enabled)
+    <div class="gnw-map-service gnw-map-service__{{ $service }}">
+        <div class="gnw-map fade" data-map-{{ $service }}="{{ json_encode(compact('lat', 'lng', 'zoom')) }}" data-map-service="{{ json_encode(config('vendor.maps.services.'.$service)) }}" data-map-markers="{{ json_encode($markers ?? []) }}"></div>
+    </div>
+{{--
+    <div class="col-lg-12"></div>
+    <div class="clear-fix"></div>
+
+    <div class="col-lg-12"></div>
+    <div class="clear-fix"></div>
+
+    <iframe class="map" width="800" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key={{ $key ?? '' }}&q={{ $lat }},{{ $lng }}&center={{ $lat }},{{ $lng }}&zoom={{ $zoom }}" scrolling="no">
+    </iframe>
+
+    <div class="col-lg-12"></div>
+    <div class="clear-fix"></div>
+
+    <div class="map-container fade in">
+        <iframe class="map" width="800" height="800" frameborder="0" style="border:0" src="https://www.bing.com/maps/embed?h=800&w=800&cp={{ $lat }}~{{ $lng }}&lvl={{ $zoom }}&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no">
+        </iframe>
+    </div>
+    --}}
+@endif

support/laravel-maps/resources/views/scripts.blade.php

@@ -0,0 +1,24 @@
+@if ($enabled)
+    {{--TODO: If overriding service via @map() then service is not working--}}
+    @if ($service == 'osm' || $service == 'bing' || $service == 'mapquest')
+        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="" type="text/javascript"></script>
+        {{-- TODO check if bing needs polyfill: https://github.com/digidem/leaflet-bing-layer--}}
+    @endif
+    <script src="{{ asset(mix('js/index.js', 'vendor/maps')) }}" type="text/javascript"></script>
+    @if ($service == 'mapkit')
+        <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js" type="text/javascript"></script>
+    @endif
+    @if ($service == 'mapquest')
+        <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.js" type="text/javascript"></script>
+    @endif
+    @if ($service == 'yandex')
+        @if (!empty($key = config('vendor.maps.services.yandex.key')))
+            <script src="https://enterprise.api-maps.yandex.ru/2.1/?lang=en_US&apikey={{ $key }}&onload=onYandexMapsReady" type="text/javascript" async defer></script>
+        @else
+            <script src="https://api-maps.yandex.ru/2.1/?lang=en_US&onload=onYandexMapsReady" type="text/javascript" async defer></script>
+        @endif
+    @endif
+    @if ($service == 'google')
+        <script src="https://maps-api-ssl.google.com/maps/api/js?v=3&ie=UTF8&oe=UTF8&key={{ config('vendor.maps.services.google.key') }}&language={{ app()->getLocale() }}&callback=onGoogleMapsReady" type="text/javascript" async defer></script>
+    @endif
+@endif

support/laravel-maps/resources/views/styles.blade.php

@@ -0,0 +1,9 @@
+@if ($enabled)
+    @if ($service == 'osm' || $service == 'bing' || $service == 'mapquest')
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" type="text/css">
+    @endif
+    @if ($service == 'mapquest')
+        <link rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest-core.css" type="text/css">
+    @endif
+    <link rel="stylesheet" href="{{ asset(mix('css/index.css', 'vendor/maps')) }}" type="text/css">
+@endif