diff --git a/static/map-embed.html b/static/map-embed.html
index 362a411..bed4d97 100644
--- a/static/map-embed.html
+++ b/static/map-embed.html
@@ -109,9 +109,9 @@ body { margin: 0; overflow: hidden; }
var east = Math.min(180, bounds.getEast());
var south = Math.max(-MAX_LAT, bounds.getSouth());
var north = Math.min(MAX_LAT, bounds.getNorth());
- // Pad bounds slightly
- var lonPad = (east - west) * 0.1;
- var latPad = (north - south) * 0.1;
+ // Large padding so small pans don't trigger re-render
+ var lonPad = (east - west) * 0.5;
+ var latPad = (north - south) * 0.5;
west = Math.max(-180, west - lonPad);
east = Math.min(180, east + lonPad);
south = Math.max(-MAX_LAT, south - latPad);
@@ -148,6 +148,7 @@ body { margin: 0; overflow: hidden; }
var url = offscreen.toDataURL('image/png');
var coords = [[west, north], [east, north], [east, south], [west, south]];
+ lastBounds = [west, north, east, south];
if (_ifkMap.getSource('choropleth-img')) {
_ifkMap.getSource('choropleth-img').updateImage({ url: url, coordinates: coords });
@@ -165,8 +166,20 @@ body { margin: 0; overflow: hidden; }
}
}
+ var lastBounds = null;
+ function needsRerender() {
+ if (!lastBounds) return true;
+ var b = _ifkMap.getBounds();
+ // Only re-render if viewport moved >30% outside last rendered area
+ var threshold = 0.3;
+ var lw = lastBounds[2] - lastBounds[0], lh = lastBounds[1] - lastBounds[3];
+ return b.getWest() < lastBounds[0] + lw * threshold ||
+ b.getEast() > lastBounds[2] - lw * threshold ||
+ b.getNorth() > lastBounds[1] - lh * threshold ||
+ b.getSouth() < lastBounds[3] + lh * threshold;
+ }
renderChoropleth();
- _ifkMap.on('moveend', renderChoropleth);
+ _ifkMap.on('moveend', function() { if (needsRerender()) renderChoropleth(); });
// Keep GeoJSON source for hover/click interaction (invisible)
_ifkMap.addSource('countries', { type: 'geojson', data: geo });