From f8349cb2b96a4d077798dcd4ce2b1cbddb77bb97 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Tue, 12 Dec 2023 13:53:49 +0100
Subject: [PATCH] Performance: add map.resize() at appropriate time for initial
 map load

---
 src/UI/Map/MapLibreAdaptor.ts |  3 ---
 src/UI/Map/MaplibreMap.svelte | 15 ++++++---------
 2 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/UI/Map/MapLibreAdaptor.ts b/src/UI/Map/MapLibreAdaptor.ts
index 938d2081b..523cff530 100644
--- a/src/UI/Map/MapLibreAdaptor.ts
+++ b/src/UI/Map/MapLibreAdaptor.ts
@@ -98,7 +98,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
 
         maplibreMap.addCallbackAndRunD((map) => {
             map.on("load", () => {
-                map.resize()
                 self.MoveMapToCurrentLoc(self.location.data)
                 self.SetZoom(self.zoom.data)
                 self.setMaxBounds(self.maxbounds.data)
@@ -111,7 +110,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
                 self.setBackground()
                 this.updateStores(true)
             })
-            map.resize()
             self.MoveMapToCurrentLoc(self.location.data)
             self.SetZoom(self.zoom.data)
             self.setMaxBounds(self.maxbounds.data)
@@ -293,7 +291,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         }
         map.triggerRepaint()
         await promise
-        map.resize()
     }
 
     private async drawElement(
diff --git a/src/UI/Map/MaplibreMap.svelte b/src/UI/Map/MaplibreMap.svelte
index f882b6ead..e150e28d4 100644
--- a/src/UI/Map/MaplibreMap.svelte
+++ b/src/UI/Map/MaplibreMap.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onDestroy, onMount } from "svelte"
-  import * as maplibre from "maplibre-gl"
   import type { Map } from "maplibre-gl"
+  import * as maplibre from "maplibre-gl"
   import type { Readable, Writable } from "svelte/store"
   import { get, writable } from "svelte/store"
   import { AvailableRasterLayers } from "../../Models/RasterLayers"
@@ -44,8 +44,10 @@
       interactive: true,
       attributionControl: false,
     })
-
-    _map.on("load", function () {
+    window.requestAnimationFrame(() => {
+      _map.resize()
+    })
+    _map.on("load", function() {
       _map.resize()
     })
     map.set(_map)
@@ -63,11 +65,6 @@
 
 <div
   bind:this={container}
-  class="map"
+  class="map relative top-0 left-0 w-full h-full"
   id="map"
-  style="      position: relative;
-        top: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;"
 />