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

fix: rename map variable to avoid DOM id collision, restore colors
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 6s
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 
window.map was shadowed by div#map. Renamed to window._ifkMap.
Added error handling for choropleth data loading.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-04 17:11:07 +03:00
parent e93f5593e2
commit 302a02eebd
1 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
static/map-embed.html
View File

@@ -36,22 +36,23 @@ body { margin: 0; overflow: hidden; }
var byIsoNum = {}; var byIsoNum = {};
var map = new maplibregl.Map({ window._ifkMap = new maplibregl.Map({
container: 'map', container: 'map',
center: [20, 20], center: [20, 20],
zoom: 2, zoom: 2,
scrollZoom: false, scrollZoom: false,
style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json' style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json'
}); });
map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right'); _ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
map.addControl(new maplibregl.FullscreenControl(), 'top-right'); _ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
document.addEventListener('fullscreenchange', function() { document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) map.scrollZoom.enable(); if (document.fullscreenElement) _ifkMap.scrollZoom.enable();
else map.scrollZoom.disable(); else _ifkMap.scrollZoom.disable();
}); });
Promise.all([ _ifkMap.on('load', function() {
Promise.all([
fetch('/data/countries.json').then(function(r) { return r.json(); }), fetch('/data/countries.json').then(function(r) { return r.json(); }),
fetch('/data/countries-50m.json').then(function(r) { return r.json(); }) fetch('/data/countries-50m.json').then(function(r) { return r.json(); })
]).then(function(results) { ]).then(function(results) {
@@ -69,9 +70,9 @@ body { margin: 0; overflow: hidden; }
f.properties.isoNum = id; f.properties.isoNum = id;
}); });
map.addSource('countries', { type: 'geojson', data: geo }); _ifkMap.addSource('countries', { type: 'geojson', data: geo });
map.addLayer({ _ifkMap.addLayer({
id: 'choropleth-fill', type: 'fill', source: 'countries', id: 'choropleth-fill', type: 'fill', source: 'countries',
paint: { paint: {
'fill-color': ['get', 'fillColor'], 'fill-color': ['get', 'fillColor'],
@@ -79,11 +80,11 @@ body { margin: 0; overflow: hidden; }
'fill-antialias': false 'fill-antialias': false
} }
}); });
map.addLayer({ _ifkMap.addLayer({
id: 'choropleth-border', type: 'line', source: 'countries', id: 'choropleth-border', type: 'line', source: 'countries',
paint: { 'line-color': '#94a3b8', 'line-width': 0.5 } paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
}); });
map.addLayer({ _ifkMap.addLayer({
id: 'choropleth-hover', type: 'fill', source: 'countries', id: 'choropleth-hover', type: 'fill', source: 'countries',
paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2 }, paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2 },
filter: ['==', 'isoNum', ''] filter: ['==', 'isoNum', '']
@@ -91,18 +92,18 @@ body { margin: 0; overflow: hidden; }
var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' }); var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' });
map.on('mousemove', 'choropleth-fill', function(e) { _ifkMap.on('mousemove', 'choropleth-fill', function(e) {
var id = e.features[0].properties.isoNum; var id = e.features[0].properties.isoNum;
var c = byIsoNum[id]; var c = byIsoNum[id];
map.getCanvas().style.cursor = c ? 'pointer' : ''; _ifkMap.getCanvas().style.cursor = c ? 'pointer' : '';
map.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']); _ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
}); });
map.on('mouseleave', 'choropleth-fill', function() { _ifkMap.on('mouseleave', 'choropleth-fill', function() {
map.getCanvas().style.cursor = ''; _ifkMap.getCanvas().style.cursor = '';
map.setFilter('choropleth-hover', ['==', 'isoNum', '']); _ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']);
}); });
map.on('click', 'choropleth-fill', function(e) { _ifkMap.on('click', 'choropleth-fill', function(e) {
var id = e.features[0].properties.isoNum; var id = e.features[0].properties.isoNum;
var c = byIsoNum[id]; var c = byIsoNum[id];
if (!c) return; if (!c) return;
@@ -119,8 +120,9 @@ body { margin: 0; overflow: hidden; }
var readMore = { en: 'Read more &darr;', de: 'Weiterlesen &darr;', fr: 'En savoir plus &darr;' }; var readMore = { en: 'Read more &darr;', de: 'Weiterlesen &darr;', fr: 'En savoir plus &darr;' };
html += '<a class="ifk-popup-link" href="#' + anchor + '" target="_parent">' + (readMore[LANG] || readMore.en) + '</a>'; html += '<a class="ifk-popup-link" href="#' + anchor + '" target="_parent">' + (readMore[LANG] || readMore.en) + '</a>';
} }
popup.setLngLat(e.lngLat).setHTML(html).addTo(map); popup.setLngLat(e.lngLat).setHTML(html).addTo(_ifkMap);
}); });
}).catch(function(e) { console.error('Choropleth load error:', e); });
}); });
})(); })();
</script> </script>