----------------------------------------------------------
In the simple map example that we developed in the initial post we set the size of our map to be 600 pixels wide and 400 pixels high when we were declaring the section of the page (the
div with the id map) that would contain the map. <div id="map" style="width: 600px; height: 400px"></div>
That’s a fine size for embedding somewhere in a page, but There will come a time when you will want to make your map expand to fill the web page.
The astute reader will immediately notice that with our current size declaration using fixed units (pixels) unless all browser windows were the same size we won’t be able to accurately have a map the full size of the web page. It would be too large or too small most of the time.
To remedy this we need to declare a map size that is referenced to the browser, not a fixed unit.
We can do this by declaring our map size as a percentage of the browser window in the
<style> section using CSS.
The full code will look like this;
<!DOCTYPE html>
<html>
<head>
<title>Simple Leaflet Map</title>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
/>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script
src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js">
</script>
<script>
var map = L.map('map').setView([-41.2858, 174.78682], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
</script>
</body>
</html>
There are two differences between this example and the simple-map example.
The first is the
<style> section; <style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
}
</style>
The
body of the page is essentially the entire contents of the web page. You can see in the HTML file that anything that gets drawn on the screen is contained in the <body> tags. So our styling here ensures that there is no padding or margin for our body in the browser and then we set the html, the body and the element with the id map (which we declared in a <div>) to 100 percent of the height and width of the browser.
The only other change we need to make is to remove the fixed size declarations that we had made in the
div. So that line ends up looking like this; <div id="map"></div>
The final result is a map that will fill a browser window no matter what shape you make it.
For example;
 |
| Full Screen Map Vertical |
Or even…
 |
| Full Screen Map Horizontal |
Notice that there are no scroll bars and no borders. The contents of the page fit the browser exactly.
The full code and a live example are available online at bl.ocks.org or GitHub. A a copy of all the files that appear in the book can be downloaded (in a zip file) when you download the book from Leanpub
The description above (and heaps of other stuff) is in the Leaflet Tips and Tricks book that can be downloaded for free (or donate if you really want to :-)).
No comments:
Post a Comment