Search code examples
angularbootstrap-4openstreetmap

Angular 8 Accordion with map not showing


I have the following project with Angular using bootstap accordion. When the user click on the panel, the collapse panel will show a openstreet map but for some reason the map is not showing

https://stackblitz.com/edit/angular-jdbzhe

If i change the behavior to always show panel like so : class="collapse show" then the map is correctly initialized

Implementation https://getbootstrap.com/docs/4.1/components/collapse/


Solution

  • The problem comes from the fact that it has a display: none; on the area where the canvas is supposed to be rendered.

    Add an map.updateSize() to it after you've expanded your accordion and it works!

    Have a look at this working StackBlitz edit I did.