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?
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
Then you should get ViewPort / Device height.
If you want to get height of an element -> jQliteObject.css(‘height’);
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:
<div class="map_wrapper" data-tap-disabled="true">
data-tap-disabled="true" disables ionic’s tap system. See documentation.
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
@triniwiz - Thanks for your input. Using the CSS
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.