From 3bd0476abfbf5361acffbed944f5093f783d7050 Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Sat, 4 Apr 2026 08:31:58 +0300
Subject: [PATCH] fix: eliminate map tile-seam lines by removing vector tile
 source

Replace OpenMapTiles vector tiles with pure TopoJSON rendering:
- Ocean = background color (#dce4ec), land = white fill from land object
- Country borders via topojson.mesh (shared edges, no tiling)
- antialias: false + renderWorldCopies: false on Map constructor
- No more vector tile source = no more tile-boundary artifacts

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

diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index e2be2ab..004199a 100644
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -61,19 +61,14 @@ function ifkInitMap() {
 
   window._ifkMap = new maplibregl.Map({
     container: 'ifk-world-map',
+    antialias: false,
+    renderWorldCopies: false,
+    fadeDuration: 0,
     style: {
       version: 8,
-      sources: {
-        openmaptiles: {
-          type: 'vector',
-          url: 'https://maps.clicksports.de/data/v3.json'
-        }
-      },
-      glyphs: 'https://maps.clicksports.de/fonts/{fontstack}/{range}.pbf',
+      sources: {},
       layers: [
-        { id: 'background', type: 'background', paint: { 'background-color': '#ffffff' } },
-        { id: 'water', type: 'fill', source: 'openmaptiles', 'source-layer': 'water', paint: { 'fill-color': '#c8d3df' } },
-        { id: 'country-labels', type: 'symbol', source: 'openmaptiles', 'source-layer': 'place', minzoom: 3, filter: ['==', 'class', 'country'], layout: { 'text-field': '{name:latin}', 'text-font': ['Open Sans Regular'], 'text-size': 12, 'text-transform': 'uppercase', 'text-letter-spacing': 0.05 }, paint: { 'text-color': '#6b7280', 'text-halo-color': '#ffffff', 'text-halo-width': 1.5 } }
+        { id: 'background', type: 'background', paint: { 'background-color': '#dce4ec' } }
       ]
     },
     center: [20, 20],
@@ -91,41 +86,36 @@ function ifkInitMap() {
     fetch('{{ "data/countries-50m.json" | relURL }}')
       .then(function(r) { return r.json(); })
       .then(function(topo) {
-        var geo = topojson.feature(topo, topo.objects.countries);
+        // Land mass (white on ocean background) — single polygon, no tile seams
+        var land = topojson.feature(topo, topo.objects.land);
+        window._ifkMap.addSource('land', { type: 'geojson', data: land });
+        window._ifkMap.addLayer({
+          id: 'land-fill', type: 'fill', source: 'land',
+          paint: { 'fill-color': '#ffffff', 'fill-antialias': false }
+        });
 
+        // Country choropleth
+        var geo = topojson.feature(topo, topo.objects.countries);
         geo.features.forEach(function(f) {
           var id = String(f.id).padStart(3, '0');
           var c = byIsoNum[id];
-          f.properties.fillColor = c ? FILL_COLORS[c.status] : NO_DATA_FILL;
+          f.properties.fillColor = c ? FILL_COLORS[c.status] : '#ffffff';
           f.properties.isoNum = id;
         });
 
-        window._ifkMap.addSource('countries-choropleth', {
-          type: 'geojson',
-          data: geo,
-          buffer: 512,
-          tolerance: 0
-        });
+        window._ifkMap.addSource('countries-choropleth', { type: 'geojson', data: geo });
 
         window._ifkMap.addLayer({
-          id: 'choropleth-fill',
-          type: 'fill',
-          source: 'countries-choropleth',
-          paint: {
-            'fill-color': ['get', 'fillColor'],
-            'fill-opacity': 1,
-            'fill-antialias': false
-          }
+          id: 'choropleth-fill', type: 'fill', source: 'countries-choropleth',
+          paint: { 'fill-color': ['get', 'fillColor'], 'fill-antialias': false }
         });
 
+        // Country borders from TopoJSON mesh (shared edges only — no tile seams)
+        var borders = topojson.mesh(topo, topo.objects.countries, function(a, b) { return a !== b; });
+        window._ifkMap.addSource('borders', { type: 'geojson', data: borders });
         window._ifkMap.addLayer({
-          id: 'choropleth-outline',
-          type: 'line',
-          source: 'countries-choropleth',
-          paint: {
-            'line-color': '#94a3b8',
-            'line-width': 0.5
-          }
+          id: 'choropleth-outline', type: 'line', source: 'borders',
+          paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
         });
 
         var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });