61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
function MapLocationInit(mapId, options = {}) {
|
|
const valField = document.getElementById(mapId + '_value');
|
|
const theMap = document.getElementById(mapId + '_map');
|
|
const resetButton = document.getElementById(mapId + '_reset');
|
|
|
|
function isZero(latlng) {
|
|
return latlng.lat === 0 && latlng.lng === 0;
|
|
}
|
|
|
|
const osm = L.tileLayer(options.tileLayer || 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', options.tileOptions);
|
|
const map = L.map(mapId + '_map', {
|
|
layers: [osm],
|
|
center: [20, -25],
|
|
zoom: 2,
|
|
...(options.map || {})
|
|
});
|
|
L.control.locate({
|
|
returnToPrevBounds: true,
|
|
showPopup: false,
|
|
...(options.locate || {})
|
|
}).addTo(map);
|
|
|
|
function loadPos() {
|
|
if (!valField.value) {
|
|
return [0, 0];
|
|
} else {
|
|
return valField.value.split(',');
|
|
}
|
|
}
|
|
const marker = L.marker(loadPos(), { draggable: true }).addTo(map);
|
|
marker.on('move', function (e) {
|
|
const pos = map.wrapLatLng(e.latlng);
|
|
const flag = isZero(pos);
|
|
valField.value = flag ? null : pos.lat.toFixed(6) + ',' + pos.lng.toFixed(6);
|
|
});
|
|
map.on('click', function (e) {
|
|
if (isZero(marker.getLatLng())) {
|
|
marker.setLatLng(e.latlng);
|
|
setMapState(false);
|
|
}
|
|
});
|
|
resetButton.onclick = function () {
|
|
marker.setLatLng([0, 0]);
|
|
setMapState(true);
|
|
return false;
|
|
};
|
|
|
|
function setMapState(initial) {
|
|
theMap.style.cursor = initial ? 'crosshair' : null;
|
|
marker.setOpacity(initial ? 0 : 1);
|
|
}
|
|
|
|
if (isZero(marker.getLatLng())) {
|
|
setMapState(true);
|
|
} else {
|
|
map.setView(valField.value.split(','), options.markerZoom || 18);
|
|
}
|
|
// re-center map
|
|
setTimeout(() => map.invalidateSize(), 300);
|
|
}
|