I have problem rendering leaflet map in a webpage using bootstrap. I have two columns col-4, col-8 in a bootstrap container. the col-4 has some text and col-8 has to render the leaflet map. But the map overlaps all other containers. I am not getting the styling right. Below is the html, css and js code.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Version</title>
<meta charset="utf-8">
<meta name"viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/uikit.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
</head>
<body>
<nav class ="navbar navbar-default navbar-fixed-top" role ="navigation">
<a class="navbar-brand" href="#"><img id ="logo" src="image/bootstrap.png">Bootstrap</a>
<div class ="container-fluid">
<div class ="navbar-header">
<button type="button" class ="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-main">
<span class="sr-only">Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class ="collapse navbar-collapse" id ="navbar-collapse-main">
<ul class ="nav navbar-nav navbar-right">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div class="padding" id ="map-container">
<div class="container">
<div class ="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
</p>
</div>
<div class ="col-md-8">
<!--p>Lorem ipsum dolor sit amet, qui ea delenit qualisque, ne duo tollit dolore hendrerit. Exerci postulant eos at, has causae electram id. Legimus contentiones eum te, eos eligendi vituperata ad, no ferri offendit referrentur vis. Homero virtute habemus ad sed, nec ferri viris in. Te labore adolescens ius, his consulatu eloquentiam ea, mea nulla appareat dignissim an. Ei his magna expetenda, nihil copiosae quo ut, percipit insolens mea an.
</p-->
<div id="map"></div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="js/main.js"></script>
</html>
CSS:
html, body{
height:100%;
width:100%;
}
.navbar{
background-color:#FFFFFF;
padding:1% 0;
font-size:12px;
}
.navbar-brand{
min-height:60px;
padding:0 20px 5px;
font-size: 16px
}
#logo{
height:55px;
width:55px;
margin: 10px 20px 10px 20px;
display:inline-block;
}
.navbar-default .navbar-nav li a {
color:#707b7c;
}
#navbar-collapse-main{
margin-right: 30px
}
#map-container{
padding-top:120px;
padding-left:10px;
}
#map {
position: absolute;
margin:0;
padding:0;
border: 1px solid black;
border-radius: 8px;
}
JS:
console.log("Document ready!");
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
center: [50.99, 10.191],
zoom: 6,
minZoom:6,
maxBounds:[[55.3915921070334,20.610351562500004],[47.17477833929906,1.7138671875000002]]
});
var basemap = L.tileLayer("https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png");
basemap.addTo(map);
Best Answer
Your map is missing a width and height. It's also specified as
position:absolute, which will get it outside the flow of its container (the.col-md-8).The critical bit of HTML is:
And the critical bit of CSS is:
See an adapted example at this plunkr.
(This is besides your example code missing the Leaflet CSS, as noted by TomazicM)