76 lines
2.2 KiB
JavaScript
Executable File
76 lines
2.2 KiB
JavaScript
Executable File
import { getCookie, setCookie } from './utils.js'
|
|
|
|
function getCoordinates() {
|
|
let location = [51.505, -0.09]; // London by default on leaflet
|
|
let lat = getCookie("lat");
|
|
let lng = getCookie("lng");
|
|
if (lat != undefined && lng != undefined) {
|
|
location = [lat, lng];
|
|
}
|
|
return location;
|
|
}
|
|
|
|
function updateLocationCookies([lat, lng]) {
|
|
setCookie("lat", lat, 10);
|
|
setCookie("lng", lng, 10);
|
|
}
|
|
|
|
function geolocationHandler() {
|
|
|
|
let location = getCoordinates();
|
|
let message = document.querySelector('.message');
|
|
// Init map
|
|
let map = L.map('map').setView(location, 5);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
let marker = L.marker(location, { draggable: true }).addTo(map);
|
|
marker.on('dragend', updateMarker);
|
|
marker.addTo(map);
|
|
|
|
// Get geolocation
|
|
function getLocation() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(setLocation);
|
|
} else {
|
|
message.innerHTML = "Geolocation is not supported by this browser.";
|
|
}
|
|
}
|
|
|
|
function setLocation(position) {
|
|
location = [position.coords.latitude, position.coords.longitude];
|
|
if (marker !== undefined) {
|
|
marker.setLatLng(location);
|
|
}
|
|
map.setView(location, 15);
|
|
updateLocationCookies(location);
|
|
}
|
|
|
|
function updateMap(event) {
|
|
if (marker === undefined) {
|
|
marker = new L.marker(event.latlng, { draggable: 'true' });
|
|
marker.on('dragend', updateMarker);
|
|
marker.addTo(map);
|
|
} else {
|
|
marker.setLatLng(event.latlng);
|
|
}
|
|
updateLocationCookies([event.latlng.lat, event.latlng.lng]);
|
|
}
|
|
|
|
function updateMarker(event) {
|
|
let position = marker.getLatLng();
|
|
map.panTo([position.lat, position.lng]);
|
|
updateLocationCookies([position.lat, position.lng]);
|
|
}
|
|
|
|
map.on('click', updateMap);
|
|
|
|
document.querySelector('.geolocation-button')
|
|
.addEventListener('click', getLocation);
|
|
}
|
|
|
|
export {
|
|
geolocationHandler,
|
|
getCoordinates
|
|
} |