fix: rename map variable to avoid DOM id collision, restore colors

window.map was shadowed by div#map. Renamed to window._ifkMap.
Added error handling for choropleth data loading.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

static/map-embed.html

@@ -36,22 +36,23 @@ body { margin: 0; overflow: hidden; }
 
   var byIsoNum = {};
 
-  var map = new maplibregl.Map({
+  window._ifkMap = new maplibregl.Map({
     container: 'map',
     center: [20, 20],
     zoom: 2,
     scrollZoom: false,
     style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json'
   });
-  map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
-  map.addControl(new maplibregl.FullscreenControl(), 'top-right');
+  _ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
+  _ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
 
   document.addEventListener('fullscreenchange', function() {
-    if (document.fullscreenElement) map.scrollZoom.enable();
-    else map.scrollZoom.disable();
+    if (document.fullscreenElement) _ifkMap.scrollZoom.enable();
+    else _ifkMap.scrollZoom.disable();
   });
 
-  Promise.all([
+  _ifkMap.on('load', function() {
+    Promise.all([
     fetch('/data/countries.json').then(function(r) { return r.json(); }),
     fetch('/data/countries-50m.json').then(function(r) { return r.json(); })
   ]).then(function(results) {
@@ -69,9 +70,9 @@ body { margin: 0; overflow: hidden; }
       f.properties.isoNum = id;
     });
 
-    map.addSource('countries', { type: 'geojson', data: geo });
+    _ifkMap.addSource('countries', { type: 'geojson', data: geo });
 
-    map.addLayer({
+    _ifkMap.addLayer({
       id: 'choropleth-fill', type: 'fill', source: 'countries',
       paint: {
         'fill-color': ['get', 'fillColor'],
@@ -79,11 +80,11 @@ body { margin: 0; overflow: hidden; }
         'fill-antialias': false
       }
     });
-    map.addLayer({
+    _ifkMap.addLayer({
       id: 'choropleth-border', type: 'line', source: 'countries',
       paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
     });
-    map.addLayer({
+    _ifkMap.addLayer({
       id: 'choropleth-hover', type: 'fill', source: 'countries',
       paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2 },
       filter: ['==', 'isoNum', '']
@@ -91,18 +92,18 @@ body { margin: 0; overflow: hidden; }
 
     var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
 
-    map.on('mousemove', 'choropleth-fill', function(e) {
+    _ifkMap.on('mousemove', 'choropleth-fill', function(e) {
       var id = e.features[0].properties.isoNum;
       var c = byIsoNum[id];
-      map.getCanvas().style.cursor = c ? 'pointer' : '';
-      map.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
+      _ifkMap.getCanvas().style.cursor = c ? 'pointer' : '';
+      _ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
     });
-    map.on('mouseleave', 'choropleth-fill', function() {
-      map.getCanvas().style.cursor = '';
-      map.setFilter('choropleth-hover', ['==', 'isoNum', '']);
+    _ifkMap.on('mouseleave', 'choropleth-fill', function() {
+      _ifkMap.getCanvas().style.cursor = '';
+      _ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']);
     });
 
-    map.on('click', 'choropleth-fill', function(e) {
+    _ifkMap.on('click', 'choropleth-fill', function(e) {
       var id = e.features[0].properties.isoNum;
       var c = byIsoNum[id];
       if (!c) return;
@@ -119,8 +120,9 @@ body { margin: 0; overflow: hidden; }
         var readMore = { en: 'Read more ↓', de: 'Weiterlesen ↓', fr: 'En savoir plus ↓' };
         html += '<a class="ifk-popup-link" href="#' + anchor + '" target="_parent">' + (readMore[LANG] || readMore.en) + '</a>';
       }
-      popup.setLngLat(e.lngLat).setHTML(html).addTo(map);
+      popup.setLngLat(e.lngLat).setHTML(html).addTo(_ifkMap);
     });
+  }).catch(function(e) { console.error('Choropleth load error:', e); });
   });
 })();
 </script>