Refactor map code to allow for multiple maps in app
parent
ec4e9417cd
commit
d819f11228
@ -0,0 +1,78 @@
|
||||
/*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
class Map {
|
||||
constructor(mapboxElement) {
|
||||
this.mapObj = null;
|
||||
this.mapEl = mapboxElement;
|
||||
}
|
||||
|
||||
createMap() {
|
||||
if (mapboxgl.supported()) {
|
||||
$(this.mapEl).css("display", "");
|
||||
this.mapObj = maplibreMap(this.mapEl);
|
||||
} else {
|
||||
console.log("maplibre-gl not supported, disabling map");
|
||||
$(this.mapEl).css("display", "none");
|
||||
}
|
||||
}
|
||||
|
||||
clearOldMarkersAndCenterMapOnNewMarker(classname) {
|
||||
var latitude = $(this.mapEl).data("latitude");
|
||||
var longitude = $(this.mapEl).data("longitude");
|
||||
var accurate = $(this.mapEl).data("accurate") == true;
|
||||
|
||||
this.mapObj.removeMarkers();
|
||||
this.mapObj.addMarker(latitude, longitude, classname);
|
||||
this.mapObj.animateMapIn(latitude, longitude, (accurate ? 13 : 10));
|
||||
}
|
||||
|
||||
/**
|
||||
* Destroy and re-create the map.
|
||||
* @returns {undefined}
|
||||
*/
|
||||
reloadMap() {
|
||||
try {
|
||||
if (this.mapObj != null && typeof map != 'undefined') {
|
||||
this.mapObj.off();
|
||||
this.mapObj.remove();
|
||||
this.mapObj = null;
|
||||
|
||||
if (document.getElementById("") != null) {
|
||||
this.createMap();
|
||||
} else {
|
||||
console.log("Info", "Not re-creating map because element is not in DOM.");
|
||||
}
|
||||
} else {
|
||||
this.createMap();
|
||||
}
|
||||
} catch (ex) {
|
||||
// oh well ¯\(°_o)/¯
|
||||
console.log(ex);
|
||||
$(this.mapEl).css("display", "none");
|
||||
}
|
||||
}
|
||||
|
||||
setMapLocation(latitude, longitude) {
|
||||
if (mapObj == null) {
|
||||
return;
|
||||
}
|
||||
mapObj.setMapLocation(latitude, longitude);
|
||||
}
|
||||
|
||||
animateMapIn(latitude, longitude, zoom, heading) {
|
||||
if (this.mapObj == null) {
|
||||
return;
|
||||
}
|
||||
if (typeof zoom == 'undefined') {
|
||||
zoom = 10;
|
||||
}
|
||||
if (typeof heading == 'undefined') {
|
||||
heading = 0;
|
||||
}
|
||||
this.mapObj.animateMapIn(latitude, longitude, zoom, heading);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue