188 lines
9.3 KiB
HTML
188 lines
9.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Leaflet - a modern, lightweight JavaScript library for interactive maps by CloudMade - Layers Control Example</title>
|
|
|
|
<meta charset="utf-8" />
|
|
<meta property="og:title" content="Leaflet — an open-source JavaScript library for interactive maps" />
|
|
<meta property="og:description" content="Leaflet is a modern, lightweight BSD-licensed JavaScript library for making tile-based interactive maps for both desktop and mobile web browsers, developed by CloudMade to form the core of its next generation JavaScript API." />
|
|
|
|
<link rel="icon" type="image/png" href="../docs/images/favicon.png" />
|
|
|
|
<!-- Blueprint -->
|
|
<link rel="stylesheet" href="../docs/css/blueprint/screen.css" media="screen, projection">
|
|
<link rel="stylesheet" href="../docs/css/blueprint/print.css" media="print">
|
|
<!--[if lt IE 8]><link rel="stylesheet" href="../docs/css/blueprint/ie.css" media="screen, projection"><![endif]-->
|
|
|
|
<link rel="stylesheet" href="../docs/css/screen.css" media="screen, projection" />
|
|
|
|
<script src="../docs/highlight/highlight.pack.js"></script>
|
|
<link rel="stylesheet" href="../docs/highlight/styles/github.css" />
|
|
|
|
<!-- Leaflet -->
|
|
<link rel="stylesheet" href="../dist/leaflet.css" />
|
|
<!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
|
|
<script src="../dist/leaflet.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Leaflet</h1>
|
|
<h3 class="alt">A Modern, Lightweight Open-Source JavaScript Library for Interactive Maps by <a href="http://cloudmade.com">CloudMade</a></h3>
|
|
|
|
<ul class="nav clearfix">
|
|
<li><a href="../index.html">Overview</a></li>
|
|
<li><a href="../features.html">Features</a></li>
|
|
<li><a href="../examples.html">Examples</a></li>
|
|
<li><a href="../reference.html">Documentation</a></li>
|
|
<li><a href="../download.html">Download</a></li>
|
|
<li><a class="twitter-link" href="http://twitter.com/LeafletJS">@LeafletJS</a></li>
|
|
<li><a class="github-link" href="http://github.com/CloudMade/Leaflet">GitHub Repo</a></li>
|
|
</ul>
|
|
|
|
<p><a href="../examples.html">← Back to the list of examples</a></p>
|
|
<h3>Layer Groups and Layers Control</h3>
|
|
|
|
<p>This guide will show you how to group several layers into one, and how to use the layers control to allow users to easily switch different layers on your map.</p>
|
|
|
|
<div id="map" style="height: 250px; margin-bottom: 18px"></div>
|
|
<script>
|
|
var littletonMarker = new L.Marker(new L.LatLng(39.61, -105.02)).bindPopup("This is Littleton, CO."),
|
|
denverMarker = new L.Marker(new L.LatLng(39.74, -104.99)).bindPopup("This is Denver, CO."),
|
|
auroraMarker = new L.Marker(new L.LatLng(39.73, -104.8)).bindPopup("This is Aurora, CO."),
|
|
goldenMarker = new L.Marker(new L.LatLng(39.77, -105.23)).bindPopup("This is Golden, CO.");
|
|
|
|
var citiesLayer = new L.LayerGroup();
|
|
|
|
citiesLayer.addLayer(littletonMarker);
|
|
citiesLayer.addLayer(denverMarker);
|
|
citiesLayer.addLayer(auroraMarker);
|
|
citiesLayer.addLayer(goldenMarker);
|
|
|
|
var cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
|
|
cloudmadeOptions = {maxZoom: 18, attribution: cloudmadeAttribution};
|
|
|
|
var minimalUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png',
|
|
minimal = new L.TileLayer(minimalUrl, cloudmadeOptions);
|
|
|
|
var midnightCommanderUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/{z}/{x}/{y}.png',
|
|
midnightCommander = new L.TileLayer(midnightCommanderUrl, cloudmadeOptions);
|
|
|
|
var motorwaysUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/46561/256/{z}/{x}/{y}.png',
|
|
motorways = new L.TileLayer(motorwaysUrl, cloudmadeOptions);
|
|
|
|
var map = new L.Map('map', {center: new L.LatLng(39.73, -104.99), zoom: 10, layers: [minimal, motorways, citiesLayer]});
|
|
|
|
var baseMaps = {
|
|
"Minimal": minimal,
|
|
"Night View": midnightCommander
|
|
};
|
|
|
|
var overlayMaps = {
|
|
"Motorways": motorways,
|
|
"Cities": citiesLayer
|
|
};
|
|
|
|
layersControl = new L.Control.Layers(baseMaps, overlayMaps);
|
|
|
|
map.addControl(layersControl);
|
|
</script>
|
|
|
|
<p><a target="_blank" href="layers-control-example.html">View example on a separate page →</a></p>
|
|
|
|
<h3>Layer Groups</h3>
|
|
|
|
<p>Lets suppose you have a bunch of layers you want to combine into a group to handle them as one in your code:</p>
|
|
|
|
<pre><code>var littletonMarker = new L.Marker(new L.LatLng(39.61, -105.02)).bindPopup("This is Littleton, CO."),
|
|
denverMarker = new L.Marker(new L.LatLng(39.74, -104.99)).bindPopup("This is Denver, CO."),
|
|
auroraMarker = new L.Marker(new L.LatLng(39.73, -104.8)).bindPopup("This is Aurora, CO."),
|
|
goldenMarker = new L.Marker(new L.LatLng(39.77, -105.23)).bindPopup("This is Golden, CO.");</code></pre>
|
|
|
|
<p>Instead of adding them directly to the map, you can do the following, using the <a href="http://leaflet.cloudmade.com/reference.html#layergroup">LayerGroup</a> class:</p>
|
|
|
|
<pre><code>var citiesLayer = new L.LayerGroup();
|
|
|
|
citiesLayer.addLayer(littletonMarker)
|
|
.addLayer(denverMarker)
|
|
.addLayer(auroraMarker)
|
|
.addLayer(goldenMarker);
|
|
|
|
map.addLayer(citiesLayer);</code></pre>
|
|
|
|
<p>Easy enough! Now you have <code>citiesLayer</code> that combines your city markers into one layer you can add or remove from the map at once.</p>
|
|
|
|
<h3>Layers Control</h3>
|
|
|
|
<p>Leaflet has a nice little control that allows your users control what layers they want to see on your map. In addition to showing you how to use it, we'll show another handy use for layer groups.</p>
|
|
|
|
<p>There are two types of layers — base layers that are mutually exclusive (only one can be visible on your map), e.g. tile layers, and overlays — all the other stuff you put over the base layers. In this example, we want to have two base layers (minimal and night-style base map) to switch between, and two overlays to switch on and off — a pink motorways overlay and city markers (those we created earlier). Lets create those layers and add the default ones to the map:</p>
|
|
|
|
<pre><code>var cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
|
|
cloudmadeOptions = {maxZoom: 18, attribution: cloudmadeAttribution};
|
|
|
|
var minimalUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/22677/256/{z}/{x}/{y}.png',
|
|
minimal = new L.TileLayer(minimalUrl, cloudmadeOptions);
|
|
|
|
var midnightCommanderUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/999/256/{z}/{x}/{y}.png',
|
|
midnightCommander = new L.TileLayer(midnightCommanderUrl, cloudmadeOptions);
|
|
|
|
var motorwaysUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/46561/256/{z}/{x}/{y}.png',
|
|
motorways = new L.TileLayer(motorwaysUrl, cloudmadeOptions);
|
|
|
|
var map = new L.Map('map', {
|
|
center: new L.LatLng(39.73, -104.99),
|
|
zoom: 10,
|
|
layers: [minimal, motorways, citiesLayer]
|
|
});</code></pre>
|
|
|
|
<p>Next, we'll create two objects. One will contain our base layers and one will contain our overlays. These are just simple objects with key/value pairs. The key is what sets the text for the layer in the control (e.g. "Night View"). The corresponding value is a reference to the layer (e.g. <code>midnightCommander</code>).</p>
|
|
|
|
<pre><code>var baseMaps = {
|
|
"Minimal": minimal,
|
|
"Night View": midnightCommander
|
|
};
|
|
|
|
var overlayMaps = {
|
|
"Motorways": motorways,
|
|
"Cities": citiesLayer
|
|
};</code></pre>
|
|
|
|
<!-- TODO: Link "Layers Control" to the Layers Control docs when they are created -->
|
|
<p>Now, all that's left to do is to create a Layers Control and add it to the map. The first argument passed when creating the layers control is the base layers object. The second argument is the overlays object. Both arguments are optional — for example, you can pass just a base layers object by ommiting the second argument, or just an overlays objects by passing <code>null</code> as the first argument.</p>
|
|
|
|
<pre><code>var layersControl = new L.Control.Layers(baseMaps, overlayMaps);
|
|
|
|
map.addControl(layersControl);</code></pre>
|
|
|
|
<p>Now lets <a target="_blank" href="layers-control-example.html">view the result on a separate page →</a></p>
|
|
|
|
<hr />
|
|
|
|
<p class="quiet">© 2011 <a href="http://cloudmade.com">CloudMade</a>. Map data © 2011 <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.</p>
|
|
</div>
|
|
|
|
<a href="http://github.com/CloudMade/Leaflet"><img id="forkme" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
|
|
|
<script>
|
|
hljs.tabReplace = ' ';
|
|
hljs.initHighlightingOnLoad();
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push([ '_setAccount', 'UA-4147697-4' ]);
|
|
_gaq.push([ '_trackPageview' ]);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script');
|
|
ga.type = 'text/javascript';
|
|
ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl'
|
|
: 'http://www')
|
|
+ '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0];
|
|
s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |