diff --git a/static/map-embed.html b/static/map-embed.html
index eec50da..ef68c3e 100644
--- a/static/map-embed.html
+++ b/static/map-embed.html
@@ -36,22 +36,23 @@ body { margin: 0; overflow: hidden; }
var byIsoNum = {};
- var map = new maplibregl.Map({
+ window._ifkMap = new maplibregl.Map({
container: 'map',
center: [20, 20],
zoom: 2,
scrollZoom: false,
style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json'
});
- map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
- map.addControl(new maplibregl.FullscreenControl(), 'top-right');
+ _ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right');
+ _ifkMap.addControl(new maplibregl.FullscreenControl(), 'top-right');
document.addEventListener('fullscreenchange', function() {
- if (document.fullscreenElement) map.scrollZoom.enable();
- else map.scrollZoom.disable();
+ if (document.fullscreenElement) _ifkMap.scrollZoom.enable();
+ 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-50m.json').then(function(r) { return r.json(); })
]).then(function(results) {
@@ -69,9 +70,9 @@ body { margin: 0; overflow: hidden; }
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',
paint: {
'fill-color': ['get', 'fillColor'],
@@ -79,11 +80,11 @@ body { margin: 0; overflow: hidden; }
'fill-antialias': false
}
});
- map.addLayer({
+ _ifkMap.addLayer({
id: 'choropleth-border', type: 'line', source: 'countries',
paint: { 'line-color': '#94a3b8', 'line-width': 0.5 }
});
- map.addLayer({
+ _ifkMap.addLayer({
id: 'choropleth-hover', type: 'fill', source: 'countries',
paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2 },
filter: ['==', 'isoNum', '']
@@ -91,18 +92,18 @@ body { margin: 0; overflow: hidden; }
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 c = byIsoNum[id];
- map.getCanvas().style.cursor = c ? 'pointer' : '';
- map.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
+ _ifkMap.getCanvas().style.cursor = c ? 'pointer' : '';
+ _ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']);
});
- map.on('mouseleave', 'choropleth-fill', function() {
- map.getCanvas().style.cursor = '';
- map.setFilter('choropleth-hover', ['==', 'isoNum', '']);
+ _ifkMap.on('mouseleave', 'choropleth-fill', function() {
+ _ifkMap.getCanvas().style.cursor = '';
+ _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 c = byIsoNum[id];
if (!c) return;
@@ -119,8 +120,9 @@ body { margin: 0; overflow: hidden; }
var readMore = { en: 'Read more ↓', de: 'Weiterlesen ↓', fr: 'En savoir plus ↓' };
html += '';
}
- 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); });
});
})();