284 lines
8.5 KiB
JavaScript
284 lines
8.5 KiB
JavaScript
import L from "leaflet";
|
|
import "leaflet.locatecontrol";
|
|
import "../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css";
|
|
import "../node_modules/leaflet/dist/leaflet.css";
|
|
import "./maps.css";
|
|
|
|
const iconRetinaUrl = "resources/dist/marker-icon-2x.png";
|
|
const iconUrl = "resources/dist/marker-icon.png";
|
|
const shadowUrl = "resources/dist/marker-shadow.png";
|
|
const iconDefault = new L.Icon({
|
|
iconRetinaUrl,
|
|
iconUrl,
|
|
shadowUrl,
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
popupAnchor: [1, -34],
|
|
tooltipAnchor: [16, -28],
|
|
shadowSize: [41, 41]
|
|
});
|
|
|
|
var marker;
|
|
var feature;
|
|
var map;
|
|
|
|
export function setMarker (LatLng, move=false) {
|
|
if (marker) {
|
|
console.log("Marker exists");
|
|
// console.log(marker);
|
|
marker.remove();
|
|
}
|
|
console.log(LatLng);
|
|
if ($("input[name='place']").val() !== undefined) {
|
|
$("input[name='place']").val(LatLng.lat + ";" + LatLng.lng);
|
|
}
|
|
console.log(map);
|
|
marker = L.marker(LatLng, { icon: iconDefault }).addTo(map);
|
|
if(move){
|
|
map.setView(LatLng, 17);
|
|
}
|
|
}
|
|
|
|
var mapsList = [];
|
|
|
|
export function loadMap (lat = undefined, lng = undefined, selectorId = undefined, select = true, removeMap = false) {
|
|
console.log("Loading map...", [lat, lng, selectorId, select]);
|
|
console.trace();
|
|
if (lat === undefined && lng === undefined) {
|
|
lat = 45.5285; // TODO: replace hard-coded into cookie reading
|
|
lng = 10.2956;
|
|
}
|
|
if (selectorId === undefined) {
|
|
selectorId = "map";
|
|
}
|
|
let container = L.DomUtil.get(selectorId);
|
|
console.log(container);
|
|
try{
|
|
if(container._leaflet_id){
|
|
console.log(mapsList);
|
|
if(removeMap){
|
|
mapsList[0].off();
|
|
mapsList[0].remove();
|
|
mapsList.splice(0, 1);
|
|
} else {
|
|
console.log("Skipping map loading because already loaded...");
|
|
return true;
|
|
}
|
|
}
|
|
} catch(e){
|
|
//console.log(e);
|
|
console.log("Skipping map loading...");
|
|
return true;
|
|
}
|
|
const zoom = select ? 10 : 17;
|
|
const latLng = new L.LatLng(lat, lng);
|
|
L.Map.addInitHook(function () {
|
|
mapsList.push(this); // Use whatever global scope variable you like.
|
|
});
|
|
map = new L.Map(selectorId, { zoomControl: true });
|
|
|
|
const osmUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
|
|
const osmAttribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
|
|
const osm = new L.TileLayer(osmUrl, { maxZoom: 20, attribution: osmAttribution });
|
|
|
|
map.setView(latLng, zoom).addLayer(osm);
|
|
|
|
if (select) {
|
|
map.on("click", function (e) {
|
|
setMarker(e.latlng);
|
|
});
|
|
|
|
L.Control.CustomLocate = L.Control.Locate.extend({
|
|
_drawMarker: function () {
|
|
setMarker(this._event.latlng);
|
|
},
|
|
_onDrag: function () {},
|
|
_onZoom: function () {},
|
|
_onZoomEnd: function () {}
|
|
});
|
|
|
|
const lc = new L.Control.CustomLocate({
|
|
icon: "fa fa-map-marker",
|
|
cacheLocation: false, // disabled for privacy reasons
|
|
initialZoomLevel: 16
|
|
}).addTo(map);
|
|
|
|
if ($("#addr").val() !== undefined) {
|
|
document.getElementById("addr").addEventListener("keydown", function (event) {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
$("#search > button").trigger("click");
|
|
}
|
|
});
|
|
}
|
|
window.addEventListener("focus", function (event) {
|
|
if ($("#addr").val() === "") {
|
|
console.log("Loading location from clipboard");
|
|
try {
|
|
navigator.clipboard.readText().then((text) => {
|
|
$("#addr").val(text);
|
|
if (!addrSearch()) {
|
|
$("#addr").val("");
|
|
}
|
|
}).catch((err) => {
|
|
console.error("Failed to read clipboard contents: ", err);
|
|
});
|
|
} catch(error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
setMarker(latLng);
|
|
}
|
|
map.invalidateSize();
|
|
}
|
|
|
|
// from unknown source in the Internet
|
|
export function chooseAddr (addrLat, addrLng, zoom = undefined, lat1 = undefined, lng1 = undefined, lat2 = undefined, lng2 = undefined, osmType = undefined) {
|
|
addrLat = addrLat.replace(",", ".");
|
|
addrLng = addrLng.replace(",", ".");
|
|
if (lat1 !== undefined && lng1 !== undefined && lat2 !== undefined && lng2 !== undefined && osmType !== undefined) {
|
|
const loc1 = new L.LatLng(lat1, lng1);
|
|
const loc2 = new L.LatLng(lat2, lng2);
|
|
const bounds = new L.LatLngBounds(loc1, loc2);
|
|
console.log(lat1, lng1, lat2, lng2, osmType);
|
|
setMarker(new L.LatLng(addrLat, addrLng));
|
|
if (feature) {
|
|
map.removeLayer(feature);
|
|
}
|
|
if (osmType === "node") {
|
|
map.fitBounds(bounds);
|
|
map.setZoom(16);
|
|
} else {
|
|
const loc3 = new L.LatLng(lat1, lng2);
|
|
const loc4 = new L.LatLng(lat2, lng1);
|
|
feature = L.polyline([loc1, loc4, loc2, loc3, loc1], { color: "red" }).addTo(map);
|
|
map.fitBounds(bounds);
|
|
map.setZoom(16);
|
|
}
|
|
} else if (addrLat !== undefined && addrLng !== undefined) {
|
|
const loc = new L.LatLng(addrLat, addrLng);
|
|
console.log(loc);
|
|
setMarker(loc);
|
|
if (zoom !== undefined) {
|
|
map.setView(loc, zoom);
|
|
} else {
|
|
map.setView(loc);
|
|
}
|
|
}
|
|
}
|
|
|
|
// started from https://derickrethans.nl/leaflet-and-nominatim.html
|
|
export function addrSearch (stringResultsFound= undefined, stringResultsNotFound = undefined) {
|
|
function searchError (error, checkClipboard) {
|
|
if (!checkClipboard) {
|
|
$("#results").empty();
|
|
$("<p>", { html: stringResultsNotFound }).appendTo("#results");
|
|
console.error(error);
|
|
}
|
|
return false;
|
|
}
|
|
let inp = document.getElementById("addr").value;
|
|
// if translation strings are not defined, skip the nominatim step and don't log errors (no console.error)
|
|
const checkClipboard = stringResultsFound=== undefined && stringResultsNotFound === undefined;
|
|
$("#results").empty();
|
|
|
|
if (inp.match("\@(-?[\d\.]*)")) { // Google Maps
|
|
try {
|
|
inp = inp.split("@")[1].split(",");
|
|
chooseAddr(inp[0], inp[1]);
|
|
return true;
|
|
} catch (error) {
|
|
searchError(error, checkClipboard);
|
|
}
|
|
} else if (inp.includes("#map=")) { // OpenStreetMap website
|
|
try {
|
|
inp = inp.split("#map=")[1].split("/");
|
|
chooseAddr(inp[1], inp[2], inp[0]);
|
|
return true;
|
|
} catch (error) {
|
|
searchError(error, checkClipboard);
|
|
}
|
|
} else if (inp.match(/[0-9]+,\s[0-9]+/)) { // Bing
|
|
try {
|
|
inp = inp.split(", ");
|
|
chooseAddr(inp[0], inp[1]);
|
|
return true;
|
|
} catch (error) {
|
|
searchError(error, checkClipboard);
|
|
}
|
|
} else if (inp.match(/[0-9]+;[0-9]+/)) { // DB dump
|
|
try {
|
|
inp = inp.split(";");
|
|
chooseAddr(inp[0], inp[1]);
|
|
return true;
|
|
} catch (error) {
|
|
searchError(error, checkClipboard);
|
|
}
|
|
} else if (!checkClipboard) {
|
|
$.getJSON("https://nominatim.openstreetmap.org/search?format=json&limit=5&q=" + inp, function (data) {
|
|
console.log(data);
|
|
var list = document.createElement('ul');
|
|
list.classList.add("results-list");
|
|
|
|
$.each(data, function (key, val) {
|
|
var item_a = document.createElement('a');
|
|
item_a.href = "#";
|
|
item_a.textContent = val.display_name;
|
|
|
|
item_a.dataset.addrLat = val.lat;
|
|
item_a.dataset.addrLng = val.lon;
|
|
item_a.dataset.zoom = undefined;
|
|
item_a.dataset.lat1 = val.boundingbox[0];
|
|
item_a.dataset.lng1 = val.boundingbox[2];
|
|
item_a.dataset.lat2 = val.boundingbox[1];
|
|
item_a.dataset.lng2 = val.boundingbox[3];
|
|
item_a.dataset.osmType = val.osm_type;
|
|
|
|
var item = document.createElement('li');
|
|
item.appendChild(item_a);
|
|
|
|
list.appendChild(item);
|
|
});
|
|
|
|
console.log(list);
|
|
|
|
if (data.length !== 0) {
|
|
$("#results").empty();
|
|
$("<p>", { html: stringResultsFound+ ":" }).appendTo("#results");
|
|
$(list).appendTo("#results");
|
|
|
|
$("#results li").click(function(e){
|
|
e.preventDefault()
|
|
var row = e.target;
|
|
console.log(row);
|
|
console.log(row.dataset);
|
|
allertaJS.maps.chooseAddr(
|
|
row.dataset.addrLat,
|
|
row.dataset.addrLng,
|
|
row.dataset.zoom,
|
|
row.dataset.lat1,
|
|
row.dataset.lng1,
|
|
row.dataset.lat2,
|
|
row.dataset.lng2,
|
|
row.dataset.osmType
|
|
);
|
|
})
|
|
} else {
|
|
$("#results").empty();
|
|
$("<p>", { html: stringResultsNotFound }).appendTo("#results");
|
|
}
|
|
});
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
if(typeof loadMapOnScriptLoad !== undefined){
|
|
console.log("Loading map...");
|
|
allertaJS.maps.loadMap();
|
|
}
|
|
});
|