Resize sidenav-content when toggle sidenav with Material Angular and Leaflet

Question

I'm using Angular, Angular-Material and Leaflet for creating a web that has A sidenav and a map.

<mat-sidenav-container class="map-bar-container">
    <mat-sidenav #sidenav mode="side" opened class="nav">
        <app-sidenav></app-sidenav>
    </mat-sidenav>

    <mat-sidenav-content class="cmap">
        <app-map></app-map>
    </mat-sidenav-content>
</mat-sidenav-container>

The problem is that when toggling the sidenav, the sidenav-content resized correctly, but the map inside does not, and the center of the map and its limits are offset. If you resize the window (opening the dev console also works) the map self center correctly and it works properly

I have recreated the problem on stackblitz: https://stackblitz.com/edit/angular-u3mrrv

I have tried the autosize property of mat-sidenav-container but it didn't work.

You can notice the problem at the start the map is offset, if you resize the windows it will fix, then if you toggle the sidenav, it will get offset again.

I think the problem is that leaflet is not noticing that its container is changing of size and it's not updating when toggling the sidenav, just when resizing the windows.

Any ideas?

Sam Denty Sam Denty · Accepted Answer · 2018-12-15T20:10:48

Referring to the leaflet.js documentation, you can call map.invalidateSize() to trigger a re-layout.

You should call this method whenever you open / close the sidenav component.

Resize sidenav-content when toggle sidenav with Material Angular and Leaflet

1 Answers