feat: add location tracking on maps

package-lock.json

@@ -2319,9 +2319,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001576",
+      "version": "1.0.30001580",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001576.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001580.tgz",
-      "integrity": "sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==",
+      "integrity": "sha512-mtj5ur2FFPZcCEpXFy8ADXbDACuNFXg6mxVDqp7tqooX6l3zwm+d8EPoeOSIFRDvHs8qu7/SLFOGniULkcH2iA==",
       "funding": [
         {
           "type": "opencollective",

src/layouts/Layout.astro

@@ -15,6 +15,11 @@
       integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
       crossorigin=""
     />
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"
+    />
     <script
       is:inline
       src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"

src/pages/api/content.ts

@@ -44,13 +44,13 @@ export const POST: APIRoute = async ({ request }) => {
       description: description?.toString() ?? "",
       loc: `SRID=4326;POINT(${pos[0]} ${pos[1]})`
     })
-    .returning("blob_url")
+    .returning("url")
     .executeTakeFirst()
 
-  if (res?.blob_url) {
+  if (res?.url) {
     return new Response(
       JSON.stringify({
-        message: "Succesfully added content"
+        url: res.url
       })
     )
   } else {

src/pages/index.astro

@@ -111,6 +111,8 @@ import { ReloadIcon } from '@radix-ui/react-icons';
     </form>
   </main>
   <script src="../scripts/initSelectionMap.js"></script>
+  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"
+  ></script>
 </Layout>
 
 <script>
@@ -129,13 +131,34 @@ import { ReloadIcon } from '@radix-ui/react-icons';
 
     const formData = new FormData(e.target as HTMLFormElement);
 
-    await fetch(`/api/content`, {
+    const res = await fetch(`/api/content`, {
       method: 'POST',
       body: formData,
     });
 
     reloadIcon.classList.toggle('hidden');
     submitButton.disabled = false;
+
+    if (res.status === 200) {
+      const data = await res.json();
+
+      if (data.url) location.assign('/' + data.url);
+    } else {
+      // @ts-ignore
+      Toastify({
+        text: 'Konulu konum oluşturulamadı, lütfen tekrar deneyin.',
+        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();
+    }
   };
 
   document.getElementById('sample-form')!.onsubmit = handleSubmit;

src/scripts/initMap.js

@@ -2,6 +2,27 @@ const data = JSON.parse(document.getElementById('map').dataset.targetLocation)
 
 const TARGET_LOCATION = data.coordinates
 
+let watchId = -1;
+function startWatchingLocation() {
+    watchId = 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 }
+    )
+}
+
 var map = L.map('map').setView(TARGET_LOCATION, 13);
 
 L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -48,7 +69,12 @@ L.Control.GoToCurrentLocation = L.Control.extend({
         locationButton.name = 'select-location-button'
 
         locationButton.addEventListener('click', () => {
-            map.setView(currentLocationMarker.getLatLng(), 18);
+            if (watchId === -1) {
+                startWatchingLocation()
+                map.setView(currentLocationMarker.getLatLng(), 12);
+            } else {
+                map.setView(currentLocationMarker.getLatLng(), 12);
+            }
         });
 
         return locationButton;
@@ -91,48 +117,3 @@ L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
 
 L.control.targetLocation({ 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 }
-                    )
-                }
-            };
-        }
-    });