Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 6 commits
  • 3 files changed
  • 0 commit comments
  • 2 contributors
Commits on Jan 31, 2014
@blomm blomm removeLayer was clearing all the overlay layers..
...from the layer control.  The fail was happening because groupContainer on line 225 was not null, so the "// Create the group container if it doesn't exist" section will never be executed
9cd5d7e
Commits on Feb 01, 2014
@ismyrnow Made basic example more hackable
- Removed closure so things can be played with at the console.
- Assigned the layer control to a variable to test add/remove functions.
- Converted tabs to spaces to fix indentation issues.
dc81bc5
@ismyrnow Documented how to add a layer
- Replaced tabs with spaces to fix indentation issues.
228288f
@ismyrnow Moved _domGroups reset to _update
- The _update function recreates the layer control element, so the _domGroups array needs to be cleared anythimg _update is called.
f6e1e2c
@ismyrnow Merge branch 'pr/n4_blomm' b54e214
@ismyrnow Converted tabs to spaces 8680897
Showing with 97 additions and 84 deletions.
  1. +12 −0 README.md
  2. +66 −66 example/basic.html
  3. +19 −18 src/leaflet.groupedlayercontrol.js
View
12 README.md
@@ -6,6 +6,9 @@ Leaflet layer control with support for grouping overlays together.
[Demo](http://bl.ocks.org/ismyrnow/6123517)
## Usage
+
+### Initialization
+
Add groupings to your overlay layers object, and swap out the default layer
control with the new one.
@@ -27,6 +30,15 @@ L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map);
The [example](example/basic.html) shows some basic CSS styling of the new control elements.
+### Adding a layer
+
+Adding a layer individually works similarly to the default layer control, but requires that
+you also specify the group name, along with the layer and layer name.
+
+```javascript
+layerControl.addOverlay(cities, "Cities", "Landmarks").
+```
+
## Note
This plugin only affects how the layers are dislpayed in the layer control,
View
132 example/basic.html
@@ -1,87 +1,87 @@
<!DOCTYPE html>
<html>
<head>
- <title>Basic example</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
- <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" /><![endif]-->
-
- <style type="text/css">
- .leaflet-control-layers-group-name {
- font-weight: bold;
- margin-bottom: .2em;
- display: block;
- }
-
- .leaflet-control-layers-group {
- margin-bottom: .5em;
- }
-
- .leaflet-control-layers-group label {
- padding-left: .5em;
- }
- </style>
-
- <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
-
- <script src="../src/leaflet.groupedlayercontrol.js"></script>
+ <title>Basic example</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css" />
+ <!--[if lte IE 8]><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.ie.css" /><![endif]-->
+
+ <style type="text/css">
+ .leaflet-control-layers-group-name {
+ font-weight: bold;
+ margin-bottom: .2em;
+ display: block;
+ }
+
+ .leaflet-control-layers-group {
+ margin-bottom: .5em;
+ }
+
+ .leaflet-control-layers-group label {
+ padding-left: .5em;
+ }
+ </style>
+
+ <script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
+ <script src="../src/leaflet.groupedlayercontrol.js"></script>
</head>
<body>
- <div id="map" style="position:absolute;width:80%;height:50%;"></div>
+ <div id="map" style="position:absolute;width:80%;height:50%;"></div>
- <script type="text/javascript">
+ <script type="text/javascript">
- (function() {
+ var cities = new L.LayerGroup();
- 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);
- 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();
- 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);
- 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 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 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 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 map = L.map('map', {
+ center: [39.73, -104.99],
+ zoom: 10,
+ layers: [minimal, motorways, cities]
+ });
- var map = L.map('map', {
- center: [39.73, -104.99],
- zoom: 10,
- layers: [minimal, motorways, cities]
- });
+ var baseLayers = {
+ "Minimal": minimal,
+ "Night View": midnight
+ };
- var baseLayers = {
- "Minimal": minimal,
- "Night View": midnight
- };
+ // Overlay layers are grouped
+ var groupedOverlays = {
+ "Landmarks": {
+ "Motorways": motorways,
+ "Cities": cities
+ },
+ "Points of Interest": {
+ "Restaurants": restaurants
+ }
+ };
- // Overlay layers are grouped
- var groupedOverlays = {
- "Landmarks": {
- "Motorways": motorways,
- "Cities": cities
- },
- "Points of Interest": {
- "Restaurants": restaurants
- }
- };
+ // Use the custom grouped layer control, not "L.control.layers"
+ var layerControl = L.control.groupedLayers(baseLayers, groupedOverlays);
+ map.addControl(layerControl);
+
+ // Remove and add a layer
+ //layerControl.removeLayer(cities);
+ //layerControl.addOverlay(cities, "Cities", "New Category");
- // Use the custom grouped layer control, not "L.control.layers"
- L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map);
-
- }());
-
- </script>
+ </script>
</body>
</html>
View
37 src/leaflet.groupedlayercontrol.js
@@ -32,16 +32,16 @@ L.Control.GroupedLayers = L.Control.extend({
this._update();
map
- .on('layeradd', this._onLayerChange, this)
- .on('layerremove', this._onLayerChange, this);
+ .on('layeradd', this._onLayerChange, this)
+ .on('layerremove', this._onLayerChange, this);
return this._container;
},
onRemove: function (map) {
map
- .off('layeradd', this._onLayerChange)
- .off('layerremove', this._onLayerChange);
+ .off('layeradd', this._onLayerChange)
+ .off('layerremove', this._onLayerChange);
},
addBaseLayer: function (layer, name) {
@@ -65,7 +65,7 @@ L.Control.GroupedLayers = L.Control.extend({
_initLayout: function () {
var className = 'leaflet-control-layers',
- container = this._container = L.DomUtil.create('div', className);
+ container = this._container = L.DomUtil.create('div', className);
//Makes this work on IE10 Touch devices by stopping it from firing a mouseout event when the touch is released
container.setAttribute('aria-haspopup', true);
@@ -82,17 +82,17 @@ L.Control.GroupedLayers = L.Control.extend({
if (this.options.collapsed) {
if (!L.Browser.android) {
L.DomEvent
- .on(container, 'mouseover', this._expand, this)
- .on(container, 'mouseout', this._collapse, this);
+ .on(container, 'mouseover', this._expand, this)
+ .on(container, 'mouseout', this._collapse, this);
}
var link = this._layersLink = L.DomUtil.create('a', className + '-toggle', container);
link.href = '#';
link.title = 'Layers';
if (L.Browser.touch) {
L.DomEvent
- .on(link, 'click', L.DomEvent.stop)
- .on(link, 'click', this._expand, this);
+ .on(link, 'click', L.DomEvent.stop)
+ .on(link, 'click', this._expand, this);
}
else {
L.DomEvent.on(link, 'focus', this._expand, this);
@@ -146,10 +146,11 @@ L.Control.GroupedLayers = L.Control.extend({
this._baseLayersList.innerHTML = '';
this._overlaysList.innerHTML = '';
+ this._domGroups.length = 0;
var baseLayersPresent = false,
- overlaysPresent = false,
- i, obj;
+ overlaysPresent = false,
+ i, obj;
for (i in this._layers) {
obj = this._layers[i];
@@ -171,8 +172,8 @@ L.Control.GroupedLayers = L.Control.extend({
}
var type = obj.overlay ?
- (e.type === 'layeradd' ? 'overlayadd' : 'overlayremove') :
- (e.type === 'layeradd' ? 'baselayerchange' : null);
+ (e.type === 'layeradd' ? 'overlayadd' : 'overlayremove') :
+ (e.type === 'layeradd' ? 'baselayerchange' : null);
if (type) {
this._map.fire(type, obj);
@@ -196,8 +197,8 @@ L.Control.GroupedLayers = L.Control.extend({
_addItem: function (obj) {
var label = document.createElement('label'),
- input,
- checked = this._map.hasLayer(obj.layer);
+ input,
+ checked = this._map.hasLayer(obj.layer);
if (obj.overlay) {
input = document.createElement('input');
@@ -251,8 +252,8 @@ L.Control.GroupedLayers = L.Control.extend({
_onInputClick: function () {
var i, input, obj,
- inputs = this._form.getElementsByTagName('input'),
- inputsLen = inputs.length;
+ inputs = this._form.getElementsByTagName('input'),
+ inputsLen = inputs.length;
this._handlingClick = true;
@@ -282,4 +283,4 @@ L.Control.GroupedLayers = L.Control.extend({
L.control.groupedLayers = function (baseLayers, groupedOverlays, options) {
return new L.Control.GroupedLayers(baseLayers, groupedOverlays, options);
-};
+};

No commit comments for this range

Something went wrong with that request. Please try again.