fix: eliminate map tile-seam lines by removing vector tile source
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 14s
Deploy Internet for Kids / Deploy (push) Successful in 6s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s

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>
This commit is contained in:
Christian Gick
2026-04-04 08:31:58 +03:00
parent 63495fd901
commit 3bd0476abf

View File

@@ -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' });