feat: fix geolocation errors on initSelectionMap

src/layouts/Layout.astro

@@ -25,6 +25,9 @@
       src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
       integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
       crossorigin=""></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
     <meta property="og:title" content="Konulu Konum" />
     <meta property="og:description" content="Sevdiklerinizi şaşırtın!" />
     <meta property="og:url" content="konulu-konum.vercel.app" />

src/lib/utils.ts

@@ -4,3 +4,7 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function remoteLog(data: any) {
+  fetch("/api/debug", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) })
+}

src/pages/[id].astro

@@ -33,15 +33,6 @@ dayjs.extend(relativeTime);
 
 dayjs.extend(utc);
 
-console.log(
-  'then',
-  data?.created_at,
-  'now',
-  dayjs().format(),
-  'now utc',
-  dayjs.utc().format()
-);
-
 // @ts-expect-error Generated<string> is string
 const dateFromNow = dayjs(data?.created_at).add(3, 'hour').from(dayjs.utc());
 ---

src/pages/api/debug.ts

@@ -0,0 +1,11 @@
+import type { APIRoute } from "astro"
+
+export const POST: APIRoute = async ({ request }) => {
+  const data = await request.json()
+
+  console.log(data)
+
+  return new Response(null, {
+    status: 200
+  })
+}

src/pages/index.astro

@@ -157,9 +157,6 @@ import { Checkbox } from '@/components/ui/checkbox';
       </div>
     </form>
     <script src="../scripts/initSelectionMap.js"></script>
-    <script
-      type="text/javascript"
-      src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
   </main>
 
   <script>

src/scripts/initSelectionMap.js

@@ -1,3 +1,5 @@
+import { remoteLog } from "@/lib/utils";
+
 var map = L.map('map').setView([41.024857599001905, 28.940787550837882], 10);
 
 L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -22,33 +24,48 @@ var currentLocationIcon = L.icon({
 
 let currentLocationMarker;
 
-let watchId = -1;
 function startWatchingLocation() {
-    watchId = navigator.geolocation.watchPosition(
+    map.locate({ watch: true })
-        (position) => {
+}
-            const pos = {
+
-                lat: position.coords.latitude,
+function onLocationError() {
-                lng: position.coords.longitude
+    // @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();
+}
+
+
+function onLocationSuccess(locationEvent) {
+    const position = locationEvent.latlng
+
+    const currentPos = {
+        lat: position.lat,
+        lng: position.lng
     }
 
     if (currentLocationMarker) {
-                currentLocationMarker.setLatLng(pos);
+        currentLocationMarker.setLatLng(currentPos);
     } else {
-                currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
+        currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
         currentLocationMarker.addTo(map);
     }
-        },
-        () => null,
-        { enableHighAccuracy: true, timeout: 27000, maximumAge: 10000 }
-    )
-}
-
-function onLocationError(e) {
-    alert(e.message);
 }
 
 map.on('locationerror', onLocationError);
 
+map.on('locationfound', onLocationSuccess)
+
 L.Control.GoToCurrentLocation = L.Control.extend({
     onAdd: function (map) {
         const locationButton = document.createElement('button');
@@ -60,11 +77,29 @@ L.Control.GoToCurrentLocation = L.Control.extend({
         locationButton.type = 'button'
 
         locationButton.addEventListener('click', (ev) => {
-            if (watchId === -1) {
+            if (locationButton.textContent != 'Konumuma Git') {
                 startWatchingLocation()
                 locationButton.textContent = 'Konumuma Git';
             } else {
+                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();
+                }
+
             }
             L.DomEvent.stopPropagation(ev)
         })
@@ -79,30 +114,6 @@ L.control.currentLocation = function (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 }
-            )
-        }
-    });
-
 
 map.on('click', (e) => {
     if (targetLocationMarker) {