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

resources/sass/index.scss

@@ -0,0 +1,27 @@
+.map-container {
+  position: relative;
+  height: 300px;
+  @media (min-width: 992px) {
+    height: 450px;
+  }
+
+  &.fade {
+    opacity: 0;
+    transition: opacity 195ms ease-out;
+    &.in {
+      opacity: 1;
+      transition: opacity 225ms ease-in;
+    }
+  }
+
+  > .map {
+    height: inherit;
+  }
+}
+
+// Fix Mapkit canvas
+.mk-map-view {
+  > .syrup-canvas {
+    margin-left: -50%;
+  }
+}

resources/views/index.blade.php

@@ -0,0 +1,23 @@
+@if ($enabled)
+    <div class="map-container fade">
+        <div class="map" data-map-key="{{ $key }}" data-map-type="{{ $type }}" data-map-lat="{{ $lat }}" data-map-lng="{{ $lng }}" data-map-zoom="{{ $zoom }}" 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

resources/views/scripts.blade.php

@@ -0,0 +1,16 @@
+@if ($enabled)
+    {{--TODO: If overriding type via @map() then type is not working--}}
+    @if ($type == 'osm' || $type == 'bing')
+        <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
+                integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
+                crossorigin="" async defer></script>
+        {{-- TODO check if bing needs polyfill: https://github.com/digidem/leaflet-bing-layer--}}
+    @endif
+    @if ($type == 'mapkit')
+        <script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"  async defer></script>
+    @endif
+    <script src="{{ asset(mix('js/index.js', 'vendor/maps')) }}" type="text/javascript"></script>
+    @if($type == 'google')
+        <script src="https://maps-api-ssl.google.com/maps/api/js?v=3&ie=UTF8&oe=UTF8&key={{ $key }}&language={{ app()->getLocale() }}&callback=onGoogleMapsReady" async defer></script>
+    @endif
+@endif

resources/views/styles.blade.php

@@ -0,0 +1,8 @@
+@if ($enabled)
+    @if($type == 'osm' || $type == 'bing')
+        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
+              integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+              crossorigin=""/>
+    @endif
+    <link rel="stylesheet" href="{{ asset(mix('css/index.css', 'vendor/maps')) }}" type="text/css">
+@endif