feat: synchronize map permissoins with lockedcontent component permissons

src/components/LockedContent/templates.ts

@@ -1,4 +1,4 @@
-import { html, type TemplateResult } from "lit";
+import { html } from "lit";
 import { lockSVG, unlockSVG } from "./svg";
 
 // This template is shown when user hasn't give geolocation permission yet

src/pages/[id].astro

@@ -11,7 +11,6 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import LockedContent from "@/components/LockedContent";
 import WebComponentWrapper from "@/components/WebComponentWrapper.astro";
 import { CalendarIcon } from "@radix-ui/react-icons";
 import { Separator } from "@/components/ui/separator";
@@ -86,5 +85,5 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
       </p>
     </div>
   </main>
-  <script src="../scripts/initMap.js"></script>
+  <script src="../scripts/initMap.ts"></script>
 </Layout>

src/scripts/initMap.js

@@ -1,161 +0,0 @@
-const data = JSON.parse(document.getElementById('map').dataset.targetLocation)
-
-const TARGET_LOCATION = data
-
-function startWatchingLocation() {
-    map.locate({ watch: true })
-}
-
-var map = L.map('map').setView(TARGET_LOCATION, 13);
-
-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);
-
-var targetLocationIcon = L.icon({
-    iconUrl: 'goal.svg',
-    iconSize: [32, 32],
-});
-
-L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
-
-var circle = L.circle(TARGET_LOCATION, {
-    color: 'blue',
-    fillColor: '#30f',
-    fillOpacity: 0.2,
-    radius: 50
-}).addTo(map);
-
-var currentLocationIcon = L.icon({
-    iconUrl: 'blue-dot.png',
-    iconSize: [32, 32],
-});
-
-let currentLocationMarker;
-
-function onLocationError(err) {
-    let errorMessage;
-    switch (err.code) {
-        case 1:
-            errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.'
-            break;
-        case 2:
-            errorMessage = 'Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.'
-            break;
-        case 3:
-            errorMessage = 'Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.'
-            break;
-        default:
-            errorMessage = 'Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.'
-            break;
-    }
-    // @ts-ignore
-    Toastify({
-        text: errorMessage,
-        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(currentPos);
-    } else {
-        currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
-        currentLocationMarker.addTo(map);
-    }
-}
-
-map.on('locationerror', onLocationError);
-
-map.on('locationfound', onLocationSuccess)
-
-
-L.Control.GoToCurrentLocation = L.Control.extend({
-    onAdd: function (map) {
-        const locationButton = document.createElement('button');
-
-        locationButton.textContent = 'Konum İzni Ver';
-
-        locationButton.classList.add('custom-map-control-button');
-
-        locationButton.type = 'button'
-
-        locationButton.addEventListener('click', (ev) => {
-            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)
-        })
-
-        return locationButton;
-    },
-});
-
-L.Control.GoToTargetLocation = L.Control.extend({
-    onAdd: function (map) {
-        const locationButton = document.createElement('button');
-
-        locationButton.textContent = 'Hedefe Git';
-
-        locationButton.classList.add('custom-map-control-button');
-
-        locationButton.addEventListener('click', () => {
-            map.setView(TARGET_LOCATION, 18);
-        });
-
-        return locationButton;
-    }
-});
-
-L.control.currentLocation = function (opts) {
-    return new L.Control.GoToCurrentLocation(opts);
-};
-
-L.control.targetLocation = function (opts) {
-    return new L.Control.GoToTargetLocation(opts);
-};
-
-L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
-
-L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
-

src/scripts/initMap.ts

