diff --git a/layouts/shortcodes/world-map.html b/layouts/shortcodes/world-map.html index 926969e..e86ce73 100644 --- a/layouts/shortcodes/world-map.html +++ b/layouts/shortcodes/world-map.html @@ -51,7 +51,7 @@ function ifkInitMap() { var byIsoNum = {}; countries.forEach(function(c) { byIsoNum[c.isoNum] = c; }); - var map = new maplibregl.Map({ + window._ifkMap = new maplibregl.Map({ container: 'ifk-world-map', style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json', center: [10, 25], @@ -62,9 +62,9 @@ function ifkInitMap() { attributionControl: true }); - map.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right'); + window._ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right'); - map.on('load', function() { + window._ifkMap.on('load', function() { fetch('{{ "data/countries-110m.json" | relURL }}') .then(function(r) { return r.json(); }) .then(function(topo) { @@ -78,9 +78,9 @@ function ifkInitMap() { f.properties.isoNum = id; }); - map.addSource('countries-choropleth', { type: 'geojson', data: geo }); + window._ifkMap.addSource('countries-choropleth', { type: 'geojson', data: geo }); - map.addLayer({ + window._ifkMap.addLayer({ id: 'choropleth-fill', type: 'fill', source: 'countries-choropleth', @@ -90,7 +90,7 @@ function ifkInitMap() { } }); - map.addLayer({ + window._ifkMap.addLayer({ id: 'choropleth-outline', type: 'line', source: 'countries-choropleth', @@ -102,17 +102,17 @@ function ifkInitMap() { var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' }); - map.on('mousemove', 'choropleth-fill', function(e) { + window._ifkMap.on('mousemove', 'choropleth-fill', function(e) { var id = e.features[0].properties.isoNum; var c = byIsoNum[id]; - map.getCanvas().style.cursor = c ? 'pointer' : ''; + window._ifkMap.getCanvas().style.cursor = c ? 'pointer' : ''; }); - map.on('mouseleave', 'choropleth-fill', function() { - map.getCanvas().style.cursor = ''; + window._ifkMap.on('mouseleave', 'choropleth-fill', function() { + window._ifkMap.getCanvas().style.cursor = ''; }); - map.on('click', 'choropleth-fill', function(e) { + window._ifkMap.on('click', 'choropleth-fill', function(e) { var id = e.features[0].properties.isoNum; var c = byIsoNum[id]; if (!c) return;