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

Add marker popups

Browse Source
This commit is contained in:
Emanuel Mutschlechner
2020-01-06 20:43:43 +01:00
parent d3a34d0326
commit 3a2d2e2368
14 changed files with 485 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/services/bing.js vendored
View File

@@ -2,10 +2,10 @@ import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
import 'leaflet-bing-layer';
import {createMarker} from '../utils/leaflet';
// TODO: locales/culture
const name = 'bing';
export default {
NAME: 'bing',
name,
createMap(element, mapData) {
if (!isDefined(window.L)) {
logError('leaflet is undefined');
@@ -29,5 +29,5 @@ export default {
return map;
},
createMarker,
createMarker: createMarker.bind(null, name),
}

23
resources/js/services/google.js vendored
View File

@@ -1,7 +1,10 @@
import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
import {dispatchEventMarkerClicked} from '../utils/dispatchEvent';
const name = 'google';
export default {
NAME: 'google',
name,
createMap(element, mapData) {
if (!isDefined(window.google)) {
logError('google is undefined');
@@ -26,8 +29,8 @@ export default {
return map;
},
createMarker(map, markerData) {
const {title, lat, lng, url, icon, iconSize, iconAnchor} = markerData;
createMarker(element, map, markerData) {
const {title, lat, lng, url, popup, icon, iconSize, iconAnchor} = markerData;
const markerOptions = {
position: new window.google.maps.LatLng(lat, lng),
@@ -50,11 +53,17 @@ export default {
const marker = new window.google.maps.Marker(markerOptions);
if (url) {
marker.addListener('click', () => {
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;
},

41
resources/js/services/mapkit.js vendored
View File

@@ -1,7 +1,10 @@
import {fadeElementIn, isDefined, logError} from '../utils/helper';
import {fadeElementIn, isDefined, logError, openUrl} from '../utils/helper';
import {dispatchEventMarkerClicked} from "../utils/dispatchEvent";
const name = 'mapkit';
export default {
NAME: 'mapkit',
name,
createMap(element, mapData) {
if (!isDefined(window.mapkit)) {
logError('mapkit is undefined');
@@ -11,14 +14,6 @@ export default {
window.mapkit.init({
authorizationCallback(done) {
/*
const xhr = new XMLHttpRequest();
xhr.open('GET', '/services/jwt');
xhr.addEventListener('load', function() {
done(this.responseText);
});
xhr.send();
*/
done(service.key);
},
});
@@ -40,26 +35,13 @@ export default {
return map;
},
createMarker(map, markerData) {
const {title, lat, lng, url, icon} = markerData;
createMarker(element, map, markerData) {
const {title, lat, lng, url, popup, icon} = markerData;
const coordinate = new window.mapkit.Coordinate(lat, lng);
const markerAnnotationOptions = {title};
if (url) {
markerAnnotationOptions.callout = {
calloutRightAccessoryForAnnotation: function() {
const accessoryViewRight = document.createElement('a');
accessoryViewRight.className = 'right-accessory-view';
accessoryViewRight.href = url;
accessoryViewRight.target = '_blank';
accessoryViewRight.appendChild(document.createTextNode('ⓘ'));
return accessoryViewRight;
}
};
}
if (icon) {
markerAnnotationOptions.glyphImage = {
1: icon,
@@ -68,6 +50,15 @@ export default {
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;

5
resources/js/services/mapquest.js vendored
View File

@@ -7,9 +7,10 @@ import {createMarker} from '../utils/leaflet';
// http://leaflet-extras.github.io/leaflet-providers/preview/
// TODO custom icons: https://leafletjs.com/examples/custom-icons/
const name = 'mapquest';
export default {
NAME: 'mapquest',
name,
createMap(element, mapData) {
if (!isDefined(window.L)) {
logError('leaflet is undefined');
@@ -35,5 +36,5 @@ export default {
return map;
},
createMarker,
createMarker: createMarker.bind(null, name),
}

6
resources/js/services/osm.js vendored
View File

@@ -8,8 +8,10 @@ import {createMarker} from '../utils/leaflet';
// TODO custom icons: https://leafletjs.com/examples/custom-icons/
const name = 'osm';
export default {
NAME: 'osm',
name,
createMap(element, mapData) {
if (!isDefined(window.L)) {
logError('leaflet is undefined');
@@ -32,5 +34,5 @@ export default {
return map;
},
createMarker,
createMarker: createMarker.bind(null, name),
}

28
resources/js/services/yandex.js vendored
View File

@@ -1,7 +1,10 @@
import {isDefined, logError} from '../utils/helper';
import {isDefined, logError, openUrl} from '../utils/helper';
import {dispatchEventMarkerClicked} from '../utils/dispatchEvent';
const name = 'yandex';
export default {
NAME: 'yandex',
name,
createMap(element, mapData) {
if (!isDefined(window.ymaps)) {
logError('ymaps is undefined');
@@ -20,8 +23,8 @@ export default {
return map;
},
createMarker(map, markerData) {
const {title, lat, lng, url, icon, iconSize, iconAnchor} = markerData;
createMarker(element, map, markerData) {
const {title, lat, lng, url, popup, icon, iconSize, iconAnchor} = markerData;
const placemarkProperties = {
hintContent: title,
@@ -40,13 +43,20 @@ export default {
}
}
if (popup) {
placemarkProperties.balloonContentBody = popup;
}
const marker = new window.ymaps.Placemark([lat, lng], placemarkProperties, placemarkOptions);
// if (url) {
// marker.addListener('click', () => {
// openUrl(url);
// });
// }
marker.events.add('click', e => {
dispatchEventMarkerClicked(name, element, map, marker);
if (popup) {
// Handled with ballonContentBody
} else if (url) {
openUrl(url);
}
});
map.geoObjects.add(marker);