From 02e904024f15d46770a4e67697c85886efac3b54 Mon Sep 17 00:00:00 2001
From: tsrman <tsrman@gmail.com>
Date: Thu, 9 Jun 2016 09:18:01 +0700
Subject: [PATCH] add js and css

---
 .../src/leaflet.groupedlayercontrol.css       |  19 +
 .../src/leaflet.groupedlayercontrol.js        | 388 ++++++++++++++++++
 2 files changed, 407 insertions(+)
 create mode 100644 Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css
 create mode 100644 Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js

diff --git a/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css b/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css
new file mode 100644
index 0000000..6d4a715
--- /dev/null
+++ b/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.css
@@ -0,0 +1,19 @@
+.leaflet-control-layers-group-name {
+  cursor: pointer;
+  font-weight: bold;
+  margin-bottom: .2em;
+  margin-left: 3px;
+}
+
+.leaflet-control-layers-group {
+  margin-bottom: .5em;
+}
+
+.leaflet-control-layers-group .groupHeader {
+  cursor: pointer;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none; }
diff --git a/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js b/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js
new file mode 100644
index 0000000..2946889
--- /dev/null
+++ b/Leaflet.groupedlayercontrol/src/leaflet.groupedlayercontrol.js
@@ -0,0 +1,388 @@
+/* global L */
+
+// A layer control which provides for layer groupings.
+// Author: Ishmael Smyrnow
+// Author: Navikey
+
+L.Control.GroupedLayers = L.Control.extend({
+
+    options: {
+        collapsed: true,
+        groupsCollapsed: true,
+        position: 'topright',
+        autoZIndex: true,
+        exclusiveGroups: [],
+        groupCheckboxes: []
+    },
+
+    initialize: function(baseLayers, groupedOverlays, options) {
+        var i, j;
+        L.Util.setOptions(this, options);
+
+        this._layers = {};
+        this._lastZIndex = 0;
+        this._handlingClick = false;
+        this._groupList = [];
+        this._domGroups = [];
+
+        for (i in baseLayers) {
+            this._addLayer(baseLayers[i], i);
+        }
+
+        for (i in groupedOverlays) {
+            for (j in groupedOverlays[i]) {
+                this._addLayer(groupedOverlays[i][j], j, i, true);
+            }
+        }
+    },
+
+    onAdd: function(map) {
+        this._initLayout();
+        this._update();
+
+        map
+            .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);
+    },
+
+    addBaseLayer: function(layer, name) {
+        this._addLayer(layer, name);
+        this._update();
+        return this;
+    },
+
+    addOverlay: function(layer, name, group) {
+        this._addLayer(layer, name, group, true);
+        this._update();
+        return this;
+    },
+
+    removeLayer: function(layer) {
+        var id = L.Util.stamp(layer);
+        delete this._layers[id];
+        this._update();
+        return this;
+    },
+
+    _initLayout: function() {
+        var className = 'leaflet-control-layers',
+            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);
+
+        if (!L.Browser.touch) {
+            L.DomEvent.disableClickPropagation(container);
+            L.DomEvent.on(container, 'wheel', L.DomEvent.stopPropagation);
+        } else {
+            L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
+        }
+
+        var form = this._form = L.DomUtil.create('form', className + '-list');
+
+        if (this.options.collapsed) {
+            if (!L.Browser.android) {
+                L.DomEvent
+                    .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);
+            } else {
+                L.DomEvent.on(link, 'focus', this._expand, this);
+            }
+
+            this._map.on('click', this._collapse, this);
+            // TODO keyboard accessibility
+        } else {
+            this._expand();
+        }
+
+        this._baseLayersList = L.DomUtil.create('div', className + '-base', form);
+        this._separator = L.DomUtil.create('div', className + '-separator', form);
+        this._overlaysList = L.DomUtil.create('div', className + '-overlays', form);
+
+        container.appendChild(form);
+    },
+
+    _addLayer: function(layer, name, group, overlay) {
+        var id = L.Util.stamp(layer);
+
+        this._layers[id] = {
+            layer: layer,
+            name: name,
+            overlay: overlay
+        };
+
+        group = group || '';
+        var groupId = this._indexOf(this._groupList, group);
+
+        if (groupId === -1) {
+            groupId = this._groupList.push(group) - 1;
+        }
+
+        var exclusive = (this._indexOf(this.options.exclusiveGroups, group) != -1);
+        var groupcheckbox = (this._indexOf(this.options.groupCheckboxes, group) != -1);
+
+        this._layers[id].group = {
+            name: group,
+            id: groupId,
+            exclusive: exclusive,
+            groupcheckbox: groupcheckbox
+        };
+
+        if (this.options.autoZIndex && layer.setZIndex) {
+            this._lastZIndex++;
+            layer.setZIndex(this._lastZIndex);
+        }
+    },
+
+    _update: function() {
+        if (!this._container) {
+            return;
+        }
+
+        this._baseLayersList.innerHTML = '';
+        this._overlaysList.innerHTML = '';
+        this._domGroups.length = 0;
+
+        var baseLayersPresent = false,
+            overlaysPresent = false,
+            i, obj;
+
+        for (i in this._layers) {
+            obj = this._layers[i];
+            this._addItem(obj);
+            overlaysPresent = overlaysPresent || obj.overlay;
+            baseLayersPresent = baseLayersPresent || !obj.overlay;
+        }
+
+        this._separator.style.display = overlaysPresent && baseLayersPresent ? '' : 'none';
+    },
+
+    _onLayerChange: function(e) {
+        var obj = this._layers[L.Util.stamp(e.layer)];
+
+        if (!obj) {
+            return;
+        }
+
+        if (!this._handlingClick) {
+            this._update();
+        }
+
+        var type = obj.overlay ?
+            (e.type === 'layeradd' ? 'overlayadd' : 'overlayremove') :
+            (e.type === 'layeradd' ? 'baselayerchange' : null);
+
+        if (type) {
+            this._map.fire(type, obj);
+        }
+    },
+
+    // IE7 bugs out if you create a radio dynamically, so you have to do it this hacky way (see http://bit.ly/PqYLBe)
+    _createRadioElement: function(name, checked) {
+
+        var radioHtml = '<input type="radio" class="leaflet-control-layers-selector" name="' + name + '"';
+        if (checked) {
+            radioHtml += ' checked="checked"';
+        }
+        radioHtml += '/>';
+
+        var radioFragment = document.createElement('div');
+        radioFragment.innerHTML = radioHtml;
+
+        return radioFragment.firstChild;
+    },
+
+    _addItem: function(obj) {
+        var label = document.createElement('label'),
+            input,
+            checked = this._map.hasLayer(obj.layer),
+            container,
+            layers;
+
+        if (obj.overlay) {
+            if (obj.group.exclusive) {
+                groupRadioName = 'leaflet-exclusive-group-layer-' + obj.group.id;
+                input = this._createRadioElement(groupRadioName, checked);
+            } else {
+                input = document.createElement('input');
+                input.type = 'checkbox';
+                input.className = 'leaflet-control-layers-selector';
+                input.defaultChecked = checked;
+            }
+        } else {
+            input = this._createRadioElement('leaflet-base-layers', checked);
+        }
+
+        input.layerId = L.Util.stamp(obj.layer);
+        input.groupID = obj.group.id;
+        L.DomEvent.on(input, 'click', this._onInputClick, this);
+
+        var name = document.createElement('span');
+        name.innerHTML = ' ' + obj.name;
+
+        label.appendChild(input);
+        label.appendChild(name);
+
+        if (obj.overlay) {
+            container = this._overlaysList;
+
+            var groupContainer = this._domGroups[obj.group.id];
+
+            // Create the group container if it doesn't exist
+            if (!groupContainer) {
+                groupContainer = document.createElement('div');
+                groupContainer.className = 'leaflet-control-layers-group';
+                groupContainer.id = 'leaflet-control-layers-group-' + obj.group.id;
+
+                var groupLabel = document.createElement('span');
+                groupLabel.className = 'leaflet-control-layers-group-label';
+
+                if ("" !== obj.group.name && !obj.group.exclusive) {
+                    // ------ add a group checkbox with an _onInputClickGroup function
+                    if (obj.group.groupcheckbox) {
+                        var groupInput = document.createElement('input');
+                        groupInput.type = 'checkbox';
+                        groupInput.className = 'leaflet-control-layers-group-selector';
+                        groupInput.groupID = obj.group.id;
+                        groupInput.legend = this;
+                        L.DomEvent.on(groupInput, 'click', this._onGroupInputClick, groupInput);
+                        groupLabel.appendChild(groupInput);
+                    }
+                }
+
+                var groupName = document.createElement('span');
+                groupName.className = 'leaflet-control-layers-group-name';
+                groupName.innerHTML = obj.group.name;
+                groupName.category = obj.group.name;
+
+                var collapsed = this.options.groupsCollapsed ? groupName.innerHTML = ' &#9658; ' + groupName.innerHTML : groupName.innerHTML = ' &#9660; ' + groupName.innerHTML;
+                groupName.collapsed = collapsed;
+                L.DomEvent.on(groupName, 'click', this._onLabelClick);
+
+                layers = document.createElement('span');
+                layers.className = 'groupLayers';
+                if (collapsed) {
+                    layers.style.height = '0';
+                    layers.style.display = 'none';
+                }
+                obj.group.layers = layers;
+                groupLabel.appendChild(groupName);
+                groupContainer.appendChild(groupLabel);
+                groupContainer.appendChild(layers);
+                container.appendChild(groupContainer);
+                this._domGroups[obj.group.id] = layers;
+                groupContainer = layers;
+            }
+
+            container = groupContainer;
+        } else {
+            container = this._baseLayersList;
+        }
+
+        container.appendChild(label);
+        return label;
+    },
+
+    _onLabelClick: function() {
+        if (!this.collapsed) {
+            this.collapsed = true;
+            this.innerHTML = ' &#9658; ' + this.category;
+            $(this).parent().next().css({
+                height: '0',
+                display: 'none'
+            });
+        } else {
+            this.collapsed = false;
+            this.innerHTML = ' &#9660; ' + this.category;
+            $(this).parent().next().css({
+                height: '100%',
+                display: 'block'
+            });
+        }
+    },
+
+    _onGroupInputClick: function() {
+        var i, input, obj;
+
+        this_legend = this.legend;
+        this_legend._handlingClick = true;
+
+        var inputs = this_legend._form.getElementsByTagName('input');
+        var inputsLen = inputs.length;
+        for (i = 0; i < inputsLen; i++) {
+            input = inputs[i];
+            if (input.groupID == this.groupID && input.className == 'leaflet-control-layers-selector') {
+                input.checked = this.checked;
+                obj = this_legend._layers[input.layerId];
+                if (input.checked && !this_legend._map.hasLayer(obj.layer)) {
+                    this_legend._map.addLayer(obj.layer);
+                } else if (!input.checked && this_legend._map.hasLayer(obj.layer)) {
+                    this_legend._map.removeLayer(obj.layer);
+                }
+            }
+        }
+        this_legend._handlingClick = false;
+    },
+
+    _onInputClick: function() {
+        var i, input, obj,
+            inputs = this._form.getElementsByTagName('input'),
+            inputsLen = inputs.length;
+
+        this._handlingClick = true;
+
+        for (i = 0; i < inputsLen; i++) {
+            input = inputs[i];
+            if (input.className == 'leaflet-control-layers-selector') {
+                obj = this._layers[input.layerId];
+
+                if (input.checked && !this._map.hasLayer(obj.layer)) {
+                    this._map.addLayer(obj.layer);
+
+                } else if (!input.checked && this._map.hasLayer(obj.layer)) {
+                    this._map.removeLayer(obj.layer);
+                }
+            }
+        }
+
+        this._handlingClick = false;
+    },
+
+    _expand: function() {
+        L.DomUtil.addClass(this._container, 'leaflet-control-layers-expanded');
+    },
+
+    _collapse: function() {
+        this._container.className = this._container.className.replace(' leaflet-control-layers-expanded', '');
+    },
+
+    _indexOf: function(arr, obj) {
+        for (var i = 0, j = arr.length; i < j; i++) {
+            if (arr[i] === obj) {
+                return i;
+            }
+        }
+        return -1;
+    }
+});
+
+L.control.groupedLayers = function(baseLayers, groupedOverlays, options) {
+    return new L.Control.GroupedLayers(baseLayers, groupedOverlays, options);
+};