2024-02-02 16:27:37 +00:00
|
|
|
|
/* eslint-disable no-undef */
|
2024-01-20 10:22:47 +00:00
|
|
|
|
var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10);
|
|
|
|
|
|
|
|
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution:
|
|
|
|
|
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
|
|
|
|
let targetLocationMarker;
|
|
|
|
|
|
|
|
|
|
let targetLocationCircle;
|
|
|
|
|
|
|
|
|
|
var targetLocationIcon = L.icon({
|
|
|
|
|
iconUrl: 'goal.svg',
|
|
|
|
|
iconSize: [32, 32],
|
|
|
|
|
});
|
|
|
|
|
|
2024-02-02 16:27:37 +00:00
|
|
|
|
L.control.locate({
|
|
|
|
|
position: 'bottomleft', clickBehavior: {
|
|
|
|
|
inView: 'setView',
|
|
|
|
|
outOfView: 'setView',
|
|
|
|
|
inViewNotFollowing: 'setView'
|
|
|
|
|
}
|
|
|
|
|
}).addTo(map);
|
2024-01-20 10:22:47 +00:00
|
|
|
|
|
|
|
|
|
map.on('click', (e) => {
|
|
|
|
|
if (targetLocationMarker) {
|
|
|
|
|
targetLocationMarker.setLatLng(e.latlng)
|
|
|
|
|
targetLocationCircle.setLatLng(e.latlng)
|
|
|
|
|
} else {
|
|
|
|
|
targetLocationMarker = L.marker(e.latlng, { icon: targetLocationIcon }).addTo(map);
|
|
|
|
|
|
|
|
|
|
targetLocationCircle = L.circle(e.latlng, {
|
|
|
|
|
color: 'blue',
|
|
|
|
|
fillColor: '#30f',
|
|
|
|
|
fillOpacity: 0.2,
|
|
|
|
|
radius: 50
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const pos = targetLocationMarker.getLatLng()
|
|
|
|
|
document.getElementById('coordinates').innerText = `${pos.lat}. Enlem, ${pos.lng}. Boylam`
|
2024-01-23 18:39:07 +00:00
|
|
|
|
document.getElementById('geolocation-input').value = `${pos.lat},${pos.lng}`
|
2024-01-20 10:22:47 +00:00
|
|
|
|
document.getElementById('location-selected-confirmation').innerText = "Konum seçildi, bir sonraki adıma geçebilirsiniz."
|
|
|
|
|
})
|