2021-08-18 20:51:15 +02:00
|
|
|
"use strict";
|
2021-08-09 18:04:09 +02:00
|
|
|
|
2021-08-09 18:22:37 +02:00
|
|
|
//import $ from 'jquery';
|
2021-08-18 20:51:15 +02:00
|
|
|
import mapBoxGL from "mapbox-gl";
|
2021-08-09 18:04:09 +02:00
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
import Events from "../../_events";
|
2021-08-09 18:04:09 +02:00
|
|
|
|
|
|
|
const MapBoxDriver = (($) => {
|
|
|
|
class MapBoxDriver {
|
|
|
|
getName() {
|
2021-08-18 20:51:15 +02:00
|
|
|
return "MapBoxDriver";
|
2021-08-09 18:04:09 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
init($el, config = []) {
|
|
|
|
const ui = this;
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
mapBoxGL.accessToken = config["key"];
|
2021-08-09 18:04:09 +02:00
|
|
|
|
|
|
|
ui.map = new mapBoxGL.Map({
|
2021-08-18 20:51:15 +02:00
|
|
|
container: $el.find(".mapAPI-map")[0],
|
|
|
|
center: config["center"] ? config["center"] : [0, 0],
|
2021-08-09 18:04:09 +02:00
|
|
|
//hash: true,
|
2021-08-18 20:51:15 +02:00
|
|
|
style: config["style"]
|
|
|
|
? config["style"]
|
|
|
|
: "mapbox://styles/mapbox/streets-v9",
|
|
|
|
localIdeographFontFamily: config["font-family"],
|
|
|
|
zoom: config["mapZoom"] ? config["mapZoom"] : 10,
|
2021-08-09 18:04:09 +02:00
|
|
|
attributionControl: false,
|
|
|
|
antialias: true,
|
2021-08-18 20:51:15 +02:00
|
|
|
accessToken: config["key"],
|
2021-08-09 18:04:09 +02:00
|
|
|
})
|
|
|
|
.addControl(
|
|
|
|
new mapBoxGL.AttributionControl({
|
|
|
|
compact: true,
|
2021-08-18 20:51:15 +02:00
|
|
|
})
|
2021-08-09 18:04:09 +02:00
|
|
|
)
|
2021-08-18 20:51:15 +02:00
|
|
|
.addControl(new mapBoxGL.NavigationControl(), "top-right")
|
2021-08-09 18:04:09 +02:00
|
|
|
.addControl(
|
|
|
|
new mapBoxGL.GeolocateControl({
|
|
|
|
positionOptions: {
|
|
|
|
enableHighAccuracy: true,
|
|
|
|
},
|
|
|
|
trackUserLocation: true,
|
|
|
|
}),
|
2021-08-18 20:51:15 +02:00
|
|
|
"bottom-right"
|
2021-08-09 18:04:09 +02:00
|
|
|
)
|
|
|
|
.addControl(
|
|
|
|
new mapBoxGL.ScaleControl({
|
|
|
|
maxWidth: 80,
|
2021-08-18 20:51:15 +02:00
|
|
|
unit: "metric",
|
2021-08-09 18:04:09 +02:00
|
|
|
}),
|
2021-08-18 20:51:15 +02:00
|
|
|
"top-left"
|
2021-08-09 18:04:09 +02:00
|
|
|
)
|
|
|
|
.addControl(new mapBoxGL.FullscreenControl());
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
ui.map.on("load", (e) => {
|
2021-08-09 18:04:09 +02:00
|
|
|
$el.trigger(Events.MAPAPILOADED);
|
|
|
|
});
|
|
|
|
|
|
|
|
ui.popup = new mapBoxGL.Popup({
|
|
|
|
closeOnClick: false,
|
2021-08-18 20:51:15 +02:00
|
|
|
className: "popup",
|
2021-08-09 18:04:09 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
addMarker(crds, config) {
|
|
|
|
const ui = this;
|
|
|
|
|
|
|
|
// create a DOM el for the marker
|
|
|
|
const $el = $(
|
2021-08-18 20:51:15 +02:00
|
|
|
`<div id="Marker${config["id"]}" data-id="${config["id"]}" class="marker">${config["icon"]}</div>`
|
2021-08-09 18:04:09 +02:00
|
|
|
);
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
$el.on("click", (e) => {
|
|
|
|
ui.popup.setLngLat(crds).setHTML(config["content"]).addTo(ui.map);
|
2021-08-09 18:04:09 +02:00
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
if (config["flyToMarker"]) {
|
2021-08-09 18:04:09 +02:00
|
|
|
ui.map.flyTo({
|
|
|
|
center: crds,
|
|
|
|
zoom: 17,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$(e.currentTarget).trigger(Events.MAPMARKERCLICK);
|
|
|
|
});
|
|
|
|
|
|
|
|
// add marker to map
|
|
|
|
const marker = new mapBoxGL.Marker($el[0]).setLngLat(crds).addTo(ui.map);
|
|
|
|
|
|
|
|
return marker;
|
|
|
|
}
|
|
|
|
|
|
|
|
addGeoJson(config) {
|
|
|
|
const ui = this;
|
|
|
|
// Insert the layer beneath any symbol layer.
|
|
|
|
/*if (config['3d']) {
|
2021-08-09 18:22:37 +02:00
|
|
|
const layers = Map.getStyle().layers;
|
|
|
|
let labelLayerId;
|
|
|
|
for (let i = 0; i < layers.length; i++) {
|
|
|
|
if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
|
|
|
|
labelLayerId = layers[i].id;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
Map.addLayer({
|
|
|
|
'id': '3d-buildings',
|
|
|
|
'source': 'composite',
|
|
|
|
'source-layer': 'building',
|
|
|
|
'filter': ['==', 'extrude', 'true'],
|
|
|
|
'type': 'fill-extrusion',flyToBounds
|
|
|
|
'minzoom': 15,
|
|
|
|
'paint': {
|
|
|
|
'fill-extrusion-color': '#aaa',
|
|
|
|
|
|
|
|
// use an 'interpolate' expression to add a smooth transition effect to the
|
|
|
|
// buildings as the user zooms in
|
|
|
|
'fill-extrusion-height': [
|
|
|
|
"interpolate", ["linear"],
|
|
|
|
["zoom"],
|
|
|
|
15, 0,
|
|
|
|
15.05, ["get", "height"],
|
|
|
|
],
|
|
|
|
'fill-extrusion-base': [
|
|
|
|
"interpolate", ["linear"],
|
|
|
|
["zoom"],
|
|
|
|
15, 0,
|
|
|
|
15.05, ["get", "min_height"],
|
|
|
|
],
|
|
|
|
'fill-extrusion-opacity': .6,
|
|
|
|
},
|
|
|
|
}, labelLayerId);
|
|
|
|
}*/
|
2021-08-09 18:04:09 +02:00
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
const firstMarker = config["geojson"].features[0].geometry.coordinates;
|
2021-08-09 18:04:09 +02:00
|
|
|
//Map.setCenter(firstMarker);
|
|
|
|
const bounds = new mapBoxGL.LngLatBounds(firstMarker, firstMarker);
|
|
|
|
|
|
|
|
// add markers to map
|
2021-08-18 20:51:15 +02:00
|
|
|
config["geojson"].features.forEach((marker) => {
|
2021-08-09 18:04:09 +02:00
|
|
|
const id = marker.id;
|
|
|
|
const crds = marker.geometry.coordinates;
|
|
|
|
const content = marker.properties.content;
|
|
|
|
|
|
|
|
ui.addMarker(crds, {
|
|
|
|
id,
|
|
|
|
content,
|
|
|
|
icon: marker.icon,
|
2021-08-18 20:51:15 +02:00
|
|
|
flyToMarker: config["flyToMarker"],
|
2021-08-09 18:04:09 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
bounds.extend(crds);
|
|
|
|
});
|
|
|
|
|
|
|
|
ui.map.fitBounds(bounds, {
|
|
|
|
padding: 30,
|
|
|
|
});
|
|
|
|
|
2021-08-18 20:51:15 +02:00
|
|
|
ui.popup.on("close", (e) => {
|
|
|
|
if (config["flyToBounds"]) {
|
2021-08-09 18:04:09 +02:00
|
|
|
ui.map.fitBounds(bounds, {
|
|
|
|
padding: 30,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$(e.currentTarget).trigger(Events.MAPPOPUPCLOSE);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
getMap() {
|
|
|
|
const ui = this;
|
|
|
|
return ui.map;
|
|
|
|
}
|
|
|
|
|
|
|
|
getPopup() {
|
|
|
|
const ui = this;
|
|
|
|
return ui.popup;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return MapBoxDriver;
|
|
|
|
})($);
|
|
|
|
|
|
|
|
export default MapBoxDriver;
|