Document exclusive layer group functionality

- Update example and readme.
ismyrnow · Dec 15, 2014 · 44c3029 · 44c3029
1 parent 84f3098
commit 44c3029
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -25,7 +25,9 @@ var groupedOverlays = {
   }
 };
 
-L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map);
+var options = { exclusiveGroups: ["Landmarks"] };
+
+L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
 ```
 
 The [example](example/basic.html) shows its usage with various layers.
@@ -44,7 +46,8 @@ layerControl.addOverlay(cities, "Cities", "Landmarks").
 This plugin only affects how the layers are displayed in the layer control,
 and not how they are rendered or layered on the map.
 
-Grouping base layers is not currently supported.
+Grouping base layers is not currently supported, but adding exclusive layer
+groups is. Layers in an exclusive layer group render as radio inputs.
 
 ## License
 

diff --git a/example/basic.html b/example/basic.html
@@ -1,72 +1,77 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Basic example</title>
+  <title>Basic Example</title>
+  <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
-  <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.ie.css" /><![endif]-->
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
   <link rel="stylesheet" href="../src/leaflet.groupedlayercontrol.css" />
-
-  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
-  <script src="../src/leaflet.groupedlayercontrol.js"></script>
 </head>
 <body>
+  <div id="map" style="width: 600px; height: 400px"></div>
 
-  <div id="map" style="position:absolute;width:80%;height:50%;"></div>
-
-  <script type="text/javascript">
-
-    var cities = new L.LayerGroup();
-
-    L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
-    L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
-    L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
+  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
+  <script src="../src/leaflet.groupedlayercontrol.js"></script>
+  <script>
+    var cities = new L.LayerGroup();    
+    L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities);
+    L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities);
+    L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities);
     L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
-
+    
     var restaurants = new L.LayerGroup();
-
     L.marker([39.69, -104.85]).bindPopup('A fake restaurant').addTo(restaurants);
     L.marker([39.69, -105.12]).bindPopup('A fake restaurant').addTo(restaurants);
+
+    var dogs = new L.LayerGroup();
+    L.marker([39.79, -104.95]).bindPopup('A fake restaurant').addTo(dogs);
+    L.marker([39.79, -105.22]).bindPopup('A fake restaurant').addTo(dogs);
+
+    var cats = new L.LayerGroup();
+    L.marker([39.59, -104.75]).bindPopup('A fake restaurant').addTo(cats);
+    L.marker([39.59, -105.02]).bindPopup('A fake restaurant').addTo(cats);
 
+    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
+        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
+      mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';
 
-    var cmAttr = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',
-    cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';
-
-    var minimal   = L.tileLayer(cmUrl, {styleId: 22677, attribution: cmAttr}),
-      midnight  = L.tileLayer(cmUrl, {styleId: 999,   attribution: cmAttr}),
-      motorways = L.tileLayer(cmUrl, {styleId: 46561, attribution: cmAttr});
+    var grayscale   = L.tileLayer(mbUrl, {id: 'examples.map-20v6611k', attribution: mbAttr}),
+      streets  = L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7',   attribution: mbAttr});
 
     var map = L.map('map', {
       center: [39.73, -104.99],
       zoom: 10,
-      layers: [minimal, motorways, cities]
+      layers: [grayscale, cities]
     });
 
     var baseLayers = {
-      "Minimal": minimal,
-      "Night View": midnight
+      "Grayscale": grayscale,
+      "Streets": streets
     };
 
     // Overlay layers are grouped
     var groupedOverlays = {
       "Landmarks": {
-        "Motorways": motorways,
-        "Cities": cities
-      },
-      "Points of Interest": {
+        "Cities": cities,
         "Restaurants": restaurants
+      },
+      "Random": {
+        "Dogs": dogs,
+        "Cats": cats
       }
     };
+
+    // Make the "Landmarks" group exclusive (use radio inputs)
+    var options = { exclusiveGroups: ["Landmarks"] };
 
     // Use the custom grouped layer control, not "L.control.layers"
-    var layerControl = L.control.groupedLayers(baseLayers, groupedOverlays);
+    var layerControl = L.control.groupedLayers(baseLayers, groupedOverlays, options);
     map.addControl(layerControl);
 
     // Remove and add a layer
     //layerControl.removeLayer(cities);
     //layerControl.addOverlay(cities, "Cities", "New Category");
-
   </script>
 </body>
 </html>
diff --git a/preview.png b/preview.png