fix: choropleth below labels + hide country names at zoom < 3
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) Successful in 6s
Deploy Internet for Kids / Promote to Latest (push) Successful in 1s
Deploy Internet for Kids / Audit (push) Has been cancelled
Deploy Internet for Kids / Rollback (push) Has been cancelled

Insert fill/outline layers before first label layer so text
stays readable. Country/place labels only visible at zoom >= 3.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-03 15:57:49 +03:00
parent c287b3cf02
commit 5a840743da

View File

@@ -80,6 +80,16 @@ 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',
@@ -88,7 +98,7 @@ function ifkInitMap() {
'fill-color': ['get', 'fillColor'],
'fill-opacity': ['get', 'fillOpacity']
}
});
}, firstLabel);
window._ifkMap.addLayer({
id: 'choropleth-outline',
@@ -98,6 +108,14 @@ function ifkInitMap() {
'line-color': '#94a3b8',
'line-width': 0.6
}
}, firstLabel);
// Hide country labels below zoom 3
layers.forEach(function(l) {
if (l.type === 'symbol' && (l.id.indexOf('country') >= 0 || l.id.indexOf('place') >= 0 || l.id.indexOf('continent') >= 0)) {
window._ifkMap.setLayoutProperty(l.id, 'visibility', 'visible');
window._ifkMap.setLayerZoomRange(l.id, 3, 24);
}
});
var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });