'Center' of map is incorrect (in development mode only?)

[biomiker]

First off, thank you so much for this and all your really helpful work! I have noticed a small glitch out of the box: on line 66 of index.js, the call to promiseToFlyTo should result in the map being centered on the marker.
However, the map is centered at a location a bit north of the marker (see screenshot on left).

If it helps, I suspect the map may not realize it's been sized to 50% of the viewport (line 5 of _home.scss). When I change that to 100vh (see screenshot on right) the map basically looks the same except more of it is visible, and in this case, the marker is basically centered.

[colbyfayock]

hey @biomiker thanks for reporting this

i noticed this before, but it seemed to only happen during development and I thought it might be a react-leaflet issue, but maybe not since you had some luck with adjusting the height

I'll try to play around with that and see if I can figure it out. until I do, if you figured out a good solution, feel free to make a PR :) should be able to play around with it sometime this weekend otherwise

[biomiker]

Thanks for the fast response @colbyfayock ... just to clarify this is in development, I haven't tried it in a production build yet. I just started looking at the gatsby. So maybe it works fine in production?

[colbyfayock]

yeah - seems to work here right? https://gatsby-starter-leaflet.netlify.app/ 🤷

still would be nice to have it work consistently in development mode

[biomiker]

Yes it does! Consistency in development mode would be nice, but not a critical issue I suppose. What usually would account for the inconsistency?

[colbyfayock]

my guess is it has to do with how the page is rendered. you can kinda see it if you click the 2nd page and use the back button to navigate back to the homepage on the deployed environment

my guess is when it's rendered purely with JS as opposed to from the initial hit from an HTML file it loads different. not sure though