Leaflet map not sizing to dimensions of target ele

Question

I am having a hard time getting a leaflet map to render correctly inside a div in my application.

It's probably worth mentioning I am using angularJS, angular-material (with flex based layouts) and ui-router, so the page that the div lives on is a template for a state being loaded when the user invokes an action to navigate to that page (e.g. through a navbar item click).

My template file for the state is pretty simple:

<md-card>
    <div id='map' style="width: 500px; height: 500px;"></div>
</md-card>

In the controller file for the state, I have the following leaflet map initialisation code in place:

this.map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

When the map is rendered, the tiles do not get constrained to my div, they spill out:

My dom structure can be found below

The parent element for my md-card becomes scrollable, so when I scroll down I start seeing other tiles too:

My initial thoughts were perhaps I have been trying to render the map too soon, before the div has had time to render. I therefore tried wrapping my map initialisation code in a timeout (2 seconds) and I do see my white md-card show up first when the state is loaded, and then the tiles appear after the 2 second delay, but again they appear as per my screenshots.

The only other thing I can think of is perhaps the usage of flex is having an effect, I am however specifying explicit height and widths on the div holding my map, so I would have thought the map would adhere to that size.

Can anyone offer any suggestions\help as to what could be going on here?

Thanks

Answer 1

Usual symptom of missing Leaflet CSS file