elgaard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

working location button

Browse source
This commit is contained in:
Ward 2021-07-13 14:39:50 +02:00
parent 4276d4a47d
commit ca1871262e
1 changed files with 222 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

431
Logic/Actors/GeoLocationHandler.ts
View file

@ -1,244 +1,255 @@
import * as L from "leaflet"; import * as L from "leaflet";
import {UIEventSource} from "../UIEventSource"; import { UIEventSource } from "../UIEventSource";
import {Utils} from "../../Utils"; import { Utils } from "../../Utils";
import Svg from "../../Svg"; import Svg from "../../Svg";
import Img from "../../UI/Base/Img"; import Img from "../../UI/Base/Img";
import {LocalStorageSource} from "../Web/LocalStorageSource"; import { LocalStorageSource } from "../Web/LocalStorageSource";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig"; import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import {VariableUiElement} from "../../UI/Base/VariableUIElement"; import { VariableUiElement } from "../../UI/Base/VariableUIElement";
export default class GeoLocationHandler extends VariableUiElement { export default class GeoLocationHandler extends VariableUiElement {
/**
* Wether or not the geolocation is active, aka the user requested the current location
* @private
*/
private readonly _isActive: UIEventSource<boolean>;
/** /**
* Wether or not the geolocation is active, aka the user requested the current location * Wether or not the geolocation is locked, aka the user requested the current location and wants the crosshair to follow the user
* @private * @private
*/ */
private readonly _isActive: UIEventSource<boolean>; private readonly _isLocked: UIEventSource<boolean>;
/** /**
* The callback over the permission API * The callback over the permission API
* @private * @private
*/ */
private readonly _permission: UIEventSource<string>; private readonly _permission: UIEventSource<string>;
/*** /***
* The marker on the map, in order to update it * The marker on the map, in order to update it
* @private * @private
*/ */
private _marker: L.Marker; private _marker: L.Marker;
/** /**
* Literally: _currentGPSLocation.data != undefined * Literally: _currentGPSLocation.data != undefined
* @private * @private
*/ */
private readonly _hasLocation: UIEventSource<boolean>; private readonly _hasLocation: UIEventSource<boolean>;
private readonly _currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>; private readonly _currentGPSLocation: UIEventSource<{
/** latlng: any;
* Kept in order to update the marker accuracy: number;
* @private }>;
*/ /**
private readonly _leafletMap: UIEventSource<L.Map>; * Kept in order to update the marker
/** * @private
* The date when the user requested the geolocation. If we have a location, it'll autozoom to it the first 30 secs */
* @private private readonly _leafletMap: UIEventSource<L.Map>;
*/ /**
private _lastUserRequest: Date; * The date when the user requested the geolocation. If we have a location, it'll autozoom to it the first 30 secs
/** * @private
* A small flag on localstorage. If the user previously granted the geolocation, it will be set. */
* On firefox, the permissions api is broken (probably fingerprint resistiance) and "granted + don't ask again" doesn't stick between sessions. private _lastUserRequest: Date;
* /**
* Instead, we set this flag. If this flag is set upon loading the page, we start geolocating immediately. * A small flag on localstorage. If the user previously granted the geolocation, it will be set.
* If the user denies the geolocation this time, we unset this flag * On firefox, the permissions api is broken (probably fingerprint resistiance) and "granted + don't ask again" doesn't stick between sessions.
* @private *
*/ * Instead, we set this flag. If this flag is set upon loading the page, we start geolocating immediately.
private readonly _previousLocationGrant: UIEventSource<string>; * If the user denies the geolocation this time, we unset this flag
private readonly _layoutToUse: UIEventSource<LayoutConfig>; * @private
*/
private readonly _previousLocationGrant: UIEventSource<string>;
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
constructor(
currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>,
leafletMap: UIEventSource<L.Map>,
layoutToUse: UIEventSource<LayoutConfig>
) {
const hasLocation = currentGPSLocation.map(
(location) => location !== undefined
);
const previousLocationGrant = LocalStorageSource.Get(
"geolocation-permissions"
);
const isActive = new UIEventSource<boolean>(false);
constructor(currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>, super(
leafletMap: UIEventSource<L.Map>, hasLocation.map(
layoutToUse: UIEventSource<LayoutConfig>) { (hasLocation) => {
if (hasLocation) {
return Svg.crosshair_blue_ui();
}
if (isActive.data) {
return Svg.crosshair_blue_center_ui();
}
return Svg.crosshair_ui();
},
[isActive]
)
);
this._isActive = isActive;
this._isLocked = new UIEventSource<boolean>(false);
this._permission = new UIEventSource<string>("");
this._previousLocationGrant = previousLocationGrant;
this._currentGPSLocation = currentGPSLocation;
this._leafletMap = leafletMap;
this._layoutToUse = layoutToUse;
this._hasLocation = hasLocation;
const self = this;
const hasLocation = currentGPSLocation.map((location) => location !== undefined); const currentPointer = this._isActive.map(
const previousLocationGrant = LocalStorageSource.Get("geolocation-permissions") (isActive) => {
const isActive = new UIEventSource<boolean>(false); if (isActive && !self._hasLocation.data) {
return "cursor-wait";
}
return "cursor-pointer";
},
[this._hasLocation]
);
currentPointer.addCallbackAndRun((pointerClass) => {
self.SetClass(pointerClass);
});
super( this.onClick(() => self.init(true));
hasLocation.map(hasLocation => { this.init(false);
if (hasLocation) { this._currentGPSLocation.addCallback((location) => {
return Svg.crosshair_blue_ui() self._previousLocationGrant.setData("granted");
}
if (isActive.data) { const timeSinceRequest =
return Svg.crosshair_blue_center_ui(); (new Date().getTime() - (self._lastUserRequest?.getTime() ?? 0)) / 1000;
} if (timeSinceRequest < 30) {
return Svg.crosshair_ui(); self.MoveToCurrentLoction(16);
}, [isActive]) } else if (self._isLocked.data) {
self.MoveToCurrentLoction();
}
let color = "#1111cc";
try {
color = getComputedStyle(document.body).getPropertyValue(
"--catch-detail-color"
); );
this._isActive = isActive; } catch (e) {
this._permission = new UIEventSource<string>("") console.error(e);
this._previousLocationGrant = previousLocationGrant; }
this._currentGPSLocation = currentGPSLocation; const icon = L.icon({
this._leafletMap = leafletMap; iconUrl: Img.AsData(Svg.crosshair.replace(/#000000/g, color)),
this._layoutToUse = layoutToUse; iconSize: [40, 40], // size of the icon
this._hasLocation = hasLocation; iconAnchor: [20, 20], // point of the icon which will correspond to marker's location
const self = this; });
const currentPointer = this._isActive.map(isActive => { const map = self._leafletMap.data;
if (isActive && !self._hasLocation.data) { console.log("check for map", map);
return "cursor-wait"
}
return "cursor-pointer"
}, [this._hasLocation])
currentPointer.addCallbackAndRun(pointerClass => {
self.SetClass(pointerClass);
})
const newMarker = L.marker(location.latlng, { icon: icon });
newMarker.addTo(map);
this.onClick(() => self.init(true)) if (self._marker !== undefined) {
this.init(false) map.removeLayer(self._marker);
}
self._marker = newMarker;
});
}
private init(askPermission: boolean) {
const self = this;
if (self._isActive.data) {
self.MoveToCurrentLoction(16);
return;
} }
private init(askPermission: boolean) { try {
navigator?.permissions
const self = this; ?.query({ name: "geolocation" })
const map = this._leafletMap.data; ?.then(function (status) {
console.log("Geolocation is already", status);
this._currentGPSLocation.addCallback((location) => { if (status.state === "granted") {
self._previousLocationGrant.setData("granted");
const timeSinceRequest = (new Date().getTime() - (self._lastUserRequest?.getTime() ?? 0)) / 1000;
if (timeSinceRequest < 30) {
self.MoveToCurrentLoction(16)
}
let color = "#1111cc";
try {
color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
} catch (e) {
console.error(e)
}
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;
});
try {
navigator?.permissions?.query({name: 'geolocation'})
?.then(function (status) {
console.log("Geolocation is already", status)
if (status.state === "granted") {
self.StartGeolocating(false);
}
self._permission.setData(status.state);
status.onchange = function () {
self._permission.setData(status.state);
}
});
} catch (e) {
console.error(e)
}
if (askPermission) {
self.StartGeolocating(true);
} else if (this._previousLocationGrant.data === "granted") {
this._previousLocationGrant.setData("");
self.StartGeolocating(false); self.StartGeolocating(false);
} }
self._permission.setData(status.state);
status.onchange = function () {
self._permission.setData(status.state);
};
});
} catch (e) {
console.error(e);
} }
private locate() { if (askPermission) {
const self = this; self.StartGeolocating(true);
const map: any = this._leafletMap.data; } else if (this._previousLocationGrant.data === "granted") {
this._previousLocationGrant.setData("");
self.StartGeolocating(false);
}
}
if (navigator.geolocation) { private MoveToCurrentLoction(targetZoom?: number) {
navigator.geolocation.getCurrentPosition(function (position) { const location = this._currentGPSLocation.data;
self._currentGPSLocation.setData({ this._lastUserRequest = undefined;
latlng: [position.coords.latitude, position.coords.longitude],
accuracy: position.coords.accuracy if (
}); this._currentGPSLocation.data.latlng[0] === 0 &&
}, function () { this._currentGPSLocation.data.latlng[1] === 0
console.warn("Could not get location with navigator.geolocation") ) {
}); console.debug("Not moving to GPS-location: it is null island");
return; return;
} else {
map.findAccuratePosition({
maxWait: 10000, // defaults to 10000
desiredAccuracy: 50 // defaults to 20
});
}
} }
private MoveToCurrentLoction(targetZoom = 16) { // We check that the GPS location is not out of bounds
const location = this._currentGPSLocation.data; const b = this._layoutToUse.data.lockLocation;
this._lastUserRequest = undefined; let inRange = true;
if (b) {
if (b !== true) {
// B is an array with our locklocation
inRange =
b[0][0] <= location.latlng[0] &&
location.latlng[0] <= b[1][0] &&
b[0][1] <= location.latlng[1] &&
location.latlng[1] <= b[1][1];
}
}
if (!inRange) {
console.log(
"Not zooming to GPS location: out of bounds",
b,
location.latlng
);
} else {
this._leafletMap.data.setView(location.latlng, targetZoom);
}
}
private StartGeolocating(zoomToGPS = true) {
const self = this;
console.log("Starting geolocation");
if (this._currentGPSLocation.data.latlng[0] === 0 && this._currentGPSLocation.data.latlng[1] === 0) { this._lastUserRequest = zoomToGPS ? new Date() : new Date(0);
console.debug("Not moving to GPS-location: it is null island") if (self._permission.data === "denied") {
return; self._previousLocationGrant.setData("");
} return "";
}
// We check that the GPS location is not out of bounds if (this._currentGPSLocation.data !== undefined) {
const b = this._layoutToUse.data.lockLocation this.MoveToCurrentLoction(16);
let inRange = true;
if (b) {
if (b !== true) {
// B is an array with our locklocation
inRange = b[0][0] <= location.latlng[0] && location.latlng[0] <= b[1][0] &&
b[0][1] <= location.latlng[1] && location.latlng[1] <= b[1][1];
}
}
if (!inRange) {
console.log("Not zooming to GPS location: out of bounds", b, location.latlng)
} else {
this._leafletMap.data.setView(
location.latlng, targetZoom
);
}
} }
private StartGeolocating(zoomToGPS = true) { console.log("Searching location using GPS");
const self = this;
console.log("Starting geolocation")
this._lastUserRequest = zoomToGPS ? new Date() : new Date(0); if (self._isActive.data) {
if (self._permission.data === "denied") { return;
self._previousLocationGrant.setData("");
return "";
}
if (this._currentGPSLocation.data !== undefined) {
this.MoveToCurrentLoction(16)
}
console.log("Searching location using GPS")
this.locate();
if (!self._isActive.data) {
self._isActive.setData(true);
Utils.DoEvery(60000, () => {
if (document.visibilityState !== "visible") {
console.log("Not starting gps: document not visible")
return;
}
this.locate();
})
}
} }
self._isActive.setData(true);
navigator.geolocation.watchPosition(
function (position) {
self._currentGPSLocation.setData({
latlng: [position.coords.latitude, position.coords.longitude],
accuracy: position.coords.accuracy,
});
},
function () {
console.warn("Could not get location with navigator.geolocation");
}
);
}
} }