Map reset when switch between variables

[alenastern]

When I switch between variables, the map seems to reset to a view I don't expect:

Interestingly, the chart and table look correct for this case.

[alenastern]

I'll note that this issue doesn't come up consistently for all variables! For example, I switched from Housing Problems - All (%) to Black (%) and it worked perfectly. I did try a couple of times with the environmental health and got the same issue.

[Thiyaghessan]

Hi Alena, this took me a while to figure out and involved some Javascripting. Hence, I am providing a full description of the problem here for documentation and institutionalizing knowledge.

Issue:

When users switched away from the Map tab (to Table or Charts) and returned, the choropleth map displayed incorrectly with white fill covering the polygons. The legend rendered correctly, and dragging/panning the map would partially reveal the choropleth underneath. The bug persisted across geography changes and required a page refresh to resolve.

Root Cause:

Leaflet maintains internal state tracking its container's dimensions for rendering calculations. When the Map tab is hidden (CSS display: none via bslib's tab system), Leaflet's container has zero dimensions. The existing tab-switch observer called fitBounds() to re-center the map, but Leaflet was using stale dimension values from when the container was hidden. This caused incorrect zoom/pan calculations, resulting in tiles and polygons rendering at wrong positions—manifesting as white areas covering the choropleth.

Solution:

Added a call to Leaflet's invalidateSize() method before fitBounds() when returning to the Map tab. This is Leaflet's standard API for forcing container dimension recalculation. The fix required two changes:

1. A new JavaScript custom message handler (invalidateMapSize) in www/map-loading.js that calls map.invalidateSize() and resets the waitingForLeafletRender flag, and
2. A modification of the tab-switch observer in R/server.R to send this message before fitting bounds. The map_data() call was also wrapped in shiny::isolate() to prevent the observer from triggering on data changes—it should only fire on tab switches.

Technical Decisions:

I chose to call invalidateSize() synchronously before fitBounds() rather than adding a delay, since Leaflet's invalidation is synchronous and immediate. The JS handler also resets waitingForLeafletRender to false to prevent overlay state desynchronization if the user switches tabs during a render operation. This is a standard Leaflet pattern for handling hidden containers and carries minimal risk.