CODEWITHSUNDEEP
twitter-bootstrapleafletmapbox
brunosan
brunosan

Reputation: 385

Mapbox map dimensions with within Bootstrap

Context: Using Twitter Bootstrap and maps as the "slides" of the carousel

I´m trying to specify the dimensions of the map either using

var map = mapbox.map('map',false, {x: 940, y: 500});

or

#map { 
width: 940px;
height: 500 px
}

Both of them lead to this: streeeched

which basically it´s a x-streched version that only displays ok with x=256 (one tile width, right?) var map = mapbox.map('map',false, {x: 256, y: 500}); cropped

You can see the problem here (pass to the second page of the carousel, the first one uses the iframe).

I´m writing because I´ve already tried the documentation via mapbox.map(dimensions) and via the CSS dimensions, and oddly seems to work for height but not for width.

Thanks!!

Upvotes: 1

Views: 2669

Answers (1)

brunosan
brunosan

Reputation: 385

Seems some CSS properties need to be overwritten from Bootstap.

Tom sent me a fix via Mapbox support.

#map1 img {
 max-width: none;
 min-width: 0px;
}

and also add height: auto; so that the markers work too.

Upvotes: 2

Related Questions