how to make leaflet map height variable

Question

In my Application I was making div of map as

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

but to make my map responsive I want to make height also 100%, if I make height: 100% then it is not working.

How can I make height also variable like width so that map can be seen properly on any device.

Demo : http://jsfiddle.net/CcYp6/

If you change height & width of map then you will not get map.

Provide JSfiddle of your code as well as the screenshot of how you want. — Nitesh, May 14 '13 at 12:44

score 41 · Accepted Answer · edited Jul 28 '16 at 23:19

41

You need to set the parent elements to height: 100%; first

html, body {
   height: 100%;
}

Demo

~~Demo~~ (This won't work as no parent height is defined)

Explanation: Why do you need to do that? So when you specify an element's height in % then the 1st question that arises is: 100% of what? By default, a div has height of 0px, so 100% for a div simply won't work, but setting the parent elements height to 100%; will work.

edited Jul 28 '16 at 23:19

magi182

3,427
1
15
23

answered May 14 '13 at 12:43

Mr. Alien

153,751
34
298
278

can you explane little bit ? – underscore May 14 '13 at 12:44
It may work in normal condition. But as my div contains map it want work. – vaibhav shah May 14 '13 at 12:45
@vaibhavshah Which map are you talking about? – Mr. Alien May 14 '13 at 12:49
@SamithaHewawasam Explained :) – Mr. Alien May 14 '13 at 12:50
@Mr.Alien I am using leaflet map – vaibhav shah May 14 '13 at 12:51

score 29 · Answer 2 · answered May 14 '13 at 16:33

29

You have to set the div size with JavaScript.

$("#map").height($(window).height()).width($(window).width());
map.invalidateSize();

You can find a complete example here.

answered May 14 '13 at 16:33

jgillich

71,459
6
57
85

how to add one more attribute as padding from left in $("#map").height($(window).height()).width($(window).width()); – Sagar Bhosale Jul 01 '14 at 07:09
@vaibhav shah, you could accept this answer. Thanks. – northtree Dec 29 '17 at 01:23
I haven't found this necessary. CSS does the trick. – MSC Aug 12 '20 at 11:37

score 18 · Answer 3 · answered Jun 24 '17 at 00:52

18

Use height="100vh" works in newer browser. but its ok.

answered Jun 24 '17 at 00:52

user8207609

181
1
2

I also combined this with CSS Media Queries and fantastic ;) – vondravl Apr 01 '22 at 15:00

score 2 · Answer 4 · answered Aug 12 '20 at 11:49

Put a position: relative wrapper parent around it, then position your map absolutely to fill that parent:

.map-wrapper {
  position: relative;
}

#map {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="map-wrapper">
  <div id="map"></div>
</div>

If #map already has a parent that you can position relatively, just use that; you won't need the .map-wrapper element.

Leaflet Quick Start Guide could be clearer on this point as it's a common use case. The mobile tutorial hints at it.

Thanks for the mobile tutorial link, it solved my issue! – Johan Lund Nov 26 '20 at 10:05 — Johan Lund, Nov 26 '20 at 10:05

how to make leaflet map height variable

4 Answers4

Linked