feat: update geolocation from body

src/components/LeafletMap/controls.ts

@@ -43,6 +43,7 @@ const GeolocationControl = L.Control.extend({
     locationButton.type = "button";
 
     L.DomEvent.on(locationButton, "click", () => {
+      console.log(this._currentLocationMarker);
       if (this._currentLocationMarker) {
         map.setView(this._currentLocationMarker.getLatLng(), 12);
       }

src/components/leaflet-map.ts

@@ -11,7 +11,7 @@ import { customElement, property, query, state } from "lit/decorators.js";
 // Leaflet
 import L, { Map } from "leaflet";
 import type { LatLngTuple } from "leaflet";
-import { targetLocationIcon } from "./LeafletMap/icons";
+import { currentLocationIcon, targetLocationIcon } from "./LeafletMap/icons";
 import { GeolocationControl, GoToTargetControl } from "./LeafletMap/controls";
 
 // Styles
@@ -39,7 +39,7 @@ export class LeafletMap extends LitElement {
   _askPermissionButton!: HTMLButtonElement;
 
   // Properties and states
-  @property({ type: Object, noAccessor: true }) targetLocation?: LatLngTuple;
+  @property({ type: Object, noAccessor: true }) targetPosition?: LatLngTuple;
   @property({ type: Object })
   currentPosition?: LatLngTuple;
 
@@ -49,8 +49,8 @@ export class LeafletMap extends LitElement {
   protected _currentLocationMarker?: L.Marker;
 
   firstUpdated(): void {
-    if (!this._mapElement || !this.targetLocation) return;
+    if (!this._mapElement || !this.targetPosition) return;
-    this._map = new Map(this._mapElement).setView(this.targetLocation, 13);
+    this._map = new Map(this._mapElement).setView(this.targetPosition, 13);
 
     L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
       maxZoom: 19,
@@ -59,11 +59,11 @@ export class LeafletMap extends LitElement {
     }).addTo(this._map);
 
     // Add target location icon marker
-    L.marker(this.targetLocation, { icon: targetLocationIcon }).addTo(
+    L.marker(this.targetPosition, { icon: targetLocationIcon }).addTo(
       this._map
     );
 
-    L.circle(this.targetLocation, {
+    L.circle(this.targetPosition, {
       color: "blue",
       fillColor: "#30f",
       fillOpacity: 0.2,
@@ -75,23 +75,30 @@ export class LeafletMap extends LitElement {
       position: "bottomleft",
     });
 
-    targetLocationControl.setTargetLocation(this.targetLocation);
+    targetLocationControl.setTargetLocation(this.targetPosition);
     targetLocationControl.addTo(this._map);
-
-    const currentLocationControl = new GeolocationControl({
-      position: "bottomleft",
-    });
-
-    currentLocationControl.setCurrentLocationMarker(
-      this._currentLocationMarker
-    );
-    currentLocationControl.addTo(this._map);
   }
 
   protected update(changedProperties: PropertyValues): void {
     super.update(changedProperties);
     if (changedProperties.get("currentPosition")) {
-      this._currentLocationMarker?.setLatLng(this.currentPosition!);
+      if (!this._currentLocationMarker && this._map) {
+        this._currentLocationMarker = L.marker(this.currentPosition!, {
+          icon: currentLocationIcon,
+        });
+        this._currentLocationMarker.addTo(this._map);
+
+        const geolocationControl = new GeolocationControl({
+          position: "bottomleft",
+        });
+
+        geolocationControl.setCurrentLocationMarker(
+          this._currentLocationMarker
+        );
+        geolocationControl.addTo(this._map);
+      } else if (this._currentLocationMarker) {
+        this._currentLocationMarker.setLatLng(this.currentPosition!);
+      }
     }
   }
 

src/components/locked-content.ts

@@ -72,10 +72,15 @@ export class LockedContent extends LitElement {
     }
   }
 
+  private _dispatchAskPermissionEvent() {
+    const event = new Event("askpermission");
+    this.dispatchEvent(event);
+  }
+
   // This template is shown when user hasn't give geolocation permission yet
   // When user click the button user is asked for geolocation permission
   private _permissionButtonTemplate = () =>
-    permissionButtonTemplate(() => null);
+    permissionButtonTemplate(this._dispatchAskPermissionEvent);
 
   // This template is shown when user has given permission but has not arrived yet
   private _lockedButtonTemplate = () => {
@@ -113,8 +118,8 @@ export class LockedContent extends LitElement {
     let buttonTemplate;
 
     // Determine which template to show, there are 3 states:
-    // 1 - No geolocation permission given
+    // 1 - No current location provided
-    // 2 - Permission given but has no arrived to target position yet
+    // 2 - Current location given but has no arrived to target position yet
     // 3 - Arrived to target position
     // 4 - User did not give geolocation permission
     if (this._arrived) {

src/pages/[id].astro

@@ -65,11 +65,13 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
     </Card>
 
     <locked-content
+      id="locked-content-component"
       imageId={data?.url}
       imageURL={`http://localhost:3000/images/${data?.blob_url}`}
       targetPosition={data?.loc}></locked-content>
 
-    <leaflet-map targetLocation={data?.loc}></leaflet-map>
+    <leaflet-map id="leaflet-map-component" targetPosition={data?.loc}
+    ></leaflet-map>
 
     <ShareButton client:only />
     <div class="flex justify-center">
@@ -78,7 +80,43 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());
       </p>
     </div>
   </main>
-  <!-- <script src="../scripts/initMap.ts"></script> -->
+  <script>
+    function updateCurrentLocation(position: GeolocationPosition) {
+      const lockedContent = document.getElementById("locked-content-component");
+      if (lockedContent) {
+        lockedContent.setAttribute(
+          "currentPosition",
+          `[${position.coords.latitude}, ${position.coords.longitude}]`
+        );
+      }
+
+      const leafletMap = document.getElementById("leaflet-map-component");
+      if (leafletMap) {
+        leafletMap.setAttribute(
+          "currentPosition",
+          `[${position.coords.latitude}, ${position.coords.longitude}]`
+        );
+      }
+    }
+
+    navigator.permissions
+      .query({ name: "geolocation" })
+      .then((permissionStatus) => {
+        switch (permissionStatus.state) {
+          case "granted":
+            window.navigator.geolocation.watchPosition(updateCurrentLocation);
+            break;
+          case "denied":
+          case "prompt":
+          default:
+            break;
+        }
+      });
+
+    window.addEventListener("askpermission", () => {
+      console.log("ask permission");
+    });
+  </script>
   <script src="../components/locked-content.ts"></script>
   <script src="../components/leaflet-map.ts"></script>
 </Layout>