Getting the size of the viewport [Leaflet.js content]

I have been playing with a project using Leaflet.js to place a map within my app.

According to the Leaflet.js documentation, the map container DIV needs to have a height specified in pixels, and not percentage. Is this correct?

So, if I had to set the DIV height in pixels, is there a way within the framework that I can obtain the current viewport height and width so I can calculate an appropriate size for my map container?

could use:
document.documentElement.clientWidth or window.innerWidth.
Some devices do not support clientWidth and the new once not innerHeight (iOS i think).

I am doing it like that:
You should check if IOS >=8 -> use $window.innerHeight
else: $window.outerHeight

Then you should get ViewPort / Device height.

If you want to get height of an element -> jQliteObject.css(‘height’);

1 Like

Thank you @bengtler - I will give these a shot and see what I can do… Appreciate you taking the time to answer.

I am using Leaflet.js as well and I have no problems with this:


<ion-view view-title="Map">
    <ion-content padding="false">
        <div class="map_wrapper" data-tap-disabled="true">
            <div id="map_canvas_map"></div>

data-tap-disabled="true" disables ionic’s tap system. See documentation.


.scroll {
    height: 100%;

#map_canvas_map {
    width: 100%;
    height: 100%;

I had the same problem and i changed it from % to vh for height and vw for width i think the max should be 100 for either and since the app i was working on had tabs i used 86vh


@triniwiz - Thanks for your input. Using the CSS vh and vw attributes worked PERFECTLY for what I wanted. I just wanted my map to take up 50% of the vertical space on the device, so changing height: 200px; to height: 50vh; did EXACTLY what I wanted - thank you for that.

1 Like

:sunglasses: great glad i could help