You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
124 lines
3.7 KiB
JavaScript
124 lines
3.7 KiB
JavaScript
/*
|
|
* 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 MapControl {
|
|
constructor(maplibreElement, interactive) {
|
|
this.mapObj = null;
|
|
this.mapEl = maplibreElement;
|
|
this.interactiveMap = interactive == true;
|
|
}
|
|
|
|
static supported() {
|
|
return maplibregl.supported();
|
|
}
|
|
|
|
createMap() {
|
|
if (maplibregl.supported()) {
|
|
$(this.mapEl).css("display", "");
|
|
this.mapObj = maplibreMap(this.mapEl, this.interactiveMap);
|
|
} else {
|
|
console.log("maplibre-gl not supported, disabling map");
|
|
$(this.mapEl).css("display", "none");
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Clear all markers from the map, make a new marker, and fly to it.
|
|
* @param {string} classname CSS class for the marker, for adding icon and stuff. Default will be invisible and 0x0px.
|
|
* @param {number} latitude
|
|
* @param {number} longitude
|
|
* @param {boolean} accurate set true to zoom to street level (z13), false to zoom to general area (z10).
|
|
* @param {boolean} countrylevel set true to override accurate and set zoom level to 3
|
|
* @returns {undefined}
|
|
*/
|
|
clearMarkersAndCenterMapOnNewMarker(classname, latitude, longitude, accurate, countrylevel) {
|
|
this.mapObj.removeMarkers();
|
|
this.mapObj.addMarker(latitude, longitude, classname);
|
|
var zoomlevel = 10;
|
|
if (accurate) {
|
|
zoomlevel = 13;
|
|
}
|
|
if (countrylevel) {
|
|
zoomlevel = 3;
|
|
}
|
|
this.mapObj.animateMapIn(latitude, longitude, zoomlevel);
|
|
}
|
|
|
|
loadMarkersFromGeoJson(geojson, iconname, name) {
|
|
this.mapObj.addSource("markers-" + name, {
|
|
'type': 'geojson',
|
|
'data': geojson
|
|
});
|
|
this.mapObj.addLayer({
|
|
id: "marker-layer-" + name,
|
|
type: "symbol",
|
|
source: "markers-" + name,
|
|
layout: {
|
|
"icon-image": iconname,
|
|
"icon-anchor": "bottom",
|
|
'icon-allow-overlap': true
|
|
}
|
|
});
|
|
}
|
|
|
|
loadIcon(url, name, callback) {
|
|
var mapObj = this.mapObj;
|
|
this.mapObj.loadImage(
|
|
url,
|
|
function (error, image) {
|
|
if (error)
|
|
throw error;
|
|
mapObj.addImage(name, image);
|
|
callback();
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 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 (this.mapObj == null) {
|
|
return;
|
|
}
|
|
this.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);
|
|
}
|
|
} |