mapcomplete/Logic/Leaflet/GeoLocationHandler.ts

142 lines
4.4 KiB
TypeScript
Raw Normal View History

import * as L from "leaflet";
import {UIEventSource} from "../UIEventSource";
2020-07-30 00:59:08 +02:00
import {UIElement} from "../../UI/UIElement";
import State from "../../State";
2020-07-31 04:58:58 +02:00
import {Utils} from "../../Utils";
import {Basemap} from "./Basemap";
2020-11-05 12:28:02 +01:00
import Svg from "../../Svg";
import {Img} from "../../UI/Img";
export class GeoLocationHandler extends UIElement {
private readonly _isActive: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private readonly _permission: UIEventSource<string> = new UIEventSource<string>("");
private _marker: any;
private readonly _hasLocation: UIEventSource<boolean>;
constructor() {
super(undefined);
this._hasLocation = State.state.currentGPSLocation.map((location) => location !== undefined);
this.ListenTo(this._hasLocation);
this.ListenTo(this._isActive);
2020-06-28 23:33:48 +02:00
this.ListenTo(this._permission);
const self = this;
function onAccuratePositionProgress(e) {
State.state.currentGPSLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
}
function onAccuratePositionFound(e) {
State.state.currentGPSLocation.setData({latlng: e.latlng, accuracy: e.accuracy});
}
function onAccuratePositionError(e) {
console.log("onerror", e.message);
}
const bm : Basemap = State.state.bm;
const map = bm.map;
map.on('accuratepositionprogress', onAccuratePositionProgress);
map.on('accuratepositionfound', onAccuratePositionFound);
map.on('accuratepositionerror', onAccuratePositionError);
2020-11-17 02:22:48 +01:00
State.state.currentGPSLocation.addCallback((location) => {
2020-11-17 02:22:48 +01:00
const color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
const icon = L.icon(
{
iconUrl: Img.AsData(Svg.crosshair.replace(/#000000/g, color)),
iconSize: [40, 40], // size of the icon
iconAnchor: [20, 20], // point of the icon which will correspond to marker's location
})
const newMarker = L.marker(location.latlng, {icon: icon});
newMarker.addTo(map);
if (self._marker !== undefined) {
map.removeLayer(self._marker);
}
self._marker = newMarker;
});
2020-07-29 20:55:25 +02:00
navigator?.permissions?.query({name: 'geolocation'})
?.then(function (status) {
2020-06-28 23:33:48 +02:00
console.log("Geolocation is already", status)
if (status.state === "granted") {
self.StartGeolocating();
}
self._permission.setData(status.state);
status.onchange = function () {
self._permission.setData(status.state);
}
});
this.HideOnEmpty(true);
}
InnerRender(): string {
if(!State.state.featureSwitchGeolocation.data){
return "";
}
if (this._hasLocation.data) {
2020-11-05 12:28:02 +01:00
return Svg.crosshair_blue_img;
}
if (this._isActive.data) {
2020-11-05 12:28:02 +01:00
return Svg.crosshair_blue_center_img;
}
2020-11-05 12:28:02 +01:00
return Svg.crosshair_img;
}
2020-06-28 23:33:48 +02:00
private StartGeolocating() {
const self = this;
const map = State.state.bm.map;
2020-06-28 23:33:48 +02:00
if (self._permission.data === "denied") {
return "";
}
if (State.state.currentGPSLocation.data !== undefined) {
map.flyTo(State.state.currentGPSLocation.data.latlng, 18);
}
console.log("Searching location using GPS")
map.findAccuratePosition({
2020-06-28 23:33:48 +02:00
maxWait: 10000, // defaults to 10000
desiredAccuracy: 50 // defaults to 20
});
2020-06-28 23:33:48 +02:00
if (!self._isActive.data) {
self._isActive.setData(true);
2020-07-31 04:58:58 +02:00
Utils.DoEvery(60000, () => {
if (document.visibilityState !== "visible") {
console.log("Not starting gps: document not visible")
return;
}
map.findAccuratePosition({
2020-06-28 23:33:48 +02:00
maxWait: 10000, // defaults to 10000
desiredAccuracy: 50 // defaults to 20
});
})
}
}
InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
const self = this;
htmlElement.onclick = function () {
self.StartGeolocating();
}
}
}