@@ -0,0 +1,230 @@
+import L from "leaflet";
+
+const mapEl = document.getElementById("map");
+
+var targetLocationIcon = L.icon({
+  iconUrl: "goal.svg",
+  iconSize: [32, 32],
+});
+
+var currentLocationIcon = L.icon({
+  iconUrl: "blue-dot.png",
+  iconSize: [32, 32],
+});
+
+const targetLocation = mapEl?.dataset.targetLocation;
+
+const data = JSON.parse(targetLocation ?? "{}");
+const TARGET_LOCATION = data;
+
+var map = L.map("map").setView(TARGET_LOCATION, 13);
+
+L.marker(TARGET_LOCATION, { icon: targetLocationIcon }).addTo(map);
+
+L.circle(TARGET_LOCATION, {
+  color: "blue",
+  fillColor: "#30f",
+  fillOpacity: 0.2,
+  radius: 50,
+}).addTo(map);
+
+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);
+
+map.on("locationerror", onLocationError);
+
+map.on("locationfound", onLocationSuccess);
+
+let currentLocationMarker: L.Marker;
+
+function onLocationError(err: L.ErrorEvent) {
+  let errorMessage;
+  switch (err.code) {
+    case 1:
+      errorMessage =
+        "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
+      break;
+    case 2:
+      errorMessage =
+        "Konumunuz tespit edilemedi, lütfen biraz sonra tekrar deneyiniz.";
+      break;
+    case 3:
+      errorMessage =
+        "Konum isteği zaman aşımına uğradı, lütfen sayfayı yenileyip tekrar deneyiniz.";
+      break;
+    default:
+      errorMessage =
+        "Konum izni alınamadı, lütfen tarayıcınızın ve cihazınızın gizlilik ayarlarını kontrol edin.";
+      break;
+  }
+  // @ts-ignore
+  Toastify({
+    text: errorMessage,
+    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: L.LocationEvent) {
+  const position = locationEvent.latlng;
+
+  const currentPos = {
+    lat: position.lat,
+    lng: position.lng,
+  };
+
+  if (currentLocationMarker) {
+    currentLocationMarker.setLatLng(currentPos);
+  } else {
+    currentLocationMarker = L.marker(currentPos, { icon: currentLocationIcon });
+    currentLocationMarker.addTo(map);
+  }
+}
+
+// @ts-ignore L.Control allows extensions
+L.Control.AskPermisson = L.Control.extend({
+  onAdd: function () {
+    const locationButton = document.createElement("button");
+
+    locationButton.textContent = "Konum İzni Ver";
+
+    locationButton.classList.add("custom-map-control-button");
+
+    locationButton.type = "button";
+
+    locationButton.addEventListener("click", (ev) => {
+      startWatchingLocation();
+      locationButton.textContent = "Konumuma Git";
+      L.DomEvent.stopPropagation(ev);
+    });
+
+    return locationButton;
+  },
+});
+
+// @ts-ignore L.Control allows extensions
+L.Control.CurrentLocation = L.Control.extend({
+  onAdd: function (map: L.Map) {
+    const locationButton = document.createElement("button");
+
+    locationButton.textContent = "Konumuma Git";
+
+    locationButton.classList.add("custom-map-control-button");
+
+    locationButton.type = "button";
+
+    locationButton.addEventListener("click", (ev) => {
+      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);
+    });
+
+    return locationButton;
+  },
+});
+
+// @ts-ignore L.Control allows extensions
+L.Control.GoToTargetLocation = L.Control.extend({
+  onAdd: function (map: L.Map) {
+    const locationButton = document.createElement("button");
+
+    locationButton.textContent = "Hedefe Git";
+
+    locationButton.classList.add("custom-map-control-button");
+
+    locationButton.addEventListener("click", () => {
+      map.setView(TARGET_LOCATION, 18);
+    });
+
+    return locationButton;
+  },
+});
+
+// @ts-ignore L.Control allows extensions
+L.control.askPermission = function (opts) {
+  // @ts-ignore L.Control allows extensions
+  return new L.Control.AskPermisson(opts);
+};
+
+// @ts-ignore L.Control allows extensions
+L.control.goToCurrentLocation = function (opts) {
+  // @ts-ignore L.Control allows extensions
+  return new L.Control.CurrentLocation(opts);
+};
+
+// @ts-ignore L.Control allows extensions
+L.control.targetLocation = function (opts) {
+  // @ts-ignore L.Control allows extensions
+  return new L.Control.GoToTargetLocation(opts);
+};
+
+// @ts-ignore L.Control allows extensions
+const goToCurrentLocationControl = L.control.goToCurrentLocation({
+  position: "bottomleft",
+});
+
+// @ts-ignore L.Control allows extensions
+const askPermissionControl = L.control.askPermission({
+  position: "bottomleft",
+});
+
+// @ts-ignore L.Control allows extensions
+const targetLocationControl = L.control.targetLocation({
+  position: "bottomleft",
+});
+
+function startWatchingLocation() {
+  goToCurrentLocationControl.addTo(map);
+  askPermissionControl.remove();
+  map.locate({ watch: true });
+}
+
+function initLocationControls() {
+  targetLocationControl.addTo(map);
+  // Check geolocation permission, if user has given permission before
+  // start watching user location
+  navigator.permissions
+    .query({ name: "geolocation" })
+    .then((permissionStatus) => {
+      switch (permissionStatus.state) {
+        case "granted":
+          startWatchingLocation();
+          break;
+        case "denied":
+        case "prompt":
+          askPermissionControl.addTo(map);
+        default:
+          break;
+      }
+    });
+}
+
+initLocationControls();

src/scripts/initSelectionMap.js

@@ -48,7 +48,7 @@ map.on('locationerror', onLocationError);
 
 map.on('locationfound', onLocationSuccess)
 
-L.Control.GoToCurrentLocation = L.Control.extend({
+L.Control.AskPermisson = L.Control.extend({
     onAdd: function (map) {
         const locationButton = document.createElement('button');
 
@@ -90,11 +90,11 @@ L.Control.GoToCurrentLocation = L.Control.extend({
     },
 });
 
-L.control.currentLocation = function (opts) {
+L.control.askPermission = function (opts) {
-    return new L.Control.GoToCurrentLocation(opts);
+    return new L.Control.AskPermisson(opts);
 };
 
-L.control.currentLocation({ position: 'bottomleft' }).addTo(map);
+L.control.askPermission({ position: 'bottomleft' }).addTo(map);
 
 
 map.on('click', (e) => {