diff --git a/static/map-embed.html b/static/map-embed.html index bed4d97..fb79d9d 100644 --- a/static/map-embed.html +++ b/static/map-embed.html @@ -43,6 +43,7 @@ body { margin: 0; overflow: hidden; } zoom: 2, scrollZoom: false, fadeDuration: 0, + maxZoom: 4, style: 'https://maps.clicksports.de/styles/klokantech-basic/style.json' }); _ifkMap.addControl(new maplibregl.NavigationControl({ showCompass: false }), 'top-right'); @@ -181,8 +182,12 @@ body { margin: 0; overflow: hidden; } renderChoropleth(); _ifkMap.on('moveend', function() { if (needsRerender()) renderChoropleth(); }); - // Keep GeoJSON source for hover/click interaction (invisible) + // Invisible GeoJSON layer for hover/click interaction _ifkMap.addSource('countries', { type: 'geojson', data: geo }); + _ifkMap.addLayer({ + id: 'countries-interaction', type: 'fill', source: 'countries', + paint: { 'fill-color': '#000000', 'fill-opacity': 0, 'fill-antialias': false } + }); _ifkMap.addLayer({ id: 'choropleth-hover', type: 'fill', source: 'countries', paint: { 'fill-color': '#667eea', 'fill-opacity': 0.2, 'fill-antialias': false }, @@ -191,18 +196,18 @@ body { margin: 0; overflow: hidden; } var popup = new maplibregl.Popup({ closeButton: true, closeOnClick: false, maxWidth: '280px' }); - _ifkMap.on('mousemove', 'choropleth-fill', function(e) { + _ifkMap.on('mousemove', 'countries-interaction', function(e) { var id = e.features[0].properties.isoNum; var c = byIsoNum[id]; _ifkMap.getCanvas().style.cursor = c ? 'pointer' : ''; _ifkMap.setFilter('choropleth-hover', c ? ['==', 'isoNum', id] : ['==', 'isoNum', '']); }); - _ifkMap.on('mouseleave', 'choropleth-fill', function() { + _ifkMap.on('mouseleave', 'countries-interaction', function() { _ifkMap.getCanvas().style.cursor = ''; _ifkMap.setFilter('choropleth-hover', ['==', 'isoNum', '']); }); - _ifkMap.on('click', 'choropleth-fill', function(e) { + _ifkMap.on('click', 'countries-interaction', function(e) { var id = e.features[0].properties.isoNum; var c = byIsoNum[id]; if (!c) return;