perf: reduce choropleth re-renders with 50% padding + bounds check
All checks were successful
Deploy Internet for Kids / Build & Push (push) Successful in 11s
Deploy Internet for Kids / Deploy (push) Successful in 6s
Deploy Internet for Kids / Health Check (push) Successful in 2s
Deploy Internet for Kids / Smoke Tests (push) Successful in 3s
Deploy Internet for Kids / IndexNow Ping (push) Successful in 8s
Deploy Internet for Kids / Promote to Latest (push) Successful in 1s
Deploy Internet for Kids / Rollback (push) Has been skipped
Deploy Internet for Kids / Audit (push) Successful in 2s

Only re-renders when viewport moves >30% outside pre-rendered area.
50% padding means most small pans stay within the existing image.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
2026-04-04 17:59:03 +03:00
parent 882e9141fb
commit 8e15d1aa0c

View File

@@ -109,9 +109,9 @@ body { margin: 0; overflow: hidden; }
var east = Math.min(180, bounds.getEast()); var east = Math.min(180, bounds.getEast());
var south = Math.max(-MAX_LAT, bounds.getSouth()); var south = Math.max(-MAX_LAT, bounds.getSouth());
var north = Math.min(MAX_LAT, bounds.getNorth()); var north = Math.min(MAX_LAT, bounds.getNorth());
// Pad bounds slightly // Large padding so small pans don't trigger re-render
var lonPad = (east - west) * 0.1; var lonPad = (east - west) * 0.5;
var latPad = (north - south) * 0.1; var latPad = (north - south) * 0.5;
west = Math.max(-180, west - lonPad); west = Math.max(-180, west - lonPad);
east = Math.min(180, east + lonPad); east = Math.min(180, east + lonPad);
south = Math.max(-MAX_LAT, south - latPad); south = Math.max(-MAX_LAT, south - latPad);
@@ -148,6 +148,7 @@ body { margin: 0; overflow: hidden; }
var url = offscreen.toDataURL('image/png'); var url = offscreen.toDataURL('image/png');
var coords = [[west, north], [east, north], [east, south], [west, south]]; var coords = [[west, north], [east, north], [east, south], [west, south]];
lastBounds = [west, north, east, south];
if (_ifkMap.getSource('choropleth-img')) { if (_ifkMap.getSource('choropleth-img')) {
_ifkMap.getSource('choropleth-img').updateImage({ url: url, coordinates: coords }); _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(); renderChoropleth();
_ifkMap.on('moveend', renderChoropleth); _ifkMap.on('moveend', function() { if (needsRerender()) renderChoropleth(); });
// Keep GeoJSON source for hover/click interaction (invisible) // Keep GeoJSON source for hover/click interaction (invisible)
_ifkMap.addSource('countries', { type: 'geojson', data: geo }); _ifkMap.addSource('countries', { type: 'geojson', data: geo });