positioning a mapbox/leaflet map inside a container div

Question

I am working with Mapbox in a Ruby on Rails app. For the life of me, I cannot get the map to adhere to any simple CSS. The only CSS that allows the map to appear is giving it an absolute position with a top and bottom of 0. Altering anything other than the height and width causes the map to disappear. I want to have the map centered inside a container div. Here is the code:

<div id="map-container">
  <div id='map'>
  </div>
</div>

<script>

L.mapbox.accessToken = 'pk.eyJ1IjoiYWxvb2thdG9tbW9yb3ciLCJhIjoiNGM4ODhkZjUwMGM1ZDE4M2VjNzQ4MmQ4ODcxMjk5ZjMifQ.XVvFc8kl-0z4NAblE-mNqw';
var map = L.mapbox.map('map', 'mapbox.streets').setView([40, -74.50], 10);

</script>

And the following CSS:

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 50%;
  width: 50%;
}

If I change anything, the map disappears. I have tried to give the map-container div a position of relative. That does not work. All I want is for the map to be contained within a div, it doesn't seem like it should be difficult. There is one post about this from 2013 but it is outdated. Thanks for your help.

Solution 1

The only css rule that must be set for Leaflet's (Mapbox is an extended version of Leaflet) element when positioned static/relative is an absolute height:

#map {
    height: 200px;
}

Example: http://plnkr.co/edit/vdeyLv?p=preview

That will work always, doesn't matter how deep the element is nested. When width is not set it will use all the width available. When you want to switch to setting height in percentages, you'll need to make sure that all the anchestor elements of the map element have a height set also:

#html, #body, #map-container {
    height: 100%;
}

#map {
    height: 40%;
}

Example: http://plnkr.co/edit/rAuNC0?p=preview

I guess the reasoning behind using absolute positioning in the Mapbox examples is that one does not have to explain the above because no matter how deep you nest the map's element, it just works.

Solution 2

Just change the 'position:absolute' to 'position:relative' for both divs:

<div id="map-container">
  <div id="map">
  </div>
</div>

#map-container {
    position: relative;
    height: 180px;
    width: 600px;
}

#map {
    position: relative;
    height: inherit;
    width: inherit;
}

Note: The height and width on the '#map' element will be inherited by the parent div '#map-container', which will be '180px' and '600px' respectively in this case or whatever you set.

DEMO: http://plnkr.co/edit/qjIAiud3aUF11iQPDKj0?p=preview

Comments

[Toni Michel Caubet]

Make sure you add #map-container { position: relative; } (allways, if it's a parent of an absolute block, it has to be relative, absolute, or fixed; not static -by default-) If you can create a snippet in the question reproducing the problem, a might be able to help you

[haneulkim]

this doesn't work for me. Whenever I have leaflet map inside a div, it gets plotted on top of the map. Any help?