From c5327c4012416d803d7e3cb078e7231004c0fd85 Mon Sep 17 00:00:00 2001
From: Deeman <hendriknote@gmail.com>
Date: Fri, 6 Mar 2026 09:01:54 +0100
Subject: [PATCH] fix(maps): move VENUE_ICON creation after Leaflet loads

L.divIcon() was called at IIFE top level before the dynamic Leaflet
script loaded, throwing ReferenceError and preventing all maps from
rendering. Move icon creation into script.onload callback.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |  2 +-
 web/src/padelnomics/static/js/article-maps.js | 21 ++++++++++---------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a5f5c1..7bc92d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 ## [Unreleased]
 
 ### Fixed
-- **Admin template preview maps** — Leaflet maps rendered blank in admin preview due to `.card` `overflow: hidden` clipping tile layers. Set `overflow: visible` on the rendered-article card. Also added `.catch()` handlers to map fetch calls so failures are logged to console.
+- **Admin template preview maps** — Leaflet maps rendered blank because `article-maps.js` called `L.divIcon()` at the IIFE top level before Leaflet was dynamically loaded, crashing the script. Moved `VENUE_ICON` creation into the `script.onload` callback so it runs after Leaflet is available. Previous commit's `.card` `overflow: visible` fix remains (clips tile layers otherwise).
 - **Pipeline diagnostic script** (`scripts/check_pipeline.py`) — handle DuckDB catalog naming quirk where `lakehouse.duckdb` uses catalog `lakehouse` instead of `local`, causing SQLMesh logical views to break. Script now auto-detects the catalog via `USE`, and falls back to querying physical tables (`sqlmesh__<schema>.<table>__<hash>`) when views fail.
 - **Eurostat gas prices extractor** — `nrg_pc_203` filter missing `unit` dimension (API returns both KWH and GJ_GCV); now filters to `KWH`.
 - **Eurostat labour costs extractor** — `lc_lci_lev` used non-existent `currency` filter dimension; corrected to `unit: EUR`.
diff --git a/web/src/padelnomics/static/js/article-maps.js b/web/src/padelnomics/static/js/article-maps.js
index bf7753d..5824b27 100644
--- a/web/src/padelnomics/static/js/article-maps.js
+++ b/web/src/padelnomics/static/js/article-maps.js
@@ -62,14 +62,7 @@
       .catch(function(err) { console.error('Country map fetch failed:', err); });
   }
 
-  var VENUE_ICON = L.divIcon({
-    className: '',
-    html: '<div class="pn-venue"></div>',
-    iconSize: [10, 10],
-    iconAnchor: [5, 5],
-  });
-
-  function initCityMap(el) {
+  function initCityMap(el, venueIcon) {
     var countrySlug = el.dataset.countrySlug;
     var citySlug = el.dataset.citySlug;
     var lat = parseFloat(el.dataset.lat);
@@ -91,7 +84,7 @@
                 : '')
             : '';
           var tip = '<strong>' + v.name + '</strong>' + (courtLine ? '<br>' + courtLine : '');
-          L.marker([v.lat, v.lon], { icon: VENUE_ICON })
+          L.marker([v.lat, v.lon], { icon: venueIcon })
             .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -7] })
             .addTo(map);
         });
@@ -104,7 +97,15 @@
   script.src = window.LEAFLET_JS_URL || '/static/vendor/leaflet/leaflet.min.js';
   script.onload = function() {
     if (countryMapEl) initCountryMap(countryMapEl);
-    if (cityMapEl) initCityMap(cityMapEl);
+    if (cityMapEl) {
+      var venueIcon = L.divIcon({
+        className: '',
+        html: '<div class="pn-venue"></div>',
+        iconSize: [10, 10],
+        iconAnchor: [5, 5],
+      });
+      initCityMap(cityMapEl, venueIcon);
+    }
   };
   document.head.appendChild(script);
 })();