From 418300068d1733885fa6a825ecb38bc4ba5e8c12 Mon Sep 17 00:00:00 2001
From: Christian Gick <service@agiliton.eu>
Date: Thu, 9 Apr 2026 07:29:37 +0300
Subject: [PATCH] improve map: higher DPR + circle markers for small countries
 (Cyprus, Malta)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 static/map-embed.html | 52 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 51 insertions(+), 1 deletion(-)

diff --git a/static/map-embed.html b/static/map-embed.html
index 57cec1f..77397fc 100644
--- a/static/map-embed.html
+++ b/static/map-embed.html
@@ -97,7 +97,7 @@ body { margin: 0; overflow: hidden; }
     // Render choropleth as image overlay — re-renders at high res for visible area
     var MAX_LAT = 85.051129;
     var offscreen = document.createElement('canvas');
-    var dpr = window.devicePixelRatio || 1;
+    var dpr = Math.max(2, window.devicePixelRatio || 1);
 
     function mercY(lat, north, south, H) {
       var toMerc = function(l) { var r = l * Math.PI / 180; return Math.log(Math.tan(Math.PI/4 + r/2)); };
@@ -183,6 +183,36 @@ body { margin: 0; overflow: hidden; }
     renderChoropleth();
     _ifkMap.on('moveend', function() { if (needsRerender()) renderChoropleth(); });
 
+    // Circle markers for small countries that are hard to see on the choropleth
+    var SMALL_COUNTRY_COORDS = {
+      '196': [33.4, 35.1],   // Cyprus
+      '470': [14.4, 35.9],   // Malta
+      '702': [103.8, 1.35],  // Singapore
+      '036': [134, -25]      // Australia (large but southern hemisphere, keep for reference)
+    };
+    var smallFeatures = [];
+    countries.forEach(function(c) {
+      var coords = SMALL_COUNTRY_COORDS[c.isoNum];
+      if (coords) {
+        smallFeatures.push({
+          type: 'Feature',
+          geometry: { type: 'Point', coordinates: coords },
+          properties: { isoNum: c.isoNum, color: STATUS_COLORS[c.status], name: (c[LANG] || c.en).name }
+        });
+      }
+    });
+    if (smallFeatures.length) {
+      _ifkMap.addSource('small-countries', { type: 'geojson', data: { type: 'FeatureCollection', features: smallFeatures } });
+      _ifkMap.addLayer({
+        id: 'small-countries-circle', type: 'circle', source: 'small-countries',
+        paint: {
+          'circle-radius': 8, 'circle-color': ['get', 'color'],
+          'circle-stroke-width': 2, 'circle-stroke-color': '#ffffff',
+          'circle-opacity': 0.9
+        }
+      });
+    }
+
     // Invisible GeoJSON layer for hover/click interaction
     _ifkMap.addSource('countries', { type: 'geojson', data: geo });
     _ifkMap.addLayer({
@@ -229,6 +259,26 @@ body { margin: 0; overflow: hidden; }
       }
       popup.setLngLat(e.lngLat).setHTML(html).addTo(_ifkMap);
     });
+    // Click handler for small country circles
+    if (smallFeatures.length) {
+      _ifkMap.on('mouseenter', 'small-countries-circle', function() { _ifkMap.getCanvas().style.cursor = 'pointer'; });
+      _ifkMap.on('mouseleave', 'small-countries-circle', function() { _ifkMap.getCanvas().style.cursor = ''; });
+      _ifkMap.on('click', 'small-countries-circle', function(e) {
+        var id = e.features[0].properties.isoNum;
+        var c = byIsoNum[id];
+        if (!c) return;
+        var loc = c[LANG] || c.en;
+        var labels = STATUS_LABELS[LANG] || STATUS_LABELS.en;
+        var ageLabel = AGE_LABELS[LANG] || AGE_LABELS.en;
+        var html = '<strong>' + c.flag + ' ' + loc.name + '</strong><br>' +
+          '<em>' + loc.law + '</em><br>' +
+          '<span class="ifk-popup-status" style="background:' + STATUS_COLORS[c.status] + '">' + labels[c.status] + ' (' + c.year + ')</span>' +
+          '<div class="ifk-popup-age">&#x1F464; ' + ageLabel + ': <strong>' + c.ageLimitSocial + '+</strong></div>' +
+          '<div class="ifk-popup-detail">' + loc.detail + '</div>';
+        popup.setLngLat(e.lngLat).setHTML(html).addTo(_ifkMap);
+      });
+    }
+
   }).catch(function(e) { console.error('Choropleth load error:', e); });
   });
 })();