feat: add location selector

src/pages/create.astro

@@ -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>

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:
+        '&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."
+})