In this example, you'll learn how to create and interact with map vectors created from GeoJSON objects.
+ A tutorial on how to manage groups of layers and use the layer switching control.
← Back to the list of examples
+This guide will show to add a simple layers control to your map that will control the visibility of base maps and overlays.
+ + + + +View example on a separate page →
+ +The first steps are to create a map and some layers, and to add at least one of those layers to the map. The minimal and midnightCommander layers will be our base layers and motorways will be an overlay. Only one base layer should be added but multiple overlays can be added initially.
var map = new L.Map('map');
+
+var minimalUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/22677/256/{z}/{x}/{y}.png',
+ minimalAttribution = 'Minimal Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ minimal = new L.TileLayer(minimalUrl, {maxZoom: 18, attribution: minimalAttribution});
+
+var midnightCommanderUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/999/256/{z}/{x}/{y}.png',
+ midnightCommanderAttribution = 'Night View Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ midnightCommander = new L.TileLayer(midnightCommanderUrl, {maxZoom: 18, attribution: midnightCommanderAttribution});
+
+var motorwaysUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/46561/256/{z}/{x}/{y}.png',
+ motorwaysAttribution = 'Motorways Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
+ motorways = new L.TileLayer(motorwaysUrl, {maxZoom: 18, attribution: motorwaysAttribution});
+
+map.setView(new L.LatLng(39.7346, -104.9894), 10).addLayer(minimal).addLayer(motorways);Next, we'll create two objects. One will contain our base layers and one will contain our overlays. These are very simple objects with simple key/value pairs. The key is what sets the text for the layer in the control ( "Night View" ). The corresponding value is just a reference to the layer ( midnightCommander ).
var baseMaps = {
+ "Minimal": minimal,
+ "Night View": midnightCommander
+};
+
+var overlayMaps = {
+ "Motorways": motorways
+};Now, all that's left to do is to create a Layers Control and add it to the map. The first parameter passed when creating the layers control is the base layers object. The second, and optional, parameter is the overlays object.
+ +var layersControl = new L.Control.Layers(baseMaps, overlayMaps);
+
+map.addControl(layersControl);© 2011 CloudMade. Map data © 2011 OpenStreetMap contributors, CC-BY-SA.
+
+
+
+
+
+
+
\ No newline at end of file