wip

resources/js/index.js

@@ -1,41 +1,57 @@
-import google from './types/google';
-import osm from './types/osm';
-import bing from './types/bing';
-import mapkit from './types/mapkit';
+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} from './utils/helper';
+import {isDefined, logError} from './utils/helper';
 
 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;
+  }
 
   mapData.markers.forEach(markerData => {
-    if (!isDefined(map)) {
-      return;
-    }
     createMarker(map, markerData);
   })
 };
 
-const createMapType = map => {
-  const createMapType = element => createMap(
+const createMapService = service => {
+  const createMapService = element => createMap(
     element,
-    map.createMap,
-    map.createMarker,
+    service.createMap,
+    service.createMarker,
   );
-  const selector = `[data-map-type="${map.type}"]`;
+  const selector = `[data-map-${service.NAME}]`;
   const elements = document.querySelectorAll(selector) || [];
-  elements.forEach(createMapType);
+  elements.forEach(createMapService);
 };
 
-window.onGoogleMapsReady = () => createMapType(google);
+window.onGoogleMapsReady = () => createMapService(google);
 
-(() => createMapType(osm))();
+window.onYandexMapsReady = () => createMapService(yandex);
+
+window.addEventListener('DOMContentLoaded', () => {
+  (() => createMapService(osm))();
+
+  (() => createMapService(bing))();
+
+  (() => createMapService(mapquest))();
+
+  (() => createMapService(mapkit))();
+});
 
-(() => createMapType(bing))();
 
-(() => createMapType(mapkit))();

resources/js/services/bing.js

@@ -1,15 +1,16 @@
-import {fadeElementIn, isDefined, openLink} from '../utils/helper';
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
 import 'leaflet-bing-layer';
 
 // TODO: locales/culture
 
 export default {
-  type: 'bing',
+  NAME: 'bing',
   createMap(element, mapData) {
     if (!isDefined(window.L)) {
+      logError('leaflet is undefined');
       return;
     }
-    const {lat, lng, zoom, key} = mapData;
+    const {lat, lng, zoom, service} = mapData;
 
     const map = window.L
       .map(element, {})
@@ -18,11 +19,9 @@ export default {
       })
       .setView([lat, lng], zoom);
 
-    console.log(key);
-
     window.L.tileLayer
       .bing({
-        bingMapsKey: key,
+        bingMapsKey: service.key,
         imagerySet: 'CanvasLight',
       })
       .addTo(map);
@@ -30,16 +29,21 @@ export default {
     return map;
   },
   createMarker(map, markerData) {
-    const {lat, lng, url} = markerData;
+    const {title, lat, lng, url} = markerData;
 
-    const marker = window.L
-      .marker([lat, lng])
-      .addTo(map);
+    const marker = window.L.marker([lat, lng], {
+      title,
+      keyboard: false,
+      draggable: false,
+    });
 
     if (url) {
-      marker.addEventListener('click', () => {
-        openLink(url);
+      marker.on('click', event => {
+        event.originalEvent.preventDefault();
+        openUrl(url);
       });
     }
+
+    marker.addTo(map);
   },
 }

resources/js/services/google.js

@@ -1,21 +1,23 @@
-import {fadeElementIn, isDefined, openLink} from '../utils/helper';
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
 
 export default {
-  type: 'google',
+  NAME: 'google',
   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} = mapData;
+    const {lat, lng, zoom, service} = mapData;
 
     const map = new window.google.maps.Map(element, {
       center: new window.google.maps.LatLng(lat, lng),
-      zoom: zoom,
-      mapTypeId: window.google.maps.MapTypeId.ROADMAP,
+      zoom,
+      mapTypeId: service.type || window.google.maps.MapTypeId.ROADMAP,
     });
 
     window.google.maps.event.addListenerOnce(map, 'idle', () => {
@@ -25,12 +27,12 @@ export default {
     return map;
   },
   createMarker(map, markerData) {
-    const {lat, lng, url} = markerData;
+    const {title, lat, lng, url} = markerData;
 
     const marker = new window.google.maps.Marker({
       position: new window.google.maps.LatLng(lat, lng),
-      map: map,
-      title: 'Test Title', // TODO
+      map,
+      title,
       draggable: false,
       // icon: {
       //   url: markerConfig.mapMarkerImg,
@@ -39,7 +41,7 @@ export default {
 
     if (url) {
       marker.addListener('click', () => {
-        openLink(url);
+        openUrl(url);
       });
     }
   },

resources/js/services/mapkit.js

@@ -1,12 +1,13 @@
-import {fadeElementIn, isDefined} from '../utils/helper';
+import {fadeElementIn, isDefined, logError} from '../utils/helper';
 
 export default {
-  type: 'mapkit',
+  NAME: 'mapkit',
   createMap(element, mapData) {
     if (!isDefined(window.mapkit)) {
+      logError('mapkit is undefined');
       return;
     }
-    const {lat, lng, zoom, key} = mapData;
+    const {lat, lng, zoom, service} = mapData;
 
     window.mapkit.init({
       authorizationCallback(done) {
@@ -18,7 +19,7 @@ export default {
              });
              xhr.send();
              */
-        done(key);
+        done(service.key);
       },
     });
     window.mapkit.addEventListener('configuration-change', event => {
@@ -27,7 +28,9 @@ export default {
       }
     });
 
-    const map = new window.mapkit.Map(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(
@@ -38,11 +41,11 @@ export default {
     return map;
   },
   createMarker(map, markerData) {
-    const {lat, lng, url} = markerData;
+    const {title, lat, lng, url} = markerData;
 
     const coordinate = new window.mapkit.Coordinate(lat, lng);
     const marker = new window.mapkit.MarkerAnnotation(coordinate, {
-      title: 'Test title',
+      title,
     });
 
     map.showItems([marker]); // TODO: map auto resize bugging if multiple markers

resources/js/services/mapquest.js

@@ -0,0 +1,55 @@
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
+
+// 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/
+
+export default {
+  NAME: 'mapquest',
+  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(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);
+  },
+}

resources/js/services/osm.js

@@ -1,4 +1,4 @@
-import {fadeElementIn, isDefined, openLink} from '../utils/helper';
+import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
 
 // TODO maybe add this https://github.com/elmarquis/Leaflet.GestureHandling/
 
@@ -8,12 +8,13 @@ import {fadeElementIn, isDefined, openLink} from '../utils/helper';
 // TODO custom icons: https://leafletjs.com/examples/custom-icons/
 
 export default {
-  type: 'osm',
+  NAME: 'osm',
   createMap(element, mapData) {
     if (!isDefined(window.L)) {
+      logError('leaflet is undefined');
       return;
     }
-    const {lat, lng, zoom} = mapData;
+    const {lat, lng, zoom, service} = mapData;
 
     const map = window.L
       .map(element, {})
@@ -23,7 +24,7 @@ export default {
       .setView([lat, lng], zoom);
 
     window.L
-      .tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      .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);
@@ -31,16 +32,21 @@ export default {
     return map;
   },
   createMarker(map, markerData) {
-    const {lat, lng, url} = markerData;
+    const {title, lat, lng, url} = markerData;
 
-    const marker = window.L
-      .marker([lat, lng])
-      .addTo(map);
+    const marker = window.L.marker([lat, lng], {
+      title,
+      keyboard: false,
+      draggable: false,
+    });
 
     if (url) {
-      marker.addEventListener('click', () => {
-        openLink(url);
+      marker.on('click', event => {
+        event.originalEvent.preventDefault();
+        openUrl(url);
       });
     }
+
+    marker.addTo(map);
   },
 }

resources/js/services/yandex.js

@@ -0,0 +1,38 @@
+import {isDefined, logError} from '../utils/helper';
+
+export default {
+  NAME: 'yandex',
+  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(map, markerData) {
+    const {title, lat, lng, url} = markerData;
+
+    const marker = new window.ymaps.Placemark([lat, lng], {
+      hintContent: title,
+    });
+
+    // if (url) {
+    //   marker.addListener('click', () => {
+    //     openUrl(url);
+    //   });
+    // }
+
+    map.geoObjects.add(marker);
+  },
+};

resources/js/utils/helper.js

@@ -1,5 +1,11 @@
 export const isDefined = object => typeof object !== 'undefined';
 
-export const fadeElementIn = element => element.closest('.fade').classList.add('in');
+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 openLink = url => window.open(url, '_blank');
+export const openUrl = url => window.open(url, '_blank');
+
+export const logError = error => isDefined(console) && console.error('[laravel-maps] error:', error);

resources/js/utils/parser.js

@@ -1,29 +1,57 @@
-const parseMarker = marker => {
-  const lat = parseFloat(marker.lat);
-  const lng = parseFloat(marker.lng);
-  const url = marker.url;
+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 {
-    lat,
-    lng,
-    url,
-  };
+    key,
+    type,
+  }
+};
+
+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} = marker;
+
+    return {
+      title,
+      lat,
+      lng,
+      url,
+    };
+  });
 };
 
 export default {
   map(element) {
-    const lat = parseFloat(element.dataset.mapLat);
-    const lng = parseFloat(element.dataset.mapLng);
-    const zoom = parseInt(element.dataset.mapZoom);
-    const key = element.dataset.mapKey;
-    const markers = (JSON.parse(element.dataset.mapMarkers) || []).map(parseMarker);
-
-    return {
-      lat,
-      lng,
-      zoom,
-      key,
-      markers,
-    };
+    try {
+      const map = parseMap(element);
+      const lat = parseFloat(map.lat);
+      const lng = parseFloat(map.lng);
+      const zoom = parseInt(map.zoom);
+      const service = parseService(element);
+      const markers = parseMarkers(element);
+      return {
+        lat,
+        lng,
+        zoom,
+        service,
+        markers,
+      };
+    } catch (e) {
+      logError(e);
+    }
   },
 }