christian/internetforkids
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: switch world map to MapLibre GL + clicksports vector tiles
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 13s
Details
Deploy Internet for Kids / Deploy (push) Successful in 6s
Details
Deploy Internet for Kids / Health Check (push) Successful in 2s
Details
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Details
Deploy Internet for Kids / IndexNow Ping (push) Successful in 7s
Details
Deploy Internet for Kids / Promote to Latest (push) Successful in 2s
Details
Deploy Internet for Kids / Rollback (push) Has been skipped
Details
Deploy Internet for Kids / Audit (push) Successful in 2s
Details

Browse Source 
Replace Leaflet+OSM with MapLibre GL JS consuming vector tiles
from maps.clicksports.de (TileServer GL). Choropleth overlay via
TopoJSON remains the same.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-03 12:08:28 +03:00
parent 308034e40d
commit df72e6aaba
1 changed files with 84 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
layouts/shortcodes/world-map.html
View File

@@ -1,18 +1,20 @@
{{ $lang := .Page.Language.Lang }}
{{ $countries := hugo.Data.countries }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.min.css" />
<style>
.ifk-map-wrap { max-width: 100%; margin: 2rem 0; }
.ifk-map-wrap h3 { text-align: center; margin-bottom: 0.5rem; font-size: 1.25rem; }
.ifk-map-subtitle { text-align: center; color: #666; font-size: 0.85rem; margin-bottom: 1rem; }
#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; background: #f0f4f8; }
#ifk-world-map { width: 100%; height: 420px; border-radius: 8px; }
.ifk-map-legend {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
margin-top: 1rem; font-size: 0.8rem;
}
.ifk-map-legend-item { display: flex; align-items: center; gap: 0.35rem; }
.ifk-map-legend-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.1); }
.maplibregl-popup-content { font-size: 0.85rem; max-width: 260px; line-height: 1.4; }
.maplibregl-popup-content strong { font-size: 0.95rem; }
@media (max-width: 640px) { #ifk-world-map { height: 280px; } }
</style>
@@ -29,7 +31,7 @@
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4.7.1/dist/maplibre-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
<script>
(function() {
@@ -45,47 +47,96 @@
var byIsoNum = {};
countries.forEach(function(c) { byIsoNum[c.isoNum] = c; });
var map = L.map('ifk-world-map', {
center: [25, 10], zoom: 2, minZoom: 2, maxZoom: 6,
scrollWheelZoom: false, zoomControl: true
var map = new maplibregl.Map({
container: 'ifk-world-map',
style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json',
center: [10, 25],
zoom: 1.5,
minZoom: 1,
maxZoom: 6,
scrollZoom: false,
attributionControl: true
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a>',
maxZoom: 6
}).addTo(map);
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
map.on('load', function() {
fetch('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json')
.then(function(r) { return r.json(); })
.then(function(topo) {
var geo = topojson.feature(topo, topo.objects.countries);
L.geoJSON(geo, {
style: function(feature) {
var id = String(feature.id).padStart(3, '0');
geo.features.forEach(function(f) {
var id = String(f.id).padStart(3, '0');
var c = byIsoNum[id];
return {
fillColor: c ? STATUS_COLORS[c.status] : '#e2e8f0',
weight: 0.8,
color: '#94a3b8',
fillOpacity: c ? 0.8 : 0.3
};
f.properties.fillColor = c ? STATUS_COLORS[c.status] : '#e2e8f0';
f.properties.fillOpacity = c ? 0.65 : 0.15;
f.properties.isoNum = id;
});
map.addSource('countries-choropleth', { type: 'geojson', data: geo });
map.addLayer({
id: 'choropleth-fill',
type: 'fill',
source: 'countries-choropleth',
paint: {
'fill-color': ['get', 'fillColor'],
'fill-opacity': ['get', 'fillOpacity']
}
}, 'aeroway_fill');
map.addLayer({
id: 'choropleth-outline',
type: 'line',
source: 'countries-choropleth',
paint: {
'line-color': '#94a3b8',
'line-width': 0.6
}
}, 'aeroway_fill');
map.addLayer({
id: 'choropleth-hover',
type: 'fill',
source: 'countries-choropleth',
paint: {
'fill-color': '#1e293b',
'fill-opacity': 0
},
onEachFeature: function(feature, layer) {
var id = String(feature.id).padStart(3, '0');
filter: ['==', 'isoNum', '']
}, 'aeroway_fill');
var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
map.on('mousemove', 'choropleth-fill', function(e) {
var id = e.features[0].properties.isoNum;
var c = byIsoNum[id];
map.getCanvas().style.cursor = c ? 'pointer' : '';
map.setFilter('choropleth-hover', ['==', 'isoNum', c ? id : '']);
map.setPaintProperty('choropleth-hover', 'fill-opacity', c ? 0.12 : 0);
});
map.on('mouseleave', 'choropleth-fill', function() {
map.getCanvas().style.cursor = '';
map.setFilter('choropleth-hover', ['==', 'isoNum', '']);
map.setPaintProperty('choropleth-hover', 'fill-opacity', 0);
});
map.on('click', 'choropleth-fill', function(e) {
var id = e.features[0].properties.isoNum;
var c = byIsoNum[id];
if (!c) return;
var loc = c[LANG] || c.en;
var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
layer.bindPopup(
popup.setLngLat(e.lngLat).setHTML(
'<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
'<em>' + loc.law + '</em><br>' +
'<span style="color:' + STATUS_COLORS[c.status] + ';font-weight:600">' + labels[c.status] + '</span> (' + c.year + ')<br>' +
loc.detail
);
layer.on('mouseover', function(e) { e.target.setStyle({ weight: 2, color: '#1e293b' }); });
layer.on('mouseout', function(e) { e.target.setStyle({ weight: 0.8, color: '#94a3b8' }); });
}
}).addTo(map);
).addTo(map);
});
});
});
})();
</script>