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.
137 lines
3.8 KiB
JavaScript
137 lines
3.8 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/.
|
|
*/
|
|
|
|
var map = null;
|
|
var popup = null;
|
|
function createMap() {
|
|
if (maplibregl.supported()) {
|
|
$("#mapbox").css("display", "");
|
|
map = maplibreMap();
|
|
} else {
|
|
console.log("maplibre-gl not supported, disabling map");
|
|
$("#mapbox").css("display", "none");
|
|
app.dialog.alert("Your device does not support the 3D graphics needed to show the map.", "Unsupported Device");
|
|
}
|
|
}
|
|
|
|
function centerMapOnLocation(latitude, longitude) {
|
|
map.removeMarkers();
|
|
map.addMarker(latitude, longitude);
|
|
map.animateMapIn(latitude, longitude, 16);
|
|
}
|
|
|
|
/**
|
|
* Destroy and re-create the map.
|
|
* @returns {undefined}
|
|
*/
|
|
function reloadMap() {
|
|
try {
|
|
if (map != null && typeof map != 'undefined') {
|
|
map.off();
|
|
map.remove();
|
|
map = null;
|
|
createMap();
|
|
} else {
|
|
createMap();
|
|
}
|
|
} catch (ex) {
|
|
// oh well ¯\(°_o)/¯
|
|
console.log(ex);
|
|
$("#mapbox").css("display", "none");
|
|
app.dialog.alert("There was a problem loading the map. Error message: " + ex, "Error");
|
|
}
|
|
}
|
|
|
|
function setMapLocation(latitude, longitude) {
|
|
if (map == null) {
|
|
return;
|
|
}
|
|
map.setMapLocation(latitude, longitude);
|
|
}
|
|
|
|
function animateMapIn(latitude, longitude, zoom, heading) {
|
|
if (map == null) {
|
|
return;
|
|
}
|
|
if (typeof zoom == 'undefined') {
|
|
zoom = 1;
|
|
}
|
|
if (typeof heading == 'undefined') {
|
|
heading = 0;
|
|
}
|
|
map.animateMapIn(latitude, longitude, zoom, heading);
|
|
}
|
|
|
|
function showLocationPopup(latitude, longitude, words, accuracy) {
|
|
clearRectangle();
|
|
$("#location-info-words").text(words);
|
|
$("#location-info-coordlink").attr("href", "geo:" + (Math.round(latitude * 10000) / 10000) + "," + (Math.round(longitude * 10000) / 10000));
|
|
$("#location-info-coords").text((Math.round(latitude * 10000) / 10000) + ", " + (Math.round(longitude * 10000) / 10000));
|
|
$("#location-info-coordlink").css("visibility", "");
|
|
drawRectangle(
|
|
latitude - (accuracy / 2),
|
|
longitude - (accuracy / 2),
|
|
latitude + (accuracy / 2),
|
|
longitude + (accuracy / 2)
|
|
);
|
|
}
|
|
|
|
function drawRectangle(fromlat, fromlng, tolat, tolng) {
|
|
var geojson = {
|
|
'type': 'Feature',
|
|
'geometry': {
|
|
'type': 'Polygon',
|
|
'coordinates': [
|
|
[
|
|
[fromlng, fromlat],
|
|
[fromlng, tolat],
|
|
[tolng, tolat],
|
|
[tolng, fromlat],
|
|
[fromlng, fromlat]
|
|
]
|
|
]
|
|
}
|
|
};
|
|
if (typeof map.getSource("rectangle") == "undefined") {
|
|
map.addSource('rectangle', {
|
|
'type': 'geojson',
|
|
data: geojson
|
|
});
|
|
}
|
|
if (typeof map.getLayer('rectangle') == "undefined") {
|
|
map.addLayer({
|
|
'id': 'rectangle',
|
|
'type': 'fill',
|
|
'source': 'rectangle',
|
|
'layout': {},
|
|
'paint': {
|
|
'fill-color': '#088',
|
|
'fill-opacity': 0.5
|
|
}
|
|
});
|
|
}
|
|
map.getSource("rectangle").setData(geojson);
|
|
}
|
|
|
|
function clearRectangle() {
|
|
if (typeof map.getLayer("rectangle") != "undefined") {
|
|
map.removeLayer('rectangle');
|
|
}
|
|
}
|
|
|
|
function lookupAndShowCoords(latitude, longitude) {
|
|
var words = FixPhrase.encode(latitude, longitude);
|
|
|
|
map.flyTo({
|
|
center: {
|
|
lat: latitude,
|
|
lng: longitude
|
|
},
|
|
zoom: Math.max(map.getZoom(), 18)
|
|
});
|
|
|
|
showLocationPopup(latitude, longitude, words, 0.0001);
|
|
} |