leaflet accordion

leaflet accordion menu

by Alex Azuero

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css">
<div id="map"></div>

CSS

body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.controlHeading { font-size: 1.7em; }

/* leaflet layers control plugin css */
.leaflet-control-layers-group-name{font-weight:700;margin-bottom:.2em;margin-left:3px}.leaflet-control-layers-group{margin-bottom:.5em}

.leaflet-control-layers .leaflet-control-layers-group-label{padding-left:20px;display:block}
.leaflet-control-layers label{padding-left:40px;padding-right:10px;display:none;}
.leaflet-control-layers label.trigger{
  position:absolute;
  left:0;
  padding:0;
  margin:0;
  display:block;
  cursor:pointer;
  font-family: FontAwesome;
}
.leaflet-control-layers label.trigger:before{content:"";font-weight:normal;}
.leaflet-control-layers .trigger-radio:checked ~ label.trigger:before{content:""}

.leaflet-control-layers .trigger-radio{display:none;}
.leaflet-control-layers .trigger-radio:checked ~ label{display:block;}

JavaScript

// this is the layers control plugin code
L.Control.GroupedLayers=L.Control.extend({options:{collapsed:!0,position:"topright",autoZIndex:!0,exclusiveGroups:[],groupCheckboxes:!1},initialize:function(a,b,c){var d,e;L.Util.setOptions(this,c),this._layers={},this._lastZIndex=0,this._handlingClick=!1,this._groupList=[],this._domGroups=[];for(d in a)this._addLayer(a[d],d);for(d in b)for(var e in b[d])this._addLayer(b[d][e],e,d,!0)},onAdd:function(a){return this._initLayout(),this._update(),a.on("layeradd",this._onLayerChange,this).on("layerremove",this._onLayerChange,this),this._container},onRemove:function(a){a.off("layeradd",this._onLayerChange).off("layerremove",this._onLayerChange)},addBaseLayer:function(a,b){return this._addLayer(a,b),this._update(),this},addOverlay:function(a,b,c){return this._addLayer(a,b,c,!0),this._update(),this},removeLayer:function(a){var b=L.Util.stamp(a);return delete this._layers[b],this._update(),this},_initLayout:function(){var a="leaflet-control-layers",b=this._container=L.DomUtil.create("div",a);b.setAttribute("aria-haspopup",!0),L.Browser.touch?L.DomEvent.on(b,"click",L.DomEvent.stopPropagation):(L.DomEvent.disableClickPropagation(b),L.DomEvent.on(b,"wheel",L.DomEvent.stopPropagation));var c=this._form=L.DomUtil.create("form",a+"-list");if(this.options.collapsed){L.Browser.android||L.DomEvent.on(b,"mouseover",this._expand,this).on(b,"mouseout",this._collapse,this);var d=this._layersLink=L.DomUtil.create("a",a+"-toggle",b);d.href="#",d.title="Layers",L.Browser.touch?L.DomEvent.on(d,"click",L.DomEvent.stop).on(d,"click",this._expand,this):L.DomEvent.on(d,"focus",this._expand,this),this._map.on("click",this._collapse,this)}else this._expand();this._baseLayersList=L.DomUtil.create("div",a+"-base",c),this._separator=L.DomUtil.create("div",a+"-separator",c),this._overlaysList=L.DomUtil.create("div",a+"-overlays",c),b.appendChild(c)},_addLayer:function(a,b,c,d){var e=L.Util.stamp(a);this._layers[e]={layer:a,name:b,overlay:d},c=c||"";var...