From 4c6d6df13bf0af79c222500fe2a5fa1c0002615d Mon Sep 17 00:00:00 2001
From: log101
Date: Sat, 20 Jan 2024 13:22:47 +0300
Subject: [PATCH] feat: add location selector
---
src/pages/create.astro | 17 +++--
src/scripts/initSelectionMap.js | 119 ++++++++++++++++++++++++++++++++
2 files changed, 132 insertions(+), 4 deletions(-)
create mode 100644 src/scripts/initSelectionMap.js
diff --git a/src/pages/create.astro b/src/pages/create.astro
index 6595b94..8085ab4 100644
--- a/src/pages/create.astro
+++ b/src/pages/create.astro
@@ -65,9 +65,18 @@ import { Textarea } from '@/components/ui/textarea';
-
+
+ Seçilen Konum:
+
+
+ Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
+ basınız.
+
+
+
@@ -109,5 +118,5 @@ import { Textarea } from '@/components/ui/textarea';
-
+
diff --git a/src/scripts/initSelectionMap.js b/src/scripts/initSelectionMap.js
new file mode 100644
index 0000000..9c74a8e
--- /dev/null
+++ b/src/scripts/initSelectionMap.js
@@ -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:
+ '© OpenStreetMap',
+}).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."
+})