htmlcsstwitter-bootstrapleaflet

Bootstrap and Leaflet Integration

I am having a problem in combining my website (based on bootstrap) and a webmap based on leaflet. The Mapbox tiles are shifted vertically.

I think that the issue is due to a conflict between the two .css (bootstrap and leaflet) files.

Here the link to my webpage. http://www.geo.uzh.ch/~fkaelin/Ex03.html.

I would appreciate any suggestion.

Many thanks!

Solution

  • This is kind of weird because i have used Leaflet and Bootstrap together numerous times and never seen this conflict. But, you're right, there is a conflict:

    bootstrap.css:

    img {
    vertical-align: middle;
    margin-bottom: 0px;
    margin-top: 60px; /* here it is */
}

    Your bootstrap.css put a margin-top of 60 pixels on every image in your page. This also affects the images in your tilelayer. You could counteract this by using some custom style:

    div.leaflet-tile-container > img {
    margin: 0;
}

    But i'm guessing you'de be better redownloading bootstrap or using it from CDN because i'm not seeing this problem in this Plunker:

    http://plnkr.co/edit/fHtNdt?p=preview

    Also uses Leaflet 7.3 and Bootstrap 3.2.2, i'm kind of baffled.