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