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
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:
@@ -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' });
|
||||
|
||||
Reference in New Issue
Block a user