fix: inline minimal style (no flash), remove all layer-hiding code
Some checks failed
Deploy Internet for Kids / Build & Push (push) Successful in 9s
Deploy Internet for Kids / Deploy (push) Successful in 5s
Deploy Internet for Kids / Health Check (push) Successful in 1s
Deploy Internet for Kids / Smoke Tests (push) Successful in 2s
Deploy Internet for Kids / IndexNow Ping (push) Has been cancelled
Deploy Internet for Kids / Promote to Latest (push) Has been cancelled
Deploy Internet for Kids / Rollback (push) Has been cancelled
Deploy Internet for Kids / Audit (push) Has been cancelled
Some checks failed
Deploy Internet for Kids / Build & Push (push) Successful in 9s
Deploy Internet for Kids / Deploy (push) Successful in 5s
Deploy Internet for Kids / Health Check (push) Successful in 1s
Deploy Internet for Kids / Smoke Tests (push) Successful in 2s
Deploy Internet for Kids / IndexNow Ping (push) Has been cancelled
Deploy Internet for Kids / Promote to Latest (push) Has been cancelled
Deploy Internet for Kids / Rollback (push) Has been cancelled
Deploy Internet for Kids / Audit (push) Has been cancelled
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>
This commit is contained in:
@@ -53,7 +53,20 @@ function ifkInitMap() {
|
|||||||
|
|
||||||
window._ifkMap = new maplibregl.Map({
|
window._ifkMap = new maplibregl.Map({
|
||||||
container: 'ifk-world-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],
|
center: [20, 20],
|
||||||
zoom: 2,
|
zoom: 2,
|
||||||
minZoom: 1,
|
minZoom: 1,
|
||||||
@@ -66,26 +79,6 @@ function ifkInitMap() {
|
|||||||
window._ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
|
window._ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
|
||||||
|
|
||||||
window._ifkMap.on('load', function() {
|
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 }}')
|
fetch('{{ "data/countries-50m.json" | relURL }}')
|
||||||
.then(function(r) { return r.json(); })
|
.then(function(r) { return r.json(); })
|
||||||
.then(function(topo) {
|
.then(function(topo) {
|
||||||
@@ -101,16 +94,6 @@ function ifkInitMap() {
|
|||||||
|
|
||||||
window._ifkMap.addSource('countries-choropleth', { type: 'geojson', data: geo });
|
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({
|
window._ifkMap.addLayer({
|
||||||
id: 'choropleth-fill',
|
id: 'choropleth-fill',
|
||||||
type: 'fill',
|
type: 'fill',
|
||||||
@@ -119,7 +102,7 @@ function ifkInitMap() {
|
|||||||
'fill-color': ['get', 'fillColor'],
|
'fill-color': ['get', 'fillColor'],
|
||||||
'fill-opacity': ['get', 'fillOpacity']
|
'fill-opacity': ['get', 'fillOpacity']
|
||||||
}
|
}
|
||||||
}, firstLabel);
|
});
|
||||||
|
|
||||||
window._ifkMap.addLayer({
|
window._ifkMap.addLayer({
|
||||||
id: 'choropleth-outline',
|
id: 'choropleth-outline',
|
||||||
@@ -127,18 +110,7 @@ function ifkInitMap() {
|
|||||||
source: 'countries-choropleth',
|
source: 'countries-choropleth',
|
||||||
paint: {
|
paint: {
|
||||||
'line-color': '#94a3b8',
|
'line-color': '#94a3b8',
|
||||||
'line-width': 0.6
|
'line-width': 0.5
|
||||||
}
|
|
||||||
}, 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');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user