consultoria-as/gonoware-laravel-maps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Emanuel Mutschlechner
2018-08-30 13:58:13 +02:00
parent 5247eb66bc
commit 206beb1655
24 changed files with 506 additions and 14353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
resources/js/index.js vendored
View File

@@ -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))();

28
resources/js/types/bing.js → resources/js/services/bing.js vendored
View File

@@ -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);
},
}

20
resources/js/types/google.js → resources/js/services/google.js vendored
View File

@@ -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);
});
}
},

17
resources/js/types/mapkit.js → resources/js/services/mapkit.js vendored
View File

@@ -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

55
resources/js/services/mapquest.js vendored Normal file
View File

@@ -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);
},
}

26
resources/js/types/osm.js → resources/js/services/osm.js vendored
View File

@@ -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);
},
}

38
resources/js/services/yandex.js vendored Normal file
View File

@@ -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);
},
};

14109
resources/js/types/asd.js vendored
View File

File diff suppressed because one or more lines are too long

10
resources/js/utils/helper.js vendored
View File

@@ -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);

70
resources/js/utils/parser.js vendored
View File

@@ -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);
}
},
}

47
resources/sass/index.scss vendored
View File

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

4
resources/views/index.blade.php
View File

@@ -1,6 +1,6 @@
@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 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>

28
resources/views/scripts.blade.php
View File

@@ -1,16 +1,24 @@
@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: If overriding service via @map() then service is not working--}}
@if ($service == 'osm' || $service == 'bing' || $service == 'mapquest')
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin="" type="text/javascript"></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>
@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

9
resources/views/styles.blade.php
View File

@@ -1,8 +1,9 @@
@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=""/>
@if ($service == 'osm' || $service == 'bing' || $service == 'mapquest')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" 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