Defer map init and sendBounds to requestAnimationFrame in all map hooks

assets/js/contact_map_hook.js

@@ -2,6 +2,11 @@ import { updateGridOverlay } from "./maidenhead_grid"
 
 export const ContactMap = {
   mounted() {
+    // Defer init until container has dimensions (flex layout timing)
+    requestAnimationFrame(() => this.initMap())
+  },
+
+  initMap() {
     const pos1 = JSON.parse(this.el.dataset.pos1)
     const pos2 = JSON.parse(this.el.dataset.pos2)
 
@@ -10,11 +15,13 @@ export const ContactMap = {
     const lat2 = pos2.lat
     const lon2 = pos2.lon || pos2.lng
 
+    const bounds = L.latLngBounds([[lat1, lon1], [lat2, lon2]])
+
     const map = L.map(this.el, {
       zoomControl: true,
       attributionControl: false,
       scrollWheelZoom: false
-    })
+    }).fitBounds(bounds, {padding: [40, 40], maxZoom: 10})
 
     L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
       maxZoom: 19
@@ -69,8 +76,5 @@ export const ContactMap = {
     L.polyline([[lat1, lon1], [lat2, lon2]], {
       color: "#6366f1", weight: 2, dashArray: "6 4", opacity: 0.8
     }).addTo(map)
-
-    const bounds = L.latLngBounds([[lat1, lon1], [lat2, lon2]])
-    map.fitBounds(bounds, {padding: [40, 40], maxZoom: 10})
   }
 }

assets/js/propagation_map_hook.js

@@ -684,7 +684,7 @@ export const PropagationMap = {
 
     this.el.addEventListener("show-loading", () => topbar.show(300))
 
-    this.sendBounds()
+    requestAnimationFrame(() => this.sendBounds())
     this.map.on("moveend", () => {
       this.sendBounds()
       if (this.gridVisible) {

assets/js/weather_map_hook.js

@@ -343,7 +343,7 @@ export const WeatherMap = {
       L.DomEvent.disableScrollPropagation(controls)
     }
 
-    this.sendBounds()
+    requestAnimationFrame(() => this.sendBounds())
     this.map.on("moveend", () => this.sendBounds())
 
     this._layerObserver = new MutationObserver(() => {