Do not zoom to location if it is out of the map bounds
This commit is contained in:
parent
8aa830f15e
commit
6763c682ab
2 changed files with 59 additions and 40 deletions
|
|
@ -85,30 +85,30 @@ export class InitUiElements {
|
|||
function updateFavs() {
|
||||
// This is purely for the personal theme to load the layers there
|
||||
const favs = State.state.favouriteLayers.data ?? [];
|
||||
|
||||
|
||||
const neededLayers = new Set<LayerConfig>();
|
||||
|
||||
console.log("Favourites are: ", favs)
|
||||
layoutToUse.layers.splice(0, layoutToUse.layers.length);
|
||||
let somethingChanged = false;
|
||||
for (const fav of favs) {
|
||||
|
||||
if(AllKnownLayers.sharedLayers.has(fav)){
|
||||
|
||||
if (AllKnownLayers.sharedLayers.has(fav)) {
|
||||
const layer = AllKnownLayers.sharedLayers.get(fav)
|
||||
if(!neededLayers.has(layer)){
|
||||
if (!neededLayers.has(layer)) {
|
||||
neededLayers.add(layer)
|
||||
somethingChanged = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
for (const layouts of State.state.installedThemes.data) {
|
||||
for (const layer of layouts.layout.layers) {
|
||||
if (typeof layer === "string") {
|
||||
continue;
|
||||
}
|
||||
if (layer.id === fav) {
|
||||
if(!neededLayers.has(layer)){
|
||||
if (!neededLayers.has(layer)) {
|
||||
neededLayers.add(layer)
|
||||
somethingChanged = true;
|
||||
}
|
||||
|
|
@ -116,13 +116,13 @@ export class InitUiElements {
|
|||
}
|
||||
}
|
||||
}
|
||||
if(somethingChanged){
|
||||
if (somethingChanged) {
|
||||
console.log("layoutToUse.layers:", layoutToUse.layers)
|
||||
State.state.layoutToUse.data.layers = Array.from(neededLayers);
|
||||
State.state.layoutToUse.ping();
|
||||
State.state.layerUpdater?.ForceRefresh();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -174,7 +174,8 @@ export class InitUiElements {
|
|||
new MapControlButton(
|
||||
new GeoLocationHandler(
|
||||
State.state.currentGPSLocation,
|
||||
State.state.leafletMap
|
||||
State.state.leafletMap,
|
||||
State.state.layoutToUse
|
||||
)),
|
||||
State.state.featureSwitchGeolocation);
|
||||
|
||||
|
|
@ -381,23 +382,25 @@ export class InitUiElements {
|
|||
State.state.leafletMap.setData(bm.map);
|
||||
const layout = State.state.layoutToUse.data
|
||||
if (layout.lockLocation) {
|
||||
const tile = Utils.embedded_tile(layout.startLat, layout.startLon, layout.startZoom - 1)
|
||||
const bounds = Utils.tile_bounds(tile.z, tile.x, tile.y)
|
||||
// We use the bounds to get a sense of distance for this zoom level
|
||||
const latDiff = bounds[0][0] - bounds[1][0]
|
||||
const lonDiff = bounds[0][1] - bounds[1][1]
|
||||
console.warn("Locking the bounds to ", bounds)
|
||||
bm.map.setMaxBounds(
|
||||
[[layout.startLat - latDiff, layout.startLon - lonDiff],
|
||||
|
||||
if (layout.lockLocation === true) {
|
||||
const tile = Utils.embedded_tile(layout.startLat, layout.startLon, layout.startZoom - 1)
|
||||
const bounds = Utils.tile_bounds(tile.z, tile.x, tile.y)
|
||||
// We use the bounds to get a sense of distance for this zoom level
|
||||
const latDiff = bounds[0][0] - bounds[1][0]
|
||||
const lonDiff = bounds[0][1] - bounds[1][1]
|
||||
layout.lockLocation = [[layout.startLat - latDiff, layout.startLon - lonDiff],
|
||||
[layout.startLat + latDiff, layout.startLon + lonDiff],
|
||||
]
|
||||
);
|
||||
];
|
||||
}
|
||||
console.warn("Locking the bounds to ", layout.lockLocation)
|
||||
bm.map.setMaxBounds(layout.lockLocation);
|
||||
bm.map.setMinZoom(layout.startZoom)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private static InitLayers() : FeatureSource{
|
||||
private static InitLayers(): FeatureSource {
|
||||
|
||||
|
||||
const state = State.state;
|
||||
|
|
@ -420,13 +423,12 @@ export class InitUiElements {
|
|||
|
||||
const updater = new LoadFromOverpass(state.locationControl, state.layoutToUse, state.leafletMap);
|
||||
State.state.layerUpdater = updater;
|
||||
|
||||
|
||||
|
||||
const source = new FeaturePipeline(state.filteredLayers,
|
||||
updater,
|
||||
state.osmApiFeatureSource,
|
||||
state.layoutToUse,
|
||||
|
||||
|
||||
const source = new FeaturePipeline(state.filteredLayers,
|
||||
updater,
|
||||
state.osmApiFeatureSource,
|
||||
state.layoutToUse,
|
||||
state.changes,
|
||||
state.locationControl,
|
||||
state.selectedElement);
|
||||
|
|
@ -442,7 +444,7 @@ export class InitUiElements {
|
|||
|
||||
// ------------- Setup the layers -------------------------------
|
||||
|
||||
const source = InitUiElements.InitLayers();
|
||||
const source = InitUiElements.InitLayers();
|
||||
InitUiElements.InitLayerSelection(source);
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import {Utils} from "../../Utils";
|
|||
import Svg from "../../Svg";
|
||||
import Img from "../../UI/Base/Img";
|
||||
import {LocalStorageSource} from "../Web/LocalStorageSource";
|
||||
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
|
||||
|
||||
export default class GeoLocationHandler extends UIElement {
|
||||
|
||||
|
|
@ -49,12 +50,15 @@ export default class GeoLocationHandler extends UIElement {
|
|||
* @private
|
||||
*/
|
||||
private readonly _previousLocationGrant: UIEventSource<string> = LocalStorageSource.Get("geolocation-permissions");
|
||||
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
|
||||
|
||||
constructor(currentGPSLocation: UIEventSource<{ latlng: any; accuracy: number }>,
|
||||
leafletMap: UIEventSource<L.Map>) {
|
||||
leafletMap: UIEventSource<L.Map>,
|
||||
layoutToUse: UIEventSource<LayoutConfig>) {
|
||||
super(undefined);
|
||||
this._currentGPSLocation = currentGPSLocation;
|
||||
this._leafletMap = leafletMap;
|
||||
this._layoutToUse = layoutToUse;
|
||||
this._hasLocation = currentGPSLocation.map((location) => location !== undefined);
|
||||
this.dumbMode = false;
|
||||
const self = this;
|
||||
|
|
@ -90,11 +94,11 @@ export default class GeoLocationHandler extends UIElement {
|
|||
|
||||
const self = this;
|
||||
htmlElement.onclick = function () {
|
||||
self.StartGeolocating(19);
|
||||
self.StartGeolocating();
|
||||
}
|
||||
|
||||
htmlElement.oncontextmenu = function (e) {
|
||||
self.StartGeolocating(15);
|
||||
self.StartGeolocating();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
|
@ -133,9 +137,24 @@ export default class GeoLocationHandler extends UIElement {
|
|||
const timeSinceRequest = (new Date().getTime() - (self._lastUserRequest?.getTime() ?? 0)) / 1000;
|
||||
if (timeSinceRequest < 30) {
|
||||
self._lastUserRequest = undefined;
|
||||
this._leafletMap.data.setView(
|
||||
this._currentGPSLocation.data.latlng, this._leafletMap.data.getZoom()
|
||||
);
|
||||
|
||||
// We use the layout location
|
||||
const b = this._layoutToUse.data.lockLocation
|
||||
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, this._leafletMap.data.getZoom()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let color = "#1111cc";
|
||||
|
|
@ -166,7 +185,7 @@ export default class GeoLocationHandler extends UIElement {
|
|||
?.then(function (status) {
|
||||
console.log("Geolocation is already", status)
|
||||
if (status.state === "granted") {
|
||||
self.StartGeolocating(19, false);
|
||||
self.StartGeolocating(false);
|
||||
}
|
||||
self._permission.setData(status.state);
|
||||
status.onchange = function () {
|
||||
|
|
@ -179,7 +198,7 @@ export default class GeoLocationHandler extends UIElement {
|
|||
}
|
||||
if (this._previousLocationGrant.data === "granted") {
|
||||
this._previousLocationGrant.setData("");
|
||||
self.StartGeolocating();
|
||||
self.StartGeolocating(false);
|
||||
}
|
||||
|
||||
this.HideOnEmpty(true);
|
||||
|
|
@ -207,7 +226,7 @@ export default class GeoLocationHandler extends UIElement {
|
|||
}
|
||||
}
|
||||
|
||||
private StartGeolocating(zoomlevel = 19, zoomToGPS = true) {
|
||||
private StartGeolocating(zoomToGPS = true) {
|
||||
const self = this;
|
||||
console.log("Starting geolocation")
|
||||
|
||||
|
|
@ -217,9 +236,7 @@ export default class GeoLocationHandler extends UIElement {
|
|||
return "";
|
||||
}
|
||||
if (this._currentGPSLocation.data !== undefined) {
|
||||
this._leafletMap.data.setView(
|
||||
this._currentGPSLocation.data.latlng, zoomlevel
|
||||
);
|
||||
this._currentGPSLocation.ping()
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue