diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html
index e86ce73..44814d3 100644
--- a/layouts/shortcodes/world-map.html
+++ b/layouts/shortcodes/world-map.html
@@ -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' });