76 lines
2.4 KiB
JavaScript
76 lines
2.4 KiB
JavaScript
function MapLocationInit(mapId, options = {}) {
|
|
const valField = document.getElementById(mapId + '_value');
|
|
const theMap = document.getElementById(mapId + '_map');
|
|
const btnAction = document.getElementById(mapId + '_btn');
|
|
const display = document.getElementById(mapId + '_disp');
|
|
|
|
function isZero(latlng) {
|
|
return latlng.lat === 0 && latlng.lng === 0;
|
|
}
|
|
|
|
function asString(latlng) {
|
|
if (isZero(latlng)) { return ''; }
|
|
const pos = latlng.wrap();
|
|
return pos.lat.toFixed(6) + ',' + pos.lng.toFixed(6);
|
|
}
|
|
|
|
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({ 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 });
|
|
marker.on('move', function (e) {
|
|
valField.value = asString(e.latlng);
|
|
updatePrint();
|
|
});
|
|
map.on('click', function (e) {
|
|
if (isZero(marker.getLatLng())) {
|
|
marker.setLatLng(e.latlng);
|
|
setMapState(false);
|
|
}
|
|
});
|
|
btnAction.onclick = function () {
|
|
const isReset = !!btnAction.dataset.reset;
|
|
marker.setLatLng(isReset ? [0, 0] : map.getCenter());
|
|
setMapState(isReset ? true : false);
|
|
return false;
|
|
};
|
|
|
|
function setMapState(initial) {
|
|
theMap.style.cursor = initial ? 'crosshair' : null;
|
|
initial ? marker.remove() : marker.addTo(map);
|
|
btnAction.dataset.reset = initial ? '' : '1';
|
|
btnAction.innerText = initial ? 'Set center' : 'Reset';
|
|
}
|
|
|
|
function updatePrint() {
|
|
const prefix = valField.value
|
|
? ('pin: ' + valField.value)
|
|
: ('center: ' + asString(map.getCenter()));
|
|
display.innerText = prefix + ' zoom: ' + map.getZoom();
|
|
}
|
|
map.on('zoomend', updatePrint);
|
|
map.on('move', updatePrint);
|
|
|
|
setMapState(isZero(marker.getLatLng()));
|
|
updatePrint();
|
|
|
|
if (valField.value) {
|
|
map.setView(valField.value.split(','), options.markerZoom || 18);
|
|
}
|
|
// re-center map
|
|
setTimeout(() => map.invalidateSize(), 300);
|
|
}
|