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 });