Leaflet map not sizing to dimensions of target element


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:

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

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'

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

enter image description here

My dom structure can be found below

enter image description here

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

enter image description here

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?



Usual symptom of missing Leaflet CSS file

Answered By – ghybs

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.