diff --git a/assets/js/contact_map_hook.js b/assets/js/contact_map_hook.js index 3c60f502..63f6c6db 100644 --- a/assets/js/contact_map_hook.js +++ b/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}) } } diff --git a/assets/js/propagation_map_hook.js b/assets/js/propagation_map_hook.js index 3c51e960..c5fbe7bc 100644 --- a/assets/js/propagation_map_hook.js +++ b/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) { diff --git a/assets/js/weather_map_hook.js b/assets/js/weather_map_hook.js index 17d2837d..2602bfd4 100644 --- a/assets/js/weather_map_hook.js +++ b/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(() => {