feat: add location selector

This commit is contained in:
log101 2024-01-20 13:22:47 +03:00
parent 2abde4f971
commit 4c6d6df13b
2 changed files with 132 additions and 4 deletions

View File

@ -65,9 +65,18 @@ import { Textarea } from '@/components/ui/textarea';
</p>
<div>
<div id="map" class="w-full h-[450px] rounded mt-4"></div>
<Button className="w-full bg-green-600 hover:bg-green-500">
Konumu Seç
</Button>
<p class="text-xl mt-2">
<span class="font-semibold">Seçilen Konum:</span>
</p>
<p class="text-lg" id="coordinates">
Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
basınız.
</p>
<p
class="text-lg text-muted-foreground mt-2"
id="location-selected-confirmation"
>
</p>
</div>
</div>
@ -109,5 +118,5 @@ import { Textarea } from '@/components/ui/textarea';
<Button className="w-full">Bağlantıyı Oluştur</Button>
</main>
<script src="../scripts/initMap.js"></script>
<script src="../scripts/initSelectionMap.js"></script>
</Layout>

View File

@ -0,0 +1,119 @@
var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution:
'&copy; <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],
});
var currentLocationIcon = L.icon({
iconUrl: 'blue-dot.png',
iconSize: [32, 32],
});
let currentLocationMarker;
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
L.Control.GoToCurrentLocation = L.Control.extend({
onAdd: function (map) {
const locationButton = document.createElement('button');
locationButton.textContent = 'Konumuma Git';
locationButton.classList.add('custom-map-control-button');
locationButton.addEventListener('click', (e) => {
map.setView(currentLocationMarker.getLatLng(), 18);
e.stopPropagation()
});
return locationButton;
},
});
L.control.currentLocation = function (opts) {
return new L.Control.GoToCurrentLocation(opts);
};
L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
navigator.permissions
.query({ name: "geolocation" })
.then((permissionStatus) => {
if (permissionStatus.state === 'granted') {
navigator.geolocation.watchPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(pos);
} else {
currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
},
() => null,
{ enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
)
} else {
permissionStatus.onchange = () => {
if (permissionStatus.state === 'granted') {
navigator.geolocation.watchPosition(
(position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
}
if (currentLocationMarker) {
currentLocationMarker.setLatLng(pos);
} else {
currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
currentLocationMarker.addTo(map);
}
},
() => null,
{ enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
)
}
};
}
});
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`
document.getElementById('location-selected-confirmation').innerText = "Konum seçildi, bir sonraki adıma geçebilirsiniz."
})