Fix Gradio map initialization

app.py

@@ -31,6 +31,10 @@ def read_asset(name: str) -> str:
     return path.read_text(encoding="utf-8") if path.exists() else ""
 
 
+def gradio_js_callback(script: str) -> str:
+    return "() => {\n" + script + "\n}"
+
+
 MAP_HTML = """
 <div id="sis-map-shell">
   <div class="map-controls">
@@ -343,12 +347,15 @@ def _file_path(file_obj: Any) -> str:
 
 def build_app() -> gr.Blocks:
     map_js = read_asset("map.js")
+    map_js_callback = gradio_js_callback(map_js)
     block_kwargs: dict[str, Any] = {"title": "Site Intelligence Studio"}
     block_parameters = inspect.signature(gr.Blocks).parameters
     if "css" in block_parameters:
         block_kwargs["css"] = read_asset("style.css")
     if "head" in block_parameters:
         block_kwargs["head"] = HEAD_HTML
+    if "js" in block_parameters:
+        block_kwargs["js"] = map_js_callback
     with gr.Blocks(**block_kwargs) as demo:
         gr.HTML(
             """
@@ -424,7 +431,8 @@ def build_app() -> gr.Blocks:
                 warnings_output,
             ],
         )
-        demo.load(fn=None, js=map_js)
+        if "js" not in block_parameters:
+            demo.load(fn=None, js=map_js_callback)
     return demo
 
 
@@ -440,6 +448,8 @@ if __name__ == "__main__":
         launch_kwargs["css"] = read_asset("style.css")
     if "head" in launch_parameters:
         launch_kwargs["head"] = HEAD_HTML
+    if "js" in launch_parameters:
+        launch_kwargs["js"] = gradio_js_callback(read_asset("map.js"))
     if "ssr_mode" in launch_parameters:
         launch_kwargs["ssr_mode"] = False
     demo.launch(**launch_kwargs)

assets/map.js

@@ -1,6 +1,6 @@
 function initSiteMap() {
   const mapNode = document.getElementById("site-map");
-  if (!mapNode || mapNode.dataset.ready === "true" || typeof L === "undefined") return;
+  if (!mapNode || mapNode.dataset.ready === "true" || typeof L === "undefined") return false;
   mapNode.dataset.ready = "true";
 
   const map = L.map("site-map", { zoomControl: true }).setView([21.0, 70.0], 14);
@@ -163,6 +163,8 @@ function initSiteMap() {
     if (pinMarker) placePin(pinMarker.getLatLng());
   });
   setMode("pin");
+  setTimeout(() => map.invalidateSize(), 250);
+  return true;
 }
 
 let leafletFallbackRequested = false;
@@ -190,15 +192,19 @@ function requestLeafletFallback() {
 }
 
 function waitForLeafletAndInit(attempt = 0) {
-  if (typeof L !== "undefined") {
-    initSiteMap();
-    return;
+  const hasMapNode = Boolean(document.getElementById("site-map"));
+  if (typeof L !== "undefined" && hasMapNode) {
+    if (initSiteMap()) return;
+  }
+  if (typeof L !== "undefined" && !hasMapNode) {
+    const status = document.getElementById("map-status");
+    if (status) status.textContent = "Map UI is loading...";
   }
-  if (attempt === 6) requestLeafletFallback();
-  if (attempt > 40) {
+  if (attempt === 6 && typeof L === "undefined") requestLeafletFallback();
+  if (attempt > 80) {
     const status = document.getElementById("map-status");
     if (status) {
-      status.textContent = "Map library could not load. Use the lat/lon field or upload DXF/GeoJSON, then generate the report.";
+      status.textContent = "Map could not initialize. Use the lat/lon field or upload DXF/GeoJSON, then generate the report.";
     }
     return;
   }