search

MAPC / datacommon

MAPC's Data Portal
https://datacommon.mapc.org/
3 stars 0 forks source link

January 2021 gallery entry not fully displaying #368

Closed atomtay closed 3 years ago

atomtay commented 3 years ago

Describe the bug For some users (subset not yet narrowed down), the January 2021 visualization does not display as expected. Rather, it is off-center, with gray bars underneath, and with no Esri layer filling in.

Expected behavior The map should load to look like this (some delay, a couple seconds maybe, on the Esri choropleth is to be expected): Screen Shot 2021-01-04 at 10 10 40 AM

Screenshots Screenshot from January 4, ~12:28pm EST (notice the faint outline of the MAPC municipal borders, but the expected colorful map does not appear. Additionally, it starts in central/western MA): Screen Shot 2021-01-04 at 12 28 02 PM

Desktop (please complete the following information):

Additional context It works on MacOS Catalina, v10.15.17, on the same version of Chrome, and also works in Firefox across both operating systems.

mzagaja commented 3 years ago

I would check the Network Requests to see if the ESRI feature service is being called here. If so it might be that, but otherwise it could be in the JavaScript library.

atomtay commented 3 years ago

I was wondering about that for the Esri piece, though that still leaves us with the tiles question. Usually this sort of thing comes up when the map's container doesn't have properly set height/width, but all our code is wrapped inside div.calendar-viz__wrapper which is preset at 700x500 pixels.

atomtay commented 3 years ago

On hard refresh, requests to the ESRI map service all return 200 (then cached as 304 Not Modified). Changing the page layout somewhat by opening Dev Tools (thus making the innerWidth/viewport smaller, but not enough to shrink the map container) caused the map to eventually change its extent to what was expected. Hard refresh, and it stays properly loaded. Close the window and re-open, and it's back to the original error.

theryankelly commented 3 years ago

In testing the February viz in full screen I experience a half-page load as well. I don't usually visit the full-screen map, but also appears to be an issue there as well. Can confirm the hard refresh did not fix but subsequent regular refresh did.

Chrome Version 87.0.4280.141 half page

atomtay commented 3 years ago

That is really interesting, as the January viz was made with react-leafet (and react-esri-leafet) while the February viz is currently using regular Mapbox GL JS. Curiouser and curiouser...

atomtay commented 3 years ago

At least for our Mapbox entries, this is resolved by adding map.resize() after the map.on('load') function call. I'll see if this is a possible solution for the January Leaflet entry. The fix has been applied to everything in the MapboxEmbeds repo, but still needs application in these React maps in the DataCommon repo: