2021-08-18 20:51:15 +02:00
|
|
|
|
"use strict";
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
import $ from "jquery";
|
2020-12-24 23:42:33 +01:00
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
import MarkerClusterer from "@googlemaps/markerclustererplus";
|
2021-01-25 11:10:03 +01:00
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
import Events from "../../_events";
|
|
|
|
|
import MarkerUI from "./_map.google.marker";
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
2020-03-19 18:19:58 +01:00
|
|
|
|
const GoogleMapsDriver = (($) => {
|
2019-12-10 12:13:25 +01:00
|
|
|
|
class GoogleMapsDriver {
|
|
|
|
|
getName() {
|
2021-08-18 20:51:15 +02:00
|
|
|
|
return "GoogleMapsDriver";
|
2019-12-10 12:13:25 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
init($el, config = []) {
|
|
|
|
|
const ui = this;
|
|
|
|
|
const W = window;
|
|
|
|
|
|
|
|
|
|
ui.$el = $el;
|
|
|
|
|
ui.config = config;
|
2019-12-17 18:05:46 +01:00
|
|
|
|
ui.markers = [];
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
|
|
|
|
W[`init${ui.getName()}`] = () => {
|
|
|
|
|
ui.googleApiLoaded();
|
|
|
|
|
};
|
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
$("body").append(
|
2020-01-29 11:26:07 +01:00
|
|
|
|
`<script async defer src="https://maps.googleapis.com/maps/api/js?key=${
|
2021-08-18 20:51:15 +02:00
|
|
|
|
config["key"]
|
|
|
|
|
}&callback=init${ui.getName()}"></script>`
|
2020-01-29 11:26:07 +01:00
|
|
|
|
);
|
2019-12-10 12:13:25 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
googleApiLoaded() {
|
|
|
|
|
const ui = this;
|
2019-12-17 18:05:46 +01:00
|
|
|
|
|
2019-12-10 12:13:25 +01:00
|
|
|
|
const $el = ui.$el;
|
|
|
|
|
const config = ui.config;
|
2021-08-18 20:51:15 +02:00
|
|
|
|
const $mapDiv = $el.find(".mapAPI-map");
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
const zoom = config["mapZoom"] ? config["mapZoom"] : 10;
|
|
|
|
|
const center = config["center"]
|
2020-01-29 11:26:07 +01:00
|
|
|
|
? {
|
2021-08-18 20:51:15 +02:00
|
|
|
|
lat: config["center"][1],
|
|
|
|
|
lng: config["center"][0],
|
2020-03-19 18:19:58 +01:00
|
|
|
|
}
|
2020-01-29 11:26:07 +01:00
|
|
|
|
: {
|
2020-03-19 18:19:58 +01:00
|
|
|
|
lat: 0,
|
|
|
|
|
lng: 0,
|
|
|
|
|
};
|
2021-08-18 20:51:15 +02:00
|
|
|
|
const style = config["style"] ? config["style"] : null;
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
2019-12-10 18:41:24 +01:00
|
|
|
|
console.log(`${ui.getName()}: API is loaded`);
|
2019-12-10 12:13:25 +01:00
|
|
|
|
// init fontawesome icons
|
|
|
|
|
ui.MarkerUI = MarkerUI.init($);
|
|
|
|
|
|
|
|
|
|
ui.map = new google.maps.Map($mapDiv[0], {
|
2019-12-10 18:41:24 +01:00
|
|
|
|
zoom,
|
|
|
|
|
center,
|
2020-01-29 11:26:07 +01:00
|
|
|
|
fullscreenControl: true,
|
|
|
|
|
styles: style,
|
2019-12-10 12:13:25 +01:00
|
|
|
|
});
|
2019-12-10 18:41:24 +01:00
|
|
|
|
|
|
|
|
|
ui.default_zoom = zoom;
|
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
$mapDiv.addClass("mapboxgl-map");
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
|
|
|
|
ui.popup = new ui.MarkerUI({
|
2020-01-29 11:26:07 +01:00
|
|
|
|
map: ui.map,
|
2021-08-18 20:51:15 +02:00
|
|
|
|
align: ["center", "top"],
|
|
|
|
|
divClass: "mapboxgl-popup popup mapboxgl-popup-anchor-bottom d-none",
|
2020-01-29 11:26:07 +01:00
|
|
|
|
html:
|
|
|
|
|
'<div class="mapboxgl-popup-tip"></div><div class="mapboxgl-popup-content">' +
|
2019-12-10 12:13:25 +01:00
|
|
|
|
'<div class="mapboxgl-popup-close-button" type="button" aria-label="Close popup">×</div>' +
|
|
|
|
|
'<div class="html"></div>' +
|
2021-08-18 20:51:15 +02:00
|
|
|
|
"</div>",
|
2019-12-10 12:13:25 +01:00
|
|
|
|
});
|
2021-01-25 11:10:03 +01:00
|
|
|
|
ui.popup.setMap(ui.map);
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
2019-12-17 18:05:46 +01:00
|
|
|
|
ui.geocoder = new google.maps.Geocoder();
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
2021-01-25 11:10:03 +01:00
|
|
|
|
ui.cluster = new MarkerClusterer(ui.map, null, {
|
2021-08-18 20:51:15 +02:00
|
|
|
|
styles: [
|
|
|
|
|
{
|
|
|
|
|
width: 30,
|
|
|
|
|
height: 30,
|
|
|
|
|
className: "mapboxgl-cluster",
|
|
|
|
|
},
|
|
|
|
|
],
|
2021-01-25 11:10:03 +01:00
|
|
|
|
});
|
|
|
|
|
|
2020-01-29 11:26:07 +01:00
|
|
|
|
$el.trigger(Events.MAPAPILOADED);
|
2019-12-10 12:13:25 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
addMarker(crds, config) {
|
|
|
|
|
const ui = this;
|
2019-12-17 18:05:46 +01:00
|
|
|
|
|
2019-12-10 12:13:25 +01:00
|
|
|
|
const pos = {
|
|
|
|
|
lat: crds[1],
|
2019-12-10 14:23:32 +01:00
|
|
|
|
lng: crds[0],
|
2019-12-10 12:13:25 +01:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const marker = new ui.MarkerUI({
|
2020-01-29 11:26:07 +01:00
|
|
|
|
position: pos,
|
|
|
|
|
map: ui.map,
|
2021-08-18 20:51:15 +02:00
|
|
|
|
align: ["center", "top"],
|
|
|
|
|
html: `<div class="mapboxgl-marker"><div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div></div>`,
|
2020-01-29 11:26:07 +01:00
|
|
|
|
onClick: () => {
|
2021-08-18 20:51:15 +02:00
|
|
|
|
const $el = $(`#Marker${config["id"]}`);
|
|
|
|
|
ui.showPopup(pos, config["content"]);
|
2019-12-10 18:41:24 +01:00
|
|
|
|
|
|
|
|
|
$el.trigger(Events.MAPMARKERCLICK);
|
2019-12-10 14:23:32 +01:00
|
|
|
|
},
|
2019-12-10 12:13:25 +01:00
|
|
|
|
});
|
|
|
|
|
|
2019-12-17 18:05:46 +01:00
|
|
|
|
ui.markers.push(marker);
|
|
|
|
|
|
2021-01-25 11:10:03 +01:00
|
|
|
|
ui.cluster.addMarker(marker);
|
|
|
|
|
|
2019-12-10 12:13:25 +01:00
|
|
|
|
return marker;
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-10 18:41:24 +01:00
|
|
|
|
showPopup(pos, content) {
|
|
|
|
|
const ui = this;
|
|
|
|
|
const $popup = $(ui.popup.getDiv());
|
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
if (ui.config["flyToMarker"]) {
|
2019-12-10 18:41:24 +01:00
|
|
|
|
ui.map.setCenter(pos); // panTo
|
2021-08-18 20:51:15 +02:00
|
|
|
|
if (!ui.config["noZoom"]) {
|
2020-02-17 21:20:18 +01:00
|
|
|
|
ui.map.setZoom(18);
|
|
|
|
|
}
|
2019-12-10 18:41:24 +01:00
|
|
|
|
}
|
|
|
|
|
|
2020-01-31 16:47:21 +01:00
|
|
|
|
// keep it hidden to render content
|
2019-12-10 18:41:24 +01:00
|
|
|
|
$popup.css({
|
2021-08-18 20:51:15 +02:00
|
|
|
|
opacity: "0",
|
2019-12-10 18:41:24 +01:00
|
|
|
|
});
|
2021-08-18 20:51:15 +02:00
|
|
|
|
$popup.removeClass("d-none");
|
2019-12-10 18:41:24 +01:00
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
$popup.find(".mapboxgl-popup-content .html").html(content);
|
2019-12-10 18:41:24 +01:00
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
$popup.find(".mapboxgl-popup-close-button").on("click", (e) => {
|
2019-12-10 18:41:24 +01:00
|
|
|
|
e.preventDefault();
|
|
|
|
|
ui.hidePopup();
|
|
|
|
|
});
|
|
|
|
|
|
2020-01-31 16:47:21 +01:00
|
|
|
|
// set position when content was rendered
|
2021-08-18 20:51:15 +02:00
|
|
|
|
ui.popup.setPosition(pos, ["center", "top"]);
|
2020-01-31 16:47:21 +01:00
|
|
|
|
|
|
|
|
|
// display popup
|
2019-12-10 18:41:24 +01:00
|
|
|
|
$popup.css({
|
2021-08-18 20:51:15 +02:00
|
|
|
|
"margin-top": "-1rem",
|
|
|
|
|
opacity: "1",
|
2019-12-10 18:41:24 +01:00
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
hidePopup() {
|
|
|
|
|
const ui = this;
|
|
|
|
|
const $popup = $(ui.popup.getDiv());
|
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
$popup.addClass("d-none");
|
|
|
|
|
if (!ui.config["noRestoreBounds"] || ui.config["flyToBounds"]) {
|
2020-02-17 18:38:23 +01:00
|
|
|
|
ui.restoreBounds();
|
|
|
|
|
}
|
2019-12-10 18:41:24 +01:00
|
|
|
|
|
|
|
|
|
ui.$el.trigger(Events.MAPPOPUPCLOSE);
|
|
|
|
|
}
|
|
|
|
|
|
2019-12-17 18:05:46 +01:00
|
|
|
|
geocode(addr, callback) {
|
|
|
|
|
const ui = this;
|
|
|
|
|
|
2020-01-29 11:26:07 +01:00
|
|
|
|
ui.geocoder.geocode(
|
|
|
|
|
{
|
|
|
|
|
address: addr,
|
|
|
|
|
},
|
|
|
|
|
(results, status) => {
|
2021-08-18 20:51:15 +02:00
|
|
|
|
if (status === "OK") {
|
2020-01-29 11:26:07 +01:00
|
|
|
|
//results[0].geometry.location;
|
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
if (typeof callback === "function") {
|
2020-01-29 11:26:07 +01:00
|
|
|
|
callback(results);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return results;
|
|
|
|
|
} else {
|
|
|
|
|
console.error(
|
2021-08-18 20:51:15 +02:00
|
|
|
|
`${ui.getName()}: Geocode was not successful for the following reason: ${status}`
|
2020-01-29 11:26:07 +01:00
|
|
|
|
);
|
2019-12-17 18:05:46 +01:00
|
|
|
|
}
|
2021-08-18 20:51:15 +02:00
|
|
|
|
}
|
2020-01-29 11:26:07 +01:00
|
|
|
|
);
|
2019-12-17 18:05:46 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
reverseGeocode(latLng, callback) {
|
|
|
|
|
const ui = this;
|
|
|
|
|
|
2020-01-29 11:26:07 +01:00
|
|
|
|
ui.geocoder.geocode(
|
|
|
|
|
{
|
|
|
|
|
location: latlng,
|
|
|
|
|
},
|
|
|
|
|
(results, status) => {
|
2021-08-18 20:51:15 +02:00
|
|
|
|
if (status === "OK") {
|
2020-01-29 11:26:07 +01:00
|
|
|
|
//results[0].formatted_address;
|
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
if (typeof callback === "function") {
|
2020-01-29 11:26:07 +01:00
|
|
|
|
callback(results);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return results;
|
|
|
|
|
} else {
|
|
|
|
|
console.error(
|
2021-08-18 20:51:15 +02:00
|
|
|
|
`${ui.getName()}: Reverse Geocoding was not successful for the following reason: ${status}`
|
2020-01-29 11:26:07 +01:00
|
|
|
|
);
|
2019-12-17 18:05:46 +01:00
|
|
|
|
}
|
2021-08-18 20:51:15 +02:00
|
|
|
|
}
|
2020-01-29 11:26:07 +01:00
|
|
|
|
);
|
2019-12-17 18:05:46 +01:00
|
|
|
|
}
|
|
|
|
|
|
2019-12-10 12:13:25 +01:00
|
|
|
|
addGeoJson(config) {
|
|
|
|
|
const ui = this;
|
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
|
const firstMarker = config["geojson"].features[0].geometry.coordinates;
|
2019-12-10 12:13:25 +01:00
|
|
|
|
//Map.setCenter(firstMarker);
|
|
|
|
|
const bounds = new google.maps.LatLngBounds();
|
|
|
|
|
|
|
|
|
|
// add markers to map
|
2021-08-18 20:51:15 +02:00
|
|
|
|
config["geojson"].features.forEach((marker) => {
|
2019-12-10 12:13:25 +01:00
|
|
|
|
const id = marker.id;
|
|
|
|
|
const crds = marker.geometry.coordinates;
|
|
|
|
|
const content = marker.properties.content;
|
|
|
|
|
|
|
|
|
|
ui.addMarker(crds, {
|
2019-12-10 14:23:32 +01:00
|
|
|
|
id,
|
|
|
|
|
content,
|
2020-01-29 11:26:07 +01:00
|
|
|
|
icon: marker.icon,
|
2021-08-18 20:51:15 +02:00
|
|
|
|
flyToMarker: config["flyToMarker"],
|
2019-12-10 12:13:25 +01:00
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
bounds.extend({
|
|
|
|
|
lat: crds[1],
|
2019-12-10 14:23:32 +01:00
|
|
|
|
lng: crds[0],
|
2019-12-10 12:13:25 +01:00
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
2020-03-19 17:47:49 +01:00
|
|
|
|
if (ui.markers.length > 1) {
|
|
|
|
|
ui.map.fitBounds(bounds, {
|
|
|
|
|
padding: 30,
|
|
|
|
|
}); //panToBounds
|
2020-03-19 18:19:58 +01:00
|
|
|
|
} else if (ui.markers[0]) {
|
|
|
|
|
ui.map.setCenter(ui.markers[0].getPosition());
|
2020-03-19 17:47:49 +01:00
|
|
|
|
}
|
2019-12-10 12:13:25 +01:00
|
|
|
|
|
2019-12-10 18:41:24 +01:00
|
|
|
|
ui.default_bounds = bounds;
|
|
|
|
|
ui.default_zoom = ui.map.getZoom();
|
2019-12-10 12:13:25 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getMap() {
|
|
|
|
|
const ui = this;
|
|
|
|
|
return ui.map;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getPopup() {
|
|
|
|
|
const ui = this;
|
|
|
|
|
return ui.popup;
|
|
|
|
|
}
|
2019-12-10 18:41:24 +01:00
|
|
|
|
|
|
|
|
|
restoreBounds() {
|
|
|
|
|
const ui = this;
|
|
|
|
|
|
2020-03-19 18:19:58 +01:00
|
|
|
|
if (ui.default_bounds && ui.markers.length > 1) {
|
2019-12-17 18:05:46 +01:00
|
|
|
|
ui.map.fitBounds(ui.default_bounds, {
|
|
|
|
|
padding: 30,
|
|
|
|
|
}); //panToBounds
|
|
|
|
|
} else {
|
|
|
|
|
if (ui.markers[0]) {
|
|
|
|
|
ui.map.setCenter(ui.markers[0].getPosition());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ui.restoreZoom();
|
|
|
|
|
}
|
2019-12-10 18:41:24 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
restoreZoom() {
|
|
|
|
|
const ui = this;
|
|
|
|
|
|
|
|
|
|
ui.map.setZoom(ui.default_zoom);
|
|
|
|
|
}
|
2019-12-10 12:13:25 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return GoogleMapsDriver;
|
|
|
|
|
})($);
|
|
|
|
|
|
|
|
|
|
export default GoogleMapsDriver;
|