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

Fix: make sure that the passed-in-location of the map is respected, prevents random jumps in the location input

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-18 23:42:03 +02:00
parent 0db6a89777
commit 5c01f6ada9
2 changed files with 24 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Base/MapControlButton.svelte
View file

@ -8,6 +8,6 @@
</script> </script>
<button on:click={e => dispatch("click", e)} class="rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1"> <button on:click={e => dispatch("click", e)} class="rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1 pointer-events-auto">
<slot/> <slot/>
</button> </button>

42
UI/Map/MapLibreAdaptor.ts
View file

@ -1,14 +1,14 @@
import { Store, UIEventSource } from "../../Logic/UIEventSource" import {Store, UIEventSource} from "../../Logic/UIEventSource"
import type { Map as MLMap } from "maplibre-gl" import type {Map as MLMap} from "maplibre-gl"
import { Map as MlMap, SourceSpecification } from "maplibre-gl" import {Map as MlMap, SourceSpecification} from "maplibre-gl"
import { RasterLayerPolygon } from "../../Models/RasterLayers" import {RasterLayerPolygon} from "../../Models/RasterLayers"
import { Utils } from "../../Utils" import {Utils} from "../../Utils"
import { BBox } from "../../Logic/BBox" import {BBox} from "../../Logic/BBox"
import { ExportableMap, MapProperties } from "../../Models/MapProperties" import {ExportableMap, MapProperties} from "../../Models/MapProperties"
import SvelteUIElement from "../Base/SvelteUIElement" import SvelteUIElement from "../Base/SvelteUIElement"
import MaplibreMap from "./MaplibreMap.svelte" import MaplibreMap from "./MaplibreMap.svelte"
import html2canvas from "html2canvas" import html2canvas from "html2canvas"
import { RasterLayerProperties } from "../../Models/RasterLayerProperties" import {RasterLayerProperties} from "../../Models/RasterLayerProperties"
/** /**
* The 'MapLibreAdaptor' bridges 'MapLibre' with the various properties of the `MapProperties` * The 'MapLibreAdaptor' bridges 'MapLibre' with the various properties of the `MapProperties`
@ -49,7 +49,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
constructor(maplibreMap: Store<MLMap>, state?: Partial<MapProperties>) { constructor(maplibreMap: Store<MLMap>, state?: Partial<MapProperties>) {
this._maplibreMap = maplibreMap this._maplibreMap = maplibreMap
this.location = state?.location ?? new UIEventSource({ lon: 0, lat: 0 }) this.location = state?.location ?? new UIEventSource({lon: 0, lat: 0})
this.zoom = state?.zoom ?? new UIEventSource(1) this.zoom = state?.zoom ?? new UIEventSource(1)
this.minzoom = state?.minzoom ?? new UIEventSource(0) this.minzoom = state?.minzoom ?? new UIEventSource(0)
this.maxzoom = state?.maxzoom ?? new UIEventSource(24) this.maxzoom = state?.maxzoom ?? new UIEventSource(24)
@ -81,12 +81,11 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
console.log(e) console.log(e)
const lon = e.lngLat.lng const lon = e.lngLat.lng
const lat = e.lngLat.lat const lat = e.lngLat.lat
lastClickLocation.setData({ lon, lat }) lastClickLocation.setData({lon, lat})
} }
maplibreMap.addCallbackAndRunD((map) => { maplibreMap.addCallbackAndRunD((map) => {
map.on("load", () => { map.on("load", () => {
this.updateStores()
self.setBackground() self.setBackground()
self.MoveMapToCurrentLoc(self.location.data) self.MoveMapToCurrentLoc(self.location.data)
self.SetZoom(self.zoom.data) self.SetZoom(self.zoom.data)
@ -96,6 +95,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
self.setMinzoom(self.minzoom.data) self.setMinzoom(self.minzoom.data)
self.setMaxzoom(self.maxzoom.data) self.setMaxzoom(self.maxzoom.data)
self.setBounds(self.bounds.data) self.setBounds(self.bounds.data)
this.updateStores(true)
}) })
self.MoveMapToCurrentLoc(self.location.data) self.MoveMapToCurrentLoc(self.location.data)
self.SetZoom(self.zoom.data) self.SetZoom(self.zoom.data)
@ -105,7 +105,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
self.setMinzoom(self.minzoom.data) self.setMinzoom(self.minzoom.data)
self.setMaxzoom(self.maxzoom.data) self.setMaxzoom(self.maxzoom.data)
self.setBounds(self.bounds.data) self.setBounds(self.bounds.data)
this.updateStores() this.updateStores(true)
map.on("moveend", () => this.updateStores()) map.on("moveend", () => this.updateStores())
map.on("click", (e) => { map.on("click", (e) => {
handleClick(e) handleClick(e)
@ -275,22 +275,26 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
return new Promise<Blob>((resolve) => drawOn.toBlob((data) => resolve(data))) return new Promise<Blob>((resolve) => drawOn.toBlob((data) => resolve(data)))
} }
private updateStores(): void { private updateStores(isSetup: boolean = false): void {
const map = this._maplibreMap.data const map = this._maplibreMap.data
if (!map) { if (!map) {
return return
} }
const dt = this.location.data if (!isSetup || this.location.data === undefined) {
dt.lon = map.getCenter().lng const dt = this.location.data
dt.lat = map.getCenter().lat dt.lon = map.getCenter().lng
this.location.ping() dt.lat = map.getCenter().lat
this.location.ping()
}
this.zoom.setData(Math.round(map.getZoom() * 10) / 10) this.zoom.setData(Math.round(map.getZoom() * 10) / 10)
const bounds = map.getBounds() const bounds = map.getBounds()
const bbox = new BBox([ const bbox = new BBox([
[bounds.getEast(), bounds.getNorth()], [bounds.getEast(), bounds.getNorth()],
[bounds.getWest(), bounds.getSouth()], [bounds.getWest(), bounds.getSouth()],
]) ])
this.bounds.setData(bbox) if (this.bounds.data === undefined || !isSetup) {
this.bounds.setData(bbox)
}
} }
private SetZoom(z: number): void { private SetZoom(z: number): void {
@ -311,7 +315,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
const center = map.getCenter() const center = map.getCenter()
if (center.lng !== loc.lon || center.lat !== loc.lat) { if (center.lng !== loc.lon || center.lat !== loc.lat) {
map.setCenter({ lng: loc.lon, lat: loc.lat }) map.setCenter({lng: loc.lon, lat: loc.lat})
} }
} }