leaflet doesn't render map

Question

I have a weird problem with leafletjs. It is my first time using this library and I don't understand what's going on.

Here is the code:

// right after <footer> tag

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script>
var map = L.map('cartomap').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

</script>

// header
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">

// content
<div id="cartomap" class="map"></div>

//style
.map {
   width: 100%;
   height: 300px;
}

The map doesn't render. I checked the HTML structure and all the tiles are loaded but the map area is just gray. Zoom buttons and attribution text are visible.

After some debugging, I found out that the rendering works if I add size to the .leaflet-tile-container:

.leaflet-tile-container {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

What am I doing wrong? Should I add this to my CSS? I think I am doing something wrong that the map doesn't automatically set the size.

Gasim Gasim · Accepted Answer · 2015-08-03T23:02:01

After some more digging I finally found the problem. Leaflet doesn't like max-width and max-height. I don't know why. I just added the following to my CSS:

.map-view img {
   max-width: none;
   max-height: none;
}

leaflet doesn't render map

1 Answers