Menu
I'm working in a template based on these examples:
http://getbootstrap.com/examples/dashboard/
http://leafletjs.com/examples/choropleth.html
And I just want to have a full size leaflet map. However, I can't get it to work.
This is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NY Noise Map</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<!-- ####Leaflet#### -->
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<!-- ################ -->
<!-- ####Bootstrap### -->
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
<!-- ################ -->
<!-- #####Custom##### -->
<script src="Scripts/map.js"></script>
<link rel="stylesheet" href="CSS/dashboard.css" />
<!-- ################ -->
</head>
<body>
<!-- Top bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">NY Noise Map</a>
</div>
</div>
</nav>
<!-- Content -->
<div class="container-fluid">
<!-- Right Panel -->
<div class="row">
<div class="col-sm-3 col-md-2 sidebar"></div>
</div>
<!-- Main Content -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1>NYC 311 Noise Complaints</h1>
<div id="map"></div>
</div>
</div>
</body>
<script type="text/javascript">
// Map creation
createMap();
</script>
</html>
This is the dashboard.css file:
/*
* Base structure
*/
html, body, #container {
height: 100%;
overflow: hidden;
width: 100%;
}
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Sidebar
*/
.sidebar {
float: left;
height: 100%;
max-width: 100%;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/*
* Main content
*/
.main {
height: 100%;
width: 100%;
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
And this is the map.js file:
/* Map definition */
//---- Map creation
// Map size
var width = 1000,
height = 1000,
active = d3.select(null);
// Map reference
var map;
// Geojson of the neighborhoods reference
var geojson;
// ---- Map Creation
// Creates a map inside div id="map"
function createMap()
{
// Set map wrapper size
d3.select('#map')
.style('width', width + 'px')
.style('height', height + 'px');
// Create Leftlet map and center it in the desired position
// with the desirable zoom level
map = L.map('map').setView([40.658528, -73.952551], 10);
// Load a tile layer
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',
maxZoom: 18,
minZoom: 10
}).addTo(map);
}
If I comment this line:
// Set map wrapper size
d3.select('#map')
.style('width', width + 'px')
.style('height', height + 'px');
I can't see any map on the screen. It doesn't matter if I set:
#map {
height: 100px;
width: 100px;
}
Or:
#map {
height: 100%;
width: 100%;
}
On the css file. I'm wondering what's wrong.
943
Look at this simple example of Leaflet + Bootstrap combination: http://plnkr.co/edit/wH7u64?p=preview
The main thing is setting width and height of map element and all parent elements like this:
html, body, #container /*, and all other map parent selectors*/ {
height: 100%;
overflow: hidden;
width: 100%;
}
#map {
width: auto;
height: 100%;
}
To make it work in your case, you should also edit paddings and other stuff that is set on your parent elements.
70
Try with this : Leaflet fullscreen A css file is include, wich define a container (height, width and index). Edit : Officials tools
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
