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 += '' + (readMore[LANG] || readMore.en) + ''; } - 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); }); }); })();