From 17d2363ef219ad5fb51522f857d24e80348d7887 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Wed, 5 Aug 2026 23:34:52 +0200
Subject: [PATCH] Fix `NaN` transform on the jsVectorMap world map (#2800)

---
 shared/ui/MapVector.astro | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/shared/ui/MapVector.astro b/shared/ui/MapVector.astro
index d567a5bbf..5decc30b2 100644
--- a/shared/ui/MapVector.astro
+++ b/shared/ui/MapVector.astro
@@ -100,7 +100,7 @@ const mapOptions = data
 				<script define:vars={{ mapKey, mapSelector, mapName: data.map, mapOptions }}>
 					window.tabler_map_vector ??= {};
 
-					function initMapVector() {
+					function createMapVector() {
 						const map = (window.tabler_map_vector[mapKey] = new jsVectorMap({
 							selector: mapSelector,
 							map: mapName,
@@ -115,6 +115,27 @@ const mapOptions = data
 						});
 					}
 
+					function initMapVector() {
+						const container = document.querySelector(mapSelector);
+
+						// jsVectorMap computes its initial scale from the container's layout
+						// size. If the container is still 0x0 (e.g. layout hasn't settled
+						// yet), that scale ends up 0, and a later resize divides by it,
+						// producing a NaN transform. Wait for real dimensions first.
+						if (container.offsetWidth && container.offsetHeight) {
+							createMapVector();
+							return;
+						}
+
+						const observer = new ResizeObserver((entries) => {
+							if (entries[0].contentRect.width && entries[0].contentRect.height) {
+								observer.disconnect();
+								createMapVector();
+							}
+						});
+						observer.observe(container);
+					}
+
 					document.readyState !== 'loading' ? initMapVector() : document.addEventListener('DOMContentLoaded', initMapVector, { once: true });
 				</script>
 				<!-- END MAP VECTOR -->