122 lines
3.6 KiB
TypeScript
122 lines
3.6 KiB
TypeScript
// Lit
|
|
import { html, LitElement, unsafeCSS, type CSSResultGroup } from "lit";
|
|
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 { GeolocationControl, GoToTargetControl } from "./LeafletMap/controls";
|
|
|
|
// Styles
|
|
import leafletStyles from "leaflet/dist/leaflet.css?inline";
|
|
import globalStyles from "@/styles/globals.css?inline";
|
|
import mapStyles from "@/styles/locked-page.css?inline";
|
|
import { onLocationError, onLocationSuccess } from "./LeafletMap/geolocation";
|
|
|
|
@customElement("leaflet-map")
|
|
export class LeafletMap extends LitElement {
|
|
// Styles
|
|
static styles?: CSSResultGroup | undefined = [
|
|
unsafeCSS(leafletStyles),
|
|
unsafeCSS(globalStyles),
|
|
unsafeCSS(mapStyles),
|
|
];
|
|
|
|
// Div element to initialize Leaflet in
|
|
@query("#mapid")
|
|
_mapElement!: HTMLDivElement;
|
|
|
|
@query("#go-to-target-control-button")
|
|
_goToTargetButton!: HTMLButtonElement;
|
|
|
|
@query("#ask-permission-control-button")
|
|
_askPermissionButton!: HTMLButtonElement;
|
|
|
|
// Properties and states
|
|
@property({ type: Object }) targetLocation?: LatLngTuple;
|
|
|
|
@state()
|
|
protected _map?: L.Map;
|
|
@state()
|
|
protected _geolocationPermissionStatus: PermissionState = "prompt";
|
|
@state()
|
|
protected _currentLocationMarker?: L.Marker;
|
|
@state()
|
|
protected _watchingLocation = false;
|
|
|
|
firstUpdated(): void {
|
|
if (!this._mapElement || !this.targetLocation) return;
|
|
this._map = new Map(this._mapElement).setView(this.targetLocation, 13);
|
|
|
|
this._map.on("locationerror", onLocationError);
|
|
|
|
this._map.on("locationfound", (ev) =>
|
|
onLocationSuccess(ev, this._map!, this._currentLocationMarker)
|
|
);
|
|
|
|
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
maxZoom: 19,
|
|
attribution:
|
|
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
|
|
}).addTo(this._map);
|
|
|
|
// Add target location icon marker
|
|
L.marker(this.targetLocation, { icon: targetLocationIcon }).addTo(
|
|
this._map
|
|
);
|
|
|
|
L.circle(this.targetLocation, {
|
|
color: "blue",
|
|
fillColor: "#30f",
|
|
fillOpacity: 0.2,
|
|
radius: 50,
|
|
}).addTo(this._map);
|
|
|
|
// Add target location control
|
|
const targetLocationControl = new GoToTargetControl({
|
|
position: "bottomleft",
|
|
});
|
|
|
|
targetLocationControl.setTargetLocation(this.targetLocation);
|
|
targetLocationControl.addTo(this._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":
|
|
this._geolocationPermissionStatus = "granted";
|
|
const locateUserControl = new GeolocationControl({
|
|
// @ts-expect-error
|
|
title: "Konumuma Git",
|
|
position: "bottomleft",
|
|
});
|
|
locateUserControl.setCurrentLocationMarker(
|
|
this._currentLocationMarker
|
|
);
|
|
locateUserControl.addTo(this._map!);
|
|
break;
|
|
case "denied":
|
|
this._geolocationPermissionStatus = "denied";
|
|
break;
|
|
case "prompt":
|
|
const askPermissionControl = new GeolocationControl({
|
|
position: "bottomleft",
|
|
});
|
|
|
|
askPermissionControl.addTo(this._map!);
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
}
|
|
|
|
render() {
|
|
return html`<div id="mapid" class="w-full h-[450px] rounded"></div>`;
|
|
}
|
|
}
|