From 00194c4ce8232f35d62ca63fb66103ff657293dd Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Fri, 3 Apr 2026 16:06:53 +0300
Subject: [PATCH] fix: inline minimal style (no flash), remove all layer-hiding
 code

Use inline style with only background+water layers instead of
loading full style.json then hiding everything. No flash,
no lines, instant clean render.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 layouts/shortcodes/world-map.html | 60 +++++++++----------------------
 1 file changed, 16 insertions(+), 44 deletions(-)

diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index f2413a1..8d089cf 100644
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -53,7 +53,20 @@ function ifkInitMap() {
 
   window._ifkMap = new maplibregl.Map({
     container: 'ifk-world-map',
-    style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json',
+    style: {
+      version: 8,
+      sources: {
+        openmaptiles: {
+          type: 'vector',
+          url: 'https://maps.clicksports.de/data/v3.json'
+        }
+      },
+      glyphs: 'https://maps.clicksports.de/fonts/{fontstack}/{range}.pbf',
+      layers: [
+        { id: 'background', type: 'background', paint: { 'background-color': '#ffffff' } },
+        { id: 'water', type: 'fill', source: 'openmaptiles', 'source-layer': 'water', paint: { 'fill-color': '#c8d3df' } }
+      ]
+    },
     center: [20, 20],
     zoom: 2,
     minZoom: 1,
@@ -66,26 +79,6 @@ function ifkInitMap() {
   window._ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
 
   window._ifkMap.on('load', function() {
-    // Nuke ALL base map layers, then selectively re-enable only what we need
-    var style = window._ifkMap.getStyle();
-    style.layers.forEach(function(l) {
-      if (l.id === 'background') {
-        window._ifkMap.setPaintProperty(l.id, 'background-color', '#ffffff');
-      } else {
-        window._ifkMap.setLayoutProperty(l.id, 'visibility', 'none');
-      }
-    });
-    // Re-enable only water fills (no outlines)
-    style.layers.forEach(function(l) {
-      if (l.type === 'fill' && l.id.indexOf('water') >= 0) {
-        window._ifkMap.setLayoutProperty(l.id, 'visibility', 'visible');
-        window._ifkMap.setPaintProperty(l.id, 'fill-color', '#c8d3df');
-        if (l.paint && l.paint['fill-outline-color'] !== undefined) {
-          window._ifkMap.setPaintProperty(l.id, 'fill-outline-color', '#c8d3df');
-        }
-      }
-    });
-
     fetch('{{ "data/countries-50m.json" | relURL }}')
       .then(function(r) { return r.json(); })
       .then(function(topo) {
@@ -101,16 +94,6 @@ function ifkInitMap() {
 
         window._ifkMap.addSource('countries-choropleth', { type: 'geojson', data: geo });
 
-        // Find first label layer to insert choropleth below it
-        var firstLabel;
-        var layers = window._ifkMap.getStyle().layers;
-        for (var i = 0; i < layers.length; i++) {
-          if (layers[i].type === 'symbol' && (layers[i].id.indexOf('label') >= 0 || layers[i].id.indexOf('name') >= 0 || layers[i].id.indexOf('place') >= 0)) {
-            firstLabel = layers[i].id;
-            break;
-          }
-        }
-
         window._ifkMap.addLayer({
           id: 'choropleth-fill',
           type: 'fill',
@@ -119,7 +102,7 @@ function ifkInitMap() {
             'fill-color': ['get', 'fillColor'],
             'fill-opacity': ['get', 'fillOpacity']
           }
-        }, firstLabel);
+        });
 
         window._ifkMap.addLayer({
           id: 'choropleth-outline',
@@ -127,18 +110,7 @@ function ifkInitMap() {
           source: 'countries-choropleth',
           paint: {
             'line-color': '#94a3b8',
-            'line-width': 0.6
-          }
-        }, firstLabel);
-
-        // Hide all labels except country names at zoom >= 3
-        layers.forEach(function(l) {
-          if (l.type === 'symbol') {
-            if (l.id.indexOf('country') >= 0 || l.id.indexOf('continent') >= 0) {
-              window._ifkMap.setLayerZoomRange(l.id, 3, 24);
-            } else {
-              window._ifkMap.setLayoutProperty(l.id, 'visibility', 'none');
-            }
+            'line-width': 0.5
           }
         });