2024-02-06 17:45:14 +00:00
|
|
|
|
import { onLocationError } from "@/lib/error";
|
2024-02-06 17:27:45 +00:00
|
|
|
|
|
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:38:49 +00:00
|
|
|
|
var currentLocationIcon = L.icon({
|
|
|
|
|
iconUrl: 'blue-dot.png',
|
|
|
|
|
iconSize: [32, 32],
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let currentLocationMarker;
|
|
|
|
|
|
|
|
|
|
function startWatchingLocation() {
|
2024-02-06 17:27:45 +00:00
|
|
|
|
map.locate({ watch: true })
|
|
|
|
|
}
|
2024-02-02 16:38:49 +00:00
|
|
|
|
|
2024-02-06 17:27:45 +00:00
|
|
|
|
function onLocationSuccess(locationEvent) {
|
|
|
|
|
const position = locationEvent.latlng
|
|
|
|
|
|
|
|
|
|
const currentPos = {
|
|
|
|
|
lat: position.lat,
|
|
|
|
|
lng: position.lng
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (currentLocationMarker) {
|
|
|
|
|
currentLocationMarker.setLatLng(currentPos);
|
|
|
|
|
} else {
|
|
|
|
|
currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
|
|
|
|
|
currentLocationMarker.addTo(map);
|
|
|
|
|
}
|
2024-02-02 16:38:49 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
map.on('locationerror', onLocationError);
|
|
|
|
|
|
2024-02-06 17:27:45 +00:00
|
|
|
|
map.on('locationfound', onLocationSuccess)
|
|
|
|
|
|
2024-07-19 10:18:44 +00:00
|
|
|
|
L.Control.AskPermisson = L.Control.extend({
|
2024-02-02 16:38:49 +00:00
|
|
|
|
onAdd: function (map) {
|
|
|
|
|
const locationButton = document.createElement('button');
|
|
|
|
|
|
|
|
|
|
locationButton.textContent = 'Konum İzni Ver';
|
|
|
|
|
|
|
|
|
|
locationButton.classList.add('custom-map-control-button');
|
|
|
|
|
|
|
|
|
|
locationButton.type = 'button'
|
|
|
|
|
|
|
|
|
|
locationButton.addEventListener('click', (ev) => {
|
2024-02-06 17:27:45 +00:00
|
|
|
|
if (locationButton.textContent != 'Konumuma Git') {
|
2024-02-02 16:38:49 +00:00
|
|
|
|
startWatchingLocation()
|
|
|
|
|
locationButton.textContent = 'Konumuma Git';
|
|
|
|
|
} else {
|
2024-02-06 17:27:45 +00:00
|
|
|
|
if (currentLocationMarker) {
|
|
|
|
|
map.setView(currentLocationMarker.getLatLng(), 12);
|
|
|
|
|
} else {
|
|
|
|
|
// @ts-ignore
|
|
|
|
|
Toastify({
|
|
|
|
|
text: 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.',
|
|
|
|
|
duration: 3000,
|
|
|
|
|
gravity: 'top', // `top` or `bottom`
|
|
|
|
|
position: 'center', // `left`, `center` or `right`
|
|
|
|
|
stopOnFocus: true, // Prevents dismissing of toast on hover
|
|
|
|
|
style: {
|
|
|
|
|
background: 'black',
|
|
|
|
|
borderRadius: '6px',
|
|
|
|
|
margin: '16px',
|
|
|
|
|
},
|
|
|
|
|
onClick: function () { }, // Callback after click
|
|
|
|
|
}).showToast();
|
|
|
|
|
}
|
|
|
|
|
|
2024-02-02 16:38:49 +00:00
|
|
|
|
}
|
|
|
|
|
L.DomEvent.stopPropagation(ev)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return locationButton;
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
|
2024-07-19 10:18:44 +00:00
|
|
|
|
L.control.askPermission = function (opts) {
|
|
|
|
|
return new L.Control.AskPermisson(opts);
|
2024-02-02 16:38:49 +00:00
|
|
|
|
};
|
|
|
|
|
|
2024-07-19 10:18:44 +00:00
|
|
|
|
L.control.askPermission({ position: 'bottomleft' }).addTo(map);
|
2024-02-02 16:38:49 +00:00
|
|
|
|
|
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."
|
|
|
|
|
})
|