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

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

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>

View file

@ -86,7 +86,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
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,23 +275,27 @@ 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
} }
if (!isSetup || this.location.data === undefined) {
const dt = this.location.data const dt = this.location.data
dt.lon = map.getCenter().lng dt.lon = map.getCenter().lng
dt.lat = map.getCenter().lat dt.lat = map.getCenter().lat
this.location.ping() 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()],
]) ])
if (this.bounds.data === undefined || !isSetup) {
this.bounds.setData(bbox) this.bounds.setData(bbox)
} }
}
private SetZoom(z: number): void { private SetZoom(z: number): void {
const map = this._maplibreMap.data const map = this._maplibreMap.data