forked from MapComplete/MapComplete
Small tweaks
This commit is contained in:
parent
0c999ed11d
commit
85fa3886aa
4 changed files with 161 additions and 148 deletions
|
|
@ -74,6 +74,33 @@ export default class GeoLocationHandler extends UIElement {
|
|||
})
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
if (this._hasLocation.data) {
|
||||
return Svg.crosshair_blue_img;
|
||||
}
|
||||
if (this._isActive.data) {
|
||||
return Svg.crosshair_blue_center_img;
|
||||
}
|
||||
|
||||
return Svg.crosshair_img;
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
super.InnerUpdate(htmlElement);
|
||||
|
||||
const self = this;
|
||||
htmlElement.onclick = function () {
|
||||
self.StartGeolocating(19);
|
||||
}
|
||||
|
||||
htmlElement.oncontextmenu = function (e) {
|
||||
self.StartGeolocating(15);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private init() {
|
||||
this.ListenTo(this._hasLocation);
|
||||
this.ListenTo(this._isActive);
|
||||
|
|
@ -111,7 +138,12 @@ export default class GeoLocationHandler extends UIElement {
|
|||
);
|
||||
}
|
||||
|
||||
const color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
|
||||
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)),
|
||||
|
|
@ -128,6 +160,8 @@ export default class GeoLocationHandler extends UIElement {
|
|||
self._marker = newMarker;
|
||||
});
|
||||
|
||||
try {
|
||||
|
||||
navigator?.permissions?.query({name: 'geolocation'})
|
||||
?.then(function (status) {
|
||||
console.log("Geolocation is already", status)
|
||||
|
|
@ -140,6 +174,10 @@ export default class GeoLocationHandler extends UIElement {
|
|||
}
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
self.StartGeolocating()
|
||||
}
|
||||
if (this._previousLocationGrant.data === "granted") {
|
||||
this._previousLocationGrant.setData("");
|
||||
self.StartGeolocating();
|
||||
|
|
@ -148,39 +186,33 @@ export default class GeoLocationHandler extends UIElement {
|
|||
this.HideOnEmpty(true);
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
if (this._hasLocation.data) {
|
||||
return Svg.crosshair_blue_img;
|
||||
}
|
||||
if (this._isActive.data) {
|
||||
return Svg.crosshair_blue_center_img;
|
||||
}
|
||||
|
||||
return Svg.crosshair_img;
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
super.InnerUpdate(htmlElement);
|
||||
|
||||
private locate() {
|
||||
const self = this;
|
||||
htmlElement.onclick = function () {
|
||||
self.StartGeolocating(19);
|
||||
}
|
||||
const map: any = this._leafletMap.data;
|
||||
|
||||
htmlElement.oncontextmenu = function (e) {
|
||||
self.StartGeolocating(15);
|
||||
e.preventDefault();
|
||||
return false;
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(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")
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
map.findAccuratePosition({
|
||||
maxWait: 10000, // defaults to 10000
|
||||
desiredAccuracy: 50 // defaults to 20
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
private StartGeolocating(zoomlevel = 19, zoomToGPS = true) {
|
||||
const self = this;
|
||||
console.log("Starting geolocation")
|
||||
|
||||
this._lastUserRequest = zoomToGPS ? new Date() : new Date(0);
|
||||
const map: any = this._leafletMap.data;
|
||||
if (self._permission.data === "denied") {
|
||||
self._previousLocationGrant.setData("");
|
||||
return "";
|
||||
|
|
@ -193,10 +225,7 @@ export default class GeoLocationHandler extends UIElement {
|
|||
|
||||
|
||||
console.log("Searching location using GPS")
|
||||
map.findAccuratePosition({
|
||||
maxWait: 10000, // defaults to 10000
|
||||
desiredAccuracy: 50 // defaults to 20
|
||||
});
|
||||
this.locate();
|
||||
|
||||
|
||||
if (!self._isActive.data) {
|
||||
|
|
@ -207,11 +236,7 @@ export default class GeoLocationHandler extends UIElement {
|
|||
console.log("Not starting gps: document not visible")
|
||||
return;
|
||||
}
|
||||
|
||||
map.findAccuratePosition({
|
||||
maxWait: 10000, // defaults to 10000
|
||||
desiredAccuracy: 50 // defaults to 20
|
||||
});
|
||||
this.locate();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { Utils } from "../Utils";
|
|||
|
||||
export default class Constants {
|
||||
|
||||
public static vNumber = "0.7.2l";
|
||||
public static vNumber = "0.7.2n";
|
||||
|
||||
// The user journey states thresholds when a new feature gets unlocked
|
||||
public static userJourney = {
|
||||
|
|
|
|||
35
Utils.ts
35
Utils.ts
|
|
@ -1,4 +1,5 @@
|
|||
import * as colors from "./assets/colors.json"
|
||||
|
||||
export class Utils {
|
||||
|
||||
/**
|
||||
|
|
@ -261,23 +262,6 @@ export class Utils {
|
|||
return result;
|
||||
}
|
||||
|
||||
private static tile2long(x, z) {
|
||||
return (x / Math.pow(2, z) * 360 - 180);
|
||||
}
|
||||
|
||||
private static tile2lat(y, z) {
|
||||
const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
|
||||
return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
|
||||
}
|
||||
|
||||
private static lon2tile(lon, zoom) {
|
||||
return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
|
||||
}
|
||||
|
||||
private static lat2tile(lat, zoom) {
|
||||
return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
|
||||
}
|
||||
|
||||
public static MapRange<T>(tileRange: TileRange, f: (x: number, y: number) => T): T[] {
|
||||
const result: T[] = []
|
||||
for (let x = tileRange.xstart; x <= tileRange.xend; x++) {
|
||||
|
|
@ -303,7 +287,6 @@ export class Utils {
|
|||
element.click();
|
||||
}
|
||||
|
||||
|
||||
public static ColourNameToHex(color: string): string {
|
||||
return colors[color.toLowerCase()] ?? color;
|
||||
}
|
||||
|
|
@ -339,6 +322,22 @@ export class Utils {
|
|||
}
|
||||
return bestColor ?? hex;
|
||||
}
|
||||
private static tile2long(x, z) {
|
||||
return (x / Math.pow(2, z) * 360 - 180);
|
||||
}
|
||||
|
||||
private static tile2lat(y, z) {
|
||||
const n = Math.PI - 2 * Math.PI * y / Math.pow(2, z);
|
||||
return (180 / Math.PI * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n))));
|
||||
}
|
||||
|
||||
private static lon2tile(lon, zoom) {
|
||||
return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
|
||||
}
|
||||
|
||||
private static lat2tile(lat, zoom) {
|
||||
return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
|
||||
}
|
||||
|
||||
private static colorDiff(c0: { r: number, g: number, b: number }, c1: { r: number, g: number, b: number }) {
|
||||
return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b);
|
||||
|
|
|
|||
|
|
@ -24,17 +24,6 @@
|
|||
"socialImage": "",
|
||||
"defaultBackgroundId": "CartoDB.Positron",
|
||||
"layers": [
|
||||
{
|
||||
"id": "shadow",
|
||||
"source": {
|
||||
"geoJson": "https://raw.githubusercontent.com/pietervdvn/MapComplete/master/assets/themes/speelplekken/shadow.geojson",
|
||||
"osmTags": "shadow=yes"
|
||||
},
|
||||
"color": "#444444",
|
||||
"width": {
|
||||
"render": "1"
|
||||
}
|
||||
},
|
||||
{
|
||||
"builtin": "play_forest",
|
||||
"override": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue