'wip'

resources/js/index.js

@@ -0,0 +1,41 @@
+import google from './types/google';
+import osm from './types/osm';
+import bing from './types/bing';
+import mapkit from './types/mapkit';
+
+import parser from './utils/parser';
+import {isDefined} from './utils/helper';
+
+const createMap = (element, createMap, createMarker) => {
+  if (!isDefined(element)) {
+    return;
+  }
+  const mapData = parser.map(element);
+  const map = createMap(element, mapData);
+
+  mapData.markers.forEach(markerData => {
+    if (!isDefined(map)) {
+      return;
+    }
+    createMarker(map, markerData);
+  })
+};
+
+const createMapType = map => {
+  const createMapType = element => createMap(
+    element,
+    map.createMap,
+    map.createMarker,
+  );
+  const selector = `[data-map-type="${map.type}"]`;
+  const elements = document.querySelectorAll(selector) || [];
+  elements.forEach(createMapType);
+};
+
+window.onGoogleMapsReady = () => createMapType(google);
+
+(() => createMapType(osm))();
+
+(() => createMapType(bing))();
+
+(() => createMapType(mapkit))();

resources/js/types/bing.js

@@ -0,0 +1,45 @@
+import {fadeElementIn, isDefined, openLink} from '../utils/helper';
+import 'leaflet-bing-layer';
+
+// TODO: locales/culture
+
+export default {
+  type: 'bing',
+  createMap(element, mapData) {
+    if (!isDefined(window.L)) {
+      return;
+    }
+    const {lat, lng, zoom, key} = mapData;
+
+    const map = window.L
+      .map(element, {})
+      .on('load', () => {
+        fadeElementIn(element);
+      })
+      .setView([lat, lng], zoom);
+
+    console.log(key);
+
+    window.L.tileLayer
+      .bing({
+        bingMapsKey: key,
+        imagerySet: 'CanvasLight',
+      })
+      .addTo(map);
+
+    return map;
+  },
+  createMarker(map, markerData) {
+    const {lat, lng, url} = markerData;
+
+    const marker = window.L
+      .marker([lat, lng])
+      .addTo(map);
+
+    if (url) {
+      marker.addEventListener('click', () => {
+        openLink(url);
+      });
+    }
+  },
+}

resources/js/types/google.js

@@ -0,0 +1,46 @@
+import {fadeElementIn, isDefined, openLink} from '../utils/helper';
+
+export default {
+  type: 'google',
+  createMap(element, mapData) {
+    if (!isDefined(window.google)) {
+      return;
+    }
+    if (!isDefined(window.google.maps)) {
+      return;
+    }
+
+    const {lat, lng, zoom} = 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,
+    });
+
+    window.google.maps.event.addListenerOnce(map, 'idle', () => {
+      fadeElementIn(element);
+    });
+
+    return map;
+  },
+  createMarker(map, markerData) {
+    const {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
+      draggable: false,
+      // icon: {
+      //   url: markerConfig.mapMarkerImg,
+      // },
+    });
+
+    if (url) {
+      marker.addListener('click', () => {
+        openLink(url);
+      });
+    }
+  },
+};

resources/js/types/mapkit.js

@@ -0,0 +1,50 @@
+import {fadeElementIn, isDefined} from '../utils/helper';
+
+export default {
+  type: 'mapkit',
+  createMap(element, mapData) {
+    if (!isDefined(window.mapkit)) {
+      return;
+    }
+    const {lat, lng, zoom, key} = mapData;
+
+    window.mapkit.init({
+      authorizationCallback(done) {
+        /*
+             const xhr = new XMLHttpRequest();
+             xhr.open('GET', '/services/jwt');
+             xhr.addEventListener('load', function() {
+               done(this.responseText);
+             });
+             xhr.send();
+             */
+        done(key);
+      },
+    });
+    window.mapkit.addEventListener('configuration-change', event => {
+      if (event.status === 'Initialized') {
+        fadeElementIn(element);
+      }
+    });
+
+    const map = new window.mapkit.Map(element);
+
+    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(map, markerData) {
+    const {lat, lng, url} = markerData;
+
+    const coordinate = new window.mapkit.Coordinate(lat, lng);
+    const marker = new window.mapkit.MarkerAnnotation(coordinate, {
+      title: 'Test title',
+    });
+
+    map.showItems([marker]); // TODO: map auto resize bugging if multiple markers
+  },
+};

resources/js/types/osm.js

@@ -0,0 +1,46 @@
+import {fadeElementIn, isDefined, openLink} 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 {
+  type: 'osm',
+  createMap(element, mapData) {
+    if (!isDefined(window.L)) {
+      return;
+    }
+    const {lat, lng, zoom} = mapData;
+
+    const map = window.L
+      .map(element, {})
+      .on('load', () => {
+        fadeElementIn(element);
+      })
+      .setView([lat, lng], zoom);
+
+    window.L
+      .tileLayer('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(map, markerData) {
+    const {lat, lng, url} = markerData;
+
+    const marker = window.L
+      .marker([lat, lng])
+      .addTo(map);
+
+    if (url) {
+      marker.addEventListener('click', () => {
+        openLink(url);
+      });
+    }
+  },
+}

resources/js/utils/helper.js

@@ -0,0 +1,5 @@
+export const isDefined = object => typeof object !== 'undefined';
+
+export const fadeElementIn = element => element.closest('.fade').classList.add('in');
+
+export const openLink = url => window.open(url, '_blank');

resources/js/utils/parser.js

@@ -0,0 +1,29 @@
+const parseMarker = marker => {
+  const lat = parseFloat(marker.lat);
+  const lng = parseFloat(marker.lng);
+  const url = marker.url;
+
+  return {
+    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,
+    };
+  },
+}