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;