diff --git a/src/components/LeafletMap/controls.ts b/src/components/LeafletMap/controls.ts
index 2b5d6ea..af3a1cc 100644
--- a/src/components/LeafletMap/controls.ts
+++ b/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);
}
diff --git a/src/components/leaflet-map.ts b/src/components/leaflet-map.ts
index 3fbcd6a..0819bef 100644
--- a/src/components/leaflet-map.ts
+++ b/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;
- this._map = new Map(this._mapElement).setView(this.targetLocation, 13);
+ if (!this._mapElement || !this.targetPosition) return;
+ 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!);
+ }
}
}
diff --git a/src/components/locked-content.ts b/src/components/locked-content.ts
index 2c1ff40..d0a1d81 100644
--- a/src/components/locked-content.ts
+++ b/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
- // 2 - Permission given but has no arrived to target position yet
+ // 1 - No current location provided
+ // 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) {
diff --git a/src/pages/[id].astro b/src/pages/[id].astro
index 6eeb904..59da5fb 100644
--- a/src/pages/[id].astro
+++ b/src/pages/[id].astro
@@ -65,11 +65,13 @@ const dateFromNow = dayjs.utc(data?.created_at).from(dayjs.utc());