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

ionic-v1
1

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?

2

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
3

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

4

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

HTML:

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

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

CSS:

.scroll {
    height: 100%;
}

.map_wrapper,
#map_canvas_map {
    width: 100%;
    height: 100%;
}
5

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

2 Likes
6

@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
7

:sunglasses: great glad i could help