CODEWITHSUNDEEP
leafletmapbox
Programming lover
Programming lover

Reputation: 179

Why more than one map is not working in leaflet

I want to draw a number of maps in different rows of a table. But the maps are overlapping on one another. I wonder why is this happening. I want to see them in different rows. Here is my jsfiddle http://jsfiddle.net/pyztr17y/10/

And here is my sample code

<table>
<tr><td><div id="map" style="height:200px; width:200px;"> </div></td></tr>
<tr><td><div id="map2" style="height:200px; width:200px;"> </div></td></tr>
<tr><td><div id="map3" style="height:200px; width:200px;"> </div></td></tr>
</table>
    L.mapbox.accessToken = 'pk.eyJ1Ijoiam9oaXJidWV0IiwiYSI6InB4OG4yNEUifQ.b4xWL7oprs_pldzl0spX9Q';
var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([42.491643,    -96.413101], 10);

var map2 = L.mapbox.map('map2', 'mapbox.streets')
    .setView([42.491643,    -96.413101], 10);

var map3 = L.mapbox.map('map3', 'mapbox.streets')
    .setView([42.491643,    -96.413101], 10);

Upvotes: 2

Views: 130

Answers (1)

gusjap
gusjap

Reputation: 2515

The problem is your CSS. The first map has the id map and you have the following CSS rule for styling that map:

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

Remove the absolute positioning and it will work.

Example: jsfiddle

Upvotes: 1

Related Questions