vinayakkulkarni/v-mapbox

trackResize is not giving good results

Ecno92 opened this issue · 4 comments

I've just enabled trackResize. Which is enabling the mapboxgl js option to change the size of the map in case the browser window resizes.

However the default mapbox functionality is not good enough. When I quickly "drag" the window size from large to small, and back I get a result like this:

Screenshot from 2021-04-20 08-52-04

When I search around I see that there are multiple ways how to deal with this issue. Mostly it focuses on calling map.resize() at the right moment.

alex3165/react-mapbox-gl#669
soal/vue-mapbox#107
mapbox/mapbox.js#488

I'm wondering if a resolution to this issue is in scope of this library or not.
I believe we could come up with a generic solution which works for most vue users, but you could also state that this is an issue in the mapbox trackResize functionality and that we would like to see this fixed upstream.
In the mean time we could all implement a workaround in our applications.

Looking forward to your input! 😄

Yeah, it seems like everyone deals with this issue. I've found so many Stack Overflow posts on this issue. I would like to know the actual source of the issue. Does anyone know what this is from? For me, the map at first is just 200px, and i need to call map.resize() on @load on the map.

I have a resizer function which basically fixes this (but sadly it's kind of a workaround).

Will post a codesandbox solution in a bit.

Are PRs improving this welcome?

I am going to try if ResizeObserver could solve it.

ResizeObserver fixed it in my case.