2023-04-08 10:34:31 +07:00
|
|
|
// Creating map options
|
|
|
|
let mapOptions = {
|
2023-04-08 23:47:39 +07:00
|
|
|
center: [41.875728, -87.626609],
|
2023-04-08 10:34:31 +07:00
|
|
|
zoom: 10,
|
|
|
|
}
|
|
|
|
|
|
|
|
var defaultIcon = L.icon({
|
|
|
|
iconUrl: '/assets/icons/marker-icon.png',
|
|
|
|
shadowUrl: '/assets/icons/marker-shadow.png',
|
|
|
|
});
|
2023-06-27 22:39:15 +07:00
|
|
|
|
2023-04-08 10:34:31 +07:00
|
|
|
// Creating a map object
|
|
|
|
let map = new L.map('map', mapOptions);
|
2023-06-27 22:39:15 +07:00
|
|
|
|
2023-04-08 10:34:31 +07:00
|
|
|
// Creating a Layer object
|
|
|
|
let layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
|
|
});
|
|
|
|
|
|
|
|
// Geolocation
|
|
|
|
L.control.locate().addTo(map);
|
|
|
|
|
|
|
|
// Adding layer to the map
|
|
|
|
map.addLayer(layer);
|
|
|
|
|
|
|
|
// Marker
|
|
|
|
let marker = null;
|
2023-06-27 22:39:15 +07:00
|
|
|
map.on('click', (event) => {
|
2023-04-08 10:34:31 +07:00
|
|
|
|
2023-06-27 22:39:15 +07:00
|
|
|
if (marker !== null) {
|
2023-04-08 10:34:31 +07:00
|
|
|
map.removeLayer(marker);
|
|
|
|
}
|
|
|
|
|
2023-06-27 22:39:15 +07:00
|
|
|
marker = L.marker([event.latlng.lat, event.latlng.lng], {icon: defaultIcon}).addTo(map);
|
2023-04-08 10:34:31 +07:00
|
|
|
|
|
|
|
document.getElementById('lat').value = event.latlng.lat;
|
|
|
|
document.getElementById('long').value = event.latlng.lng;
|
2023-06-27 22:39:15 +07:00
|
|
|
|
2023-04-08 23:44:45 +07:00
|
|
|
})
|