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

Performance: add map.resize() at appropriate time for initial map load

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-12 13:53:49 +01:00
parent 7947fc3fbc
commit f8349cb2b9
2 changed files with 6 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/UI/Map/MapLibreAdaptor.ts
View file

@ -98,7 +98,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
maplibreMap.addCallbackAndRunD((map) => { maplibreMap.addCallbackAndRunD((map) => {
map.on("load", () => { map.on("load", () => {
map.resize()
self.MoveMapToCurrentLoc(self.location.data) self.MoveMapToCurrentLoc(self.location.data)
self.SetZoom(self.zoom.data) self.SetZoom(self.zoom.data)
self.setMaxBounds(self.maxbounds.data) self.setMaxBounds(self.maxbounds.data)
@ -111,7 +110,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
self.setBackground() self.setBackground()
this.updateStores(true) this.updateStores(true)
}) })
map.resize()
self.MoveMapToCurrentLoc(self.location.data) self.MoveMapToCurrentLoc(self.location.data)
self.SetZoom(self.zoom.data) self.SetZoom(self.zoom.data)
self.setMaxBounds(self.maxbounds.data) self.setMaxBounds(self.maxbounds.data)
@ -293,7 +291,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
} }
map.triggerRepaint() map.triggerRepaint()
await promise await promise
map.resize()
} }
private async drawElement( private async drawElement(

15
src/UI/Map/MaplibreMap.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onDestroy, onMount } from "svelte" import { onDestroy, onMount } from "svelte"
import * as maplibre from "maplibre-gl"
import type { Map } from "maplibre-gl" import type { Map } from "maplibre-gl"
import * as maplibre from "maplibre-gl"
import type { Readable, Writable } from "svelte/store" import type { Readable, Writable } from "svelte/store"
import { get, writable } from "svelte/store" import { get, writable } from "svelte/store"
import { AvailableRasterLayers } from "../../Models/RasterLayers" import { AvailableRasterLayers } from "../../Models/RasterLayers"
@ -44,8 +44,10 @@
interactive: true, interactive: true,
attributionControl: false, attributionControl: false,
}) })
window.requestAnimationFrame(() => {
_map.on("load", function () { _map.resize()
})
_map.on("load", function() {
_map.resize() _map.resize()
}) })
map.set(_map) map.set(_map)
@ -63,11 +65,6 @@
<div <div
bind:this={container} bind:this={container}
class="map" class="map relative top-0 left-0 w-full h-full"
id="map" id="map"
style=" position: relative;
top: 0;
bottom: 0;
width: 100%;
height: 100%;"
/> />