161 lines
3.1 KiB
JavaScript
161 lines
3.1 KiB
JavaScript
// public/js/map/engine.js
|
|
// ===============================
|
|
// ASTRAZIONE MOTORE MAPPA
|
|
// ===============================
|
|
|
|
(function () {
|
|
const engine = {
|
|
type: "leaflet",
|
|
|
|
leafletMap: null,
|
|
leafletMarkerLayer: null,
|
|
|
|
mapboxMap: null,
|
|
|
|
map: null,
|
|
markerLayer: null,
|
|
|
|
init(map, markerLayer) {
|
|
this.type = "leaflet";
|
|
|
|
this.leafletMap = map;
|
|
this.leafletMarkerLayer = markerLayer;
|
|
|
|
this.map = map;
|
|
this.markerLayer = markerLayer;
|
|
},
|
|
/*
|
|
setMapbox(mapboxMap) {
|
|
this.type = "mapbox";
|
|
|
|
this.mapboxMap = mapboxMap;
|
|
|
|
this.map = mapboxMap;
|
|
this.markerLayer = null;
|
|
|
|
mapboxMap.on("moveend", () => {
|
|
console.log("[MapEngine] Mapbox moveend -> aggiorno foto");
|
|
|
|
window.renderPhotoMapLayer?.();
|
|
});
|
|
},
|
|
*/
|
|
setMapbox(mapboxMap) {
|
|
this.type = "mapbox";
|
|
|
|
this.mapboxMap = mapboxMap;
|
|
|
|
this.map = mapboxMap;
|
|
this.markerLayer = null;
|
|
|
|
console.log("[MapEngine] Mapbox collegato");
|
|
|
|
/*mapboxMap.on("moveend", () => {
|
|
console.log("[MapEngine] *** MOVEEND MAPBOX ***");
|
|
|
|
setTimeout(() => {
|
|
console.log("[MapEngine] refresh foto dopo moveend - 1");
|
|
window.renderPhotoMapLayer?.();
|
|
|
|
setTimeout(() => {
|
|
console.log("[MapEngine] refresh foto dopo moveend - 2");
|
|
window.renderPhotoMapLayer?.();
|
|
}, 500);
|
|
}, 100);
|
|
});*/
|
|
/*mapboxMap.on("moveend", () => {
|
|
console.log("[MapEngine] *** MOVEEND MAPBOX ***");
|
|
|
|
setTimeout(() => {
|
|
console.log("[MapEngine] refresh foto dopo moveend");
|
|
window.renderPhotoMapLayer?.();
|
|
}, 100);
|
|
});*/
|
|
|
|
},
|
|
|
|
setLeaflet() {
|
|
this.type = "leaflet";
|
|
|
|
this.map = this.leafletMap;
|
|
this.markerLayer = this.leafletMarkerLayer;
|
|
},
|
|
|
|
isLeaflet() {
|
|
return this.type === "leaflet";
|
|
},
|
|
|
|
isMapbox() {
|
|
return this.type === "mapbox";
|
|
},
|
|
|
|
isReady() {
|
|
return !!this.map;
|
|
},
|
|
|
|
addMarker(marker) {
|
|
if (!marker || !this.markerLayer) {
|
|
return;
|
|
}
|
|
|
|
this.markerLayer.addLayer(marker);
|
|
},
|
|
|
|
addMarkers(markers) {
|
|
if (!markers?.length || !this.markerLayer) {
|
|
return;
|
|
}
|
|
|
|
this.markerLayer.addLayers(markers);
|
|
},
|
|
|
|
clearMarkers() {
|
|
this.markerLayer?.clearLayers();
|
|
},
|
|
/*
|
|
getBounds() {
|
|
return this.map?.getBounds?.();
|
|
},
|
|
*/
|
|
getBounds() {
|
|
if (this.isMapbox()) {
|
|
const b = this.mapboxMap?.getBounds?.();
|
|
|
|
if (!b) {
|
|
return null;
|
|
}
|
|
|
|
return {
|
|
getWest: () => b.getWest(),
|
|
getEast: () => b.getEast(),
|
|
getSouth: () => b.getSouth(),
|
|
getNorth: () => b.getNorth(),
|
|
};
|
|
}
|
|
|
|
return this.leafletMap?.getBounds?.() || null;
|
|
},
|
|
|
|
getZoom() {
|
|
return this.map?.getZoom?.();
|
|
},
|
|
|
|
fitBounds(bounds, options = {}) {
|
|
this.map?.fitBounds?.(bounds, options);
|
|
},
|
|
|
|
invalidateSize() {
|
|
this.map?.invalidateSize?.();
|
|
},
|
|
|
|
on(event, callback) {
|
|
this.map?.on?.(event, callback);
|
|
},
|
|
|
|
off(event, callback) {
|
|
this.map?.off?.(event, callback);
|
|
},
|
|
};
|
|
|
|
window.MapEngine = Object.seal(engine);
|
|
})();
|