CODEWITHSUNDEEP
javascriptcordovaleaflet
Mike
Mike

Reputation: 6839

Leaflet.js map on mobile height issues

I have a map I am trying to incorporate into a mobile web app. I am having issues with the height sizing of the map. I am using this code at the moment and you can see it looks ugly since it doesn't come all the way down in the picture below:

<div id="map" style="height: 400px;"></div>

enter image description here

I also tried using the code:

<div id="map" style="height: 100%;"></div>

But the map doe snot show up at all with that code, and there are no errors reported in chromes inspect element.

Upvotes: 1

Views: 389

Answers (1)

muzaffar
muzaffar

Reputation: 1736

You need to set up the height of map according to height of window after you initialize your map

$('#map').height($(window).height()+'px');

If you have header included in your window height like in the image you've attached, you need to exclude the height of that header while setting the height of map div.

For example, your header have 50px height, so set the height of map this way

$('#map').height($(window).height()-50+'px');

Upvotes: 2

Related Questions