search

AlexLavoie42 / Nuxt-Mapbox

Elegant Mapbox integration with Nuxt
81 stars 11 forks source link

Automatically call `map.resize` when map container is resized #44

Closed XenBG closed 1 year ago

XenBG commented 1 year ago

In my website, I want to include a placeholder image from the Mapbox API and a button that toggles the display of a map. When the button is clicked, I want the container holding the placeholder image and the map to adjust its height for a better fit on the page. However, I'm facing an issue where the map <canvas> does not update its height together with the container holding it.

Video of the issue:

https://github.com/AlexLavoie42/Nuxt-Mapbox/assets/4932709/94e30b4f-4987-4e6b-9f59-4d0bbcb87bf0

AlexLavoie42 commented 1 year ago

The problem is that map.resize needs to be called after the map container is resized (see https://stackoverflow.com/questions/68593617/mapbox-gl-js-dynamically-changing-map-container-size-can-not-resize-map for an example)

For now you could implement this yourself (or feel free to open a PR!) However, I will plan to do this automatically with the next major update.

AlexLavoie42 commented 1 year ago

Fixed in #45