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/
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.