stefanocudini / leaflet-panel-layers

Leaflet Control Layers extended with support groups and icons

Leaflet Panel Layers

Leaflet Control Layers extended with support groups and icons

Copyright Stefano Cudini

If this project helped your work help me to keep this alive by Paypal DONATION ❤

Tested in Leaflet v1.6.x

Demo:

opengeo.tech/maps/leaflet-panel-layers

Source code:

Github

Use Cases:

• Interactive tool by researchers from the Australian Antarctic Division
• EnviroMap by EnvironSensing
• Leaflet Control Search (Official demos)
• Pine Interactive Map

Options

Option	Default	Description
compact	false	panel height minor of map height
collapsed	false	panel collapsed at startup
autoZIndex	true	set zindex layer by order definition
collapsibleGroups	false	groups of layers is collapsible by button
groupCheckboxes	false	adds a checkbox to the group title to de-/select all layers in the group
selectorGroup	false	select all layer of a group
buildItem	null	function that return row item html node(or html string)
title	''	title of panel
className	''	additional class name for panel
position	'topright'	position of control

Events

Event	Data	Description
'panel:selected'	{layerDef}	fired after moved and show markerLocation
'panel:unselected'	{}	fired after control was expanded

Methods

Method	Arguments	Description
addBaseLayer()	layerDef,group,collapsed	add new layer item definition to panel as baselayers
addOverlay()	'Text message'	add new layer item definition to panel as overlay
removeLayer()	'Text searched'	remove layer item from panel
configToControlLayers()	'Text searched'	convert config from Control.PanelLayers to Control.Layers

Usage

Panel Item Definition formats

	{
		name: "Bar",
		icon: iconByName('bar'),
		layer: L.geoJson(Bar, {pointToLayer: featureToMarker })
	}

definition in JSON format permit to store simply the configuration type contains a Leaflet method in this case L.geoJson() args is the arguments passed to the method: L.geoJson(river)

	{
		layer: {
			type: "geoJson",
			args: [ river ]
		},
	}

definition of a group

	{
		group: "Title Group",
		collapsed: true,
		layers: [
		...other items...
		]
	}

Multiple active layers with icons

var baseLayers = [
	{
		active: true,
		name: "OpenStreetMap",
		layer: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
	}
];
var overLayers = [
	{
		name: "Drinking Water",
		icon: '<i class="icon icon-water"></i>',
		layer: L.geoJson(WaterGeoJSON)
	},
	{
		active: true,
		name: "Parking",
		icon: '<i class="icon icon-parking"></i>',
		layer: L.geoJson(ParkingGeoJSON)
	}
];
map.addControl( new L.Control.PanelLayers(baseLayers, overLayers) );

Build panel layers from pure JSON Config

var panelJsonConfig = {
    "baselayers": [
        {
            "active": true,
            "name": "Open Cycle Map",
            "layer": {
                "type": "tileLayer",
                "args": [
                    "https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
                ]
            }
        },
        {
            "name": "Landscape",
            "layer": {
                "type": "tileLayer",
                "args": [
                    "https://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png"
                ]
            }
        },        
        {
            "name": "Transports",
            "layer": {
                "type": "tileLayer",
                "args": [
                    "https://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"
                ]
            }
        }
    ],
    "overlayers": [
        {
            "name": "Terrain",
            "layer": {
            "type": "tileLayer",
            "args": [
                "https://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png", {
                "opacity": 0.5
                }
            ]
            }
        }
    ]
};
L.control.panelLayers(panelJsonConfig.baseLayers, panelJsonConfig.overLayers).addTo(map);

Grouping of layers

L.control.panelLayers(
	[
		{
			name: "Open Street Map",
			layer: osmLayer
		},
		{
			group: "Walking layers",
			layers: [
				{
					name: "Open Cycle Map",
					layer: L.tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')
				},
				{
					name: "Hiking",
					layer: L.tileLayer("https://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png")
				}
			]
		},
		{
			group: "Road layers",
			layers: [
				{
					name: "Transports",
					layer: L.tileLayer("https://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png")
				}
			]
		}
	],
	{collapsibleGroups: true}
).addTo(map);

Collapse some layers' groups

L.control.panelLayers([
	{
		name: "Open Street Map",
		layer: osmLayer
	},
	{
		group: "Walking layers",
		layers: [
			{
				name: "Open Cycle Map",
				layer: L.tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')
			},
			{
				name: "Hiking",
				layer: L.tileLayer("https://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png")
			}			
		]
	},
	{
		group: "Road layers",
		collapsed: true,
		layers: [
			{
				name: "Transports",
				layer: L.tileLayer("https://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png")
			}
		]
	}
]).addTo(map);

Add layers dynamically at runtime

var panel = L.control.panelLayers();

$.getJSON('some/url/path.geojson', function(data){
	panel.addOverlay({
		name: "Drinking Water",
		icon: '<i class="icon icon-water"></i>',
		layer: L.geoJson(data)
	});
});

Build

This plugin support Grunt for building process. Therefore the deployment require NPM installed in your system. After you've made sure to have npm working, run this in command line:

npm install
grunt

leaflet-panel-layers's Issues

addOverlay() - does not add layer._events, add and remove

Hi!

I'm facing a problem with using addOverlay(). Using this function the added layer does not contain the leaflet layer._events.
They can look like this:

_events:
add: [{…}]
remove: [{…}]

Since these are not added for example the leaflet events overlayadd and overlayremove does not get fired when a layer have been added through addOverlay()

is there any fix/workaround for this? I need to use the addOverlay() function.

Code that does not add the layer.events

var emptyLayer = new L.GeoJSON();
overlays = [{
        group: "Test group",
        collapsed: true,
        layers: []
    }

];

var layerControl = L.control.panelLayers(baseLayers, overlays, {
    collapsibleGroups: true,
    compact: true,
    collapsed: false
}).addTo(map);

layerControl.addOverlay({layer: emptyLayer, active: false}, 'Test addoverlay', 'Test group"');

Code that does add the layer._events (but I can't use this method since I need to add layers dynamically)

var emptyLayer = new L.GeoJSON();
overlays = [{
        group: "Test group",
        collapsed: true,
        layers: [{
            name: 'Test',
            layer: emptyLayer,
            active: false
        }]
    }

];

var layerControl = L.control.panelLayers(baseLayers, overlays, {
    collapsibleGroups: true,
    compact: true,
    collapsed: false
}).addTo(map);

Using the default Leaflet control does work (adds the layer._events):

var emptyLayer = new L.GeoJSON();
var layerControl = L.control.layers(null, null).addTo(map);
layerControl.addOverlay(emptyLayer,'Test');

Error in css

Any idea why I can not add the panel to my map? Why is that changing my map style?

My code:

var panelLayers = new L.Control.PanelLayers(null, baseLayers);
map.addControl(panelLayers);

Load data on layer show

Have some way to only load data (AJAX) after clicking on a layer button?

uncheck a layer

Hi

Thank you for this neat plugin.

I have a baselayer group with radio buttons, and I have another overlayer group with checkboxes. But I want this overlay group to behave like a radio button group, in the sense that I can choose only one of its options. I wrote a conditional statement that removes the second layer if I select the first, and vice versa, and it works, but the tick in the box does not disappear. Is there a way to fix that?

Thank you

Add BING MAP

I have been trying to add basemaps from Bing and I have no error. Can you add Bing maps?

Old leaflet version listed as dependency

"leaflet": "~1.3.0" is provided as a dependency in package.json but this version is quite old, and therefore misses out on bug fixes/performance/features etc since this version.

I am using leaflet-panel-layers with leaflet version 1.8.0, through an override in my project and it appears to work ok.

Changing the dependency to "leaflet": "^1.3.0" appears sensible.

layer.addTo(map) collapses all the groups

Description: I currently have about 5 groups with several layers inside. Anytime I add or remove a layer in the code, using layer.addTo(map) or map.removeLayer(layer) it closes all the groups. This is understandably annoying.

Code example:

const legendGroups = Array.from(document.querySelectorAll(`.leaflet-panel-layers-grouplabel`));

legendGroups.forEach((group) => {

    group.addEventListener('click', () => {
        
        switch (group.innerText) {

            case '-\nLayer1':

                cleanMap();

                map.fitBounds(layer1.getBounds());
                layer1.addTo(map);  /* The layer control collapses when this method executes */

                break;

             case '-\nLayer2':

                cleanMap();

                map.fitBounds(layer2.getBounds());
                layer2.addTo(map);

                break;

        };
    });

});

Edit: This also happens if I try to add any layer manually in the browser console. This really makes it seem that addTo and removeLayer methods are the point of conflict with the plugin.

Separate purely visual CSS from functional

This plugin is just what I need. However, I need to apply the functionality which it gives beyond the native Leaflet layers control, without changing the visual style (specifically, I don't want a full side-bar, I don't want a translucent background, and I don't want borders round entries).

Would it be simple to separate out the CSS rules which visually style the plugin from those which are functionally required (such as display, etc)?

I'll try to look at this myself as well.

how to add layer and group dynamically?

Dear Stefano, thank you for your plugin.

Trying to figure out how to add a layer and assign it to a group:

This work as expected:
var myItem = {
active: true,
name: "Isolines",
layer: {
type: "tileLayer.wms",
args: ["https://siat.regione.umbria.it/arcgis/services/public/DBT_05_Orografia/MapServer/WMSServer", {
layers: '13',
format: 'image/png',
transparent: true,
//minZoom: 13
}
]
}
};
panel.addOverlay(myItem);

this does not:
var myLayerGroup = [{
group: "WMS Layers",
layers: [
{
active: true,
name: "Isolines",
layer: {
type: "tileLayer.wms",
args: ["https://siat.regione.umbria.it/arcgis/services/public/DBT_05_Orografia/MapServer/WMSServer", {
layers: '13',
format: 'image/png',
transparent: true,
//minZoom: 13
}
]
}
}]
}];
panel.addOverlay(myLayerGroup);

error: layer not defined in item

I there something i am missing, or an unsupported feature?

Select All function

I have implemented "Select All" function to check/uncheck all overlays by group. It works well with several GeoJson Layers.

BUT, trying to add a 26th layer (like "sat", a tileLayer) in the panel group,
when I uncomment the snippet below in JS fiddle, the buttons crash:
the 3 buttons become unvisible.

This only happens when clicking on the button "Select All" of the first group.

The layer to add can be a tileLayer or GeoJson layer, same results.

Code Example: JsFiddle.

At line 268, I struggle here:

var baseLayers = [
    {
        name: 'Street',
        layer: googleLayer
    }//,
    //{
    //    name: 'Satellite',
    //    layer: sat
    //}
];

I don't know if it's the good place to publish this issue. I can delete this post if it disturbs.

ordering layers in panel

Hi,
This plugin is awesome, but somehow, i can't fix one issue, about the layers order, what are the rules for that plugin? or is there any solution to order manually the layers

thanks
uriel

Enhance 'buildItem' to be layer specific instead of just group specific

I'd like to use the 'buildItem' function for just one layer in the layer control, or have different buildItem functions for each layer.

Disable scroll propagation (Leaflet 1.0.0+)

Issue: Can't scroll when using a lot of layers, because scroll event is propagated to the map instead.
Reason: L.Browser.touch can be true for desktop browsers. (docs 0.7.7 vs 1.3.0) (src 0.7.x vs 1.0.x)

leaflet-panel-layers/src/leaflet-panel-layers.js

Lines 356 to 364 in 709fdd4

	if (!L.Browser.touch) {
	L.DomEvent
	.disableClickPropagation(container)
	.disableScrollPropagation(container);
	} else
	L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
	//FIX IE 11 drag problem
	L.DomEvent.disableClickPropagation(container);

Check this jsfiddle example.
I'm not sure why if (!L.Browser.touch) is needed, but line 358 is needless, since it gets executed anyway in 364

rename config from overlayers to overlays

according to the Leaflet documentation

Leaflet 1.0 compatibility

Hi, thanks for this awesome plugin!

I am trying to recreate it on my own scripts and it seems that some of your paths on the example folders are missing or directing to the wrong directory. For instang in group-layers.html there is a link referring to:

<link rel="stylesheet" href="/maps/leaflet/dist/leaflet.css" />

which seems that "maps" folder is not on the master folder. Perhaps just the leaflet.css and leaflet.js from the last versions of Leaflet?

Best,

Loading overlay

One of my overlays loads more than 25,000 records, so it takes a few seconds to show up on the map. What would be the best way to show a loading icon or disable the checkbox while it is not fully loaded? I use the 'panel:selected' listener to launch a custom function that loads the points into a markerClusterGroup, so I get the item object in that function so I can work with it.
Thanks

Missing null check when layerController is removed

Hi, I get Uncaught TypeErrors from both c and this._map when the controller is removed, seems to be that the click event is handled after the controller is removed from the map. We have to redraw the map item layers when changing base layer to add new parameters to them, think this could be solved by a setTimeout on our side, but I think the best way is to have null checks in case it's removed before the click event is finished 😄

dynamic control

Hi

I am working on a map in which the user can select an option from a slider and depending on that option, I read a certain file and load it as an overlayer. I am using this great plugin to organize my overlayer groups. I am listening to the 'update' event of the slider. My issue is that everytime an option is chosen, the entire control panel is removed and reloaded, which makes the map very slow. Is there an update function of the control panel that wouldn't remove it?

Thank you

Leaflet 1.4

I just upgraded lefaflet to the latest 1.4 from 1.2 version and it breaks the plugin. The error message is :

Uncaught TypeError: Cannot read property 'style' of undefined
    at expand (leaflet.js:5)
    at e._expandIfNotCollapsed (leaflet.js:5)
    at e.addTo (leaflet.js:5)

Any idea how to fix it?

Select all layers in specified group via code?

Is there a possibility to check all layers in a group in a code?

I have few groups created dynamically and want to select all layers form specified one?

Or maybe is it possible to set Id to the DOM element when creating tree so it will be possible to get this element by Id and perform click() on it?

Group Layers in a Collapsible Panel

couldn't add more than 3 layers

I tried to add more layers using the plugin as a group but I can only add 3 layers. The rest are not even added in html. I am using bootleaf template using bootstrap, jquery core, and jquery ui with leaflet 0.7.3. My code is the following.

var baseLayers = [
    {
        name: "Mapbox Street",
        layer: streets,
        "active": true
    },
    {
        name: "Esri Satellite",
        layer: satellite
    },
    {
        name: "Mapbox Grayscale",
        layer: grayscale
    }
];
var overLayers = [
    {
        group: "Lake Victoria Basin Land Cover",
        layers: [
            {
                name: "Land Cover - 2014",
                icon: iconByName('landcover'),
                layer: landcover2014
            },
            {
                name: "Land Cover - 2014",
                icon: iconByName('landcover'),
                layer: landcover2014
            },
            {
                name: "Land Cover - 2014",
                icon: iconByName('landcover'),
                layer: landcover2014
            }
        ]
    },
    {
        group: "National Boundaries",
        layers: [
            {
                name: "National Boundaries",
                icon: iconByName('boundaries'),
                layer: boundaries
            }
        ]
    }
];

panelLayers = new L.Control.PanelLayers(baseLayers, overLayers, {collapsed: false});

map.addControl(panelLayers);

I have used jquery to hide layer labels on collapse as they are shown on collapse too.

 $(".leaflet-panel-layers-overlays span").css("display", 'none');
$( ".leaflet-panel-layers" ).mouseover(function() {
    $(".leaflet-panel-layers-overlays span").css("display", 'inline');
    $(".leaflet-panel-layers-overlays input").css("display", 'inline');
});
$( ".leaflet-panel-layers" ).mouseout(function() {
    $('.leaflet-panel-layers-overlays span').hide();
    $(".leaflet-panel-layers-overlays input").css("display", 'none');
});

does not work with sheetsee js

see http://jsfiddle.net/gLyb1uzc/1/

Love the plugin but it does not work with sheetsee for some reason. I added an issue to sheetsee as well. I am a novice in terms of js so maybe I have overlooked something simple. I'm just trying to add points from a google spreadsheet, which is why I looked at sheetsee, but that is another issue. Just replace sheetsee with mapbox js and it works fine.

why not support click of event

why not support click of event when click item or group

Firefox checkbox slide!

on Firefox when after toggle, only the checkbox is left visible.

Cannot read property '_leaflet_id' of undefined

Hi,
I would like to put your plugin into my project with GeoJSON already in place in my database. I already also a json configuration for my layers like:

[
    {
        "order" : 1,
        "id": "default", 
        "clustering": false,
        "name": "Map", 
        "center": {
            "lat": 45.3902213,
            "lng": 6.8629282,
            "zoom": 11
        },
        "layers": { 
            "baselayers": [
                {
                    "name": "LandMap",
                    "type": "xyz",
                    "url": "http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png",
                    "active": false,
                    "options":{}
                },
                {
                    "name": "OpenCycleMap",
                    "type": "xyz",
                    "url": "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
                    "active": false,
                    "options":{}
                },
                {
                    "name": "OpenStreetMap",
                    "type": "xyz",
                    "url": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
                    "active": true,
                    "options":{}
                }
            ]
        }
    }
]

There must be corresponding to your plugin to make it work.

Thank you, Sorry for my english, I'm french.

map.removeLayer causing problems

Hello, I'm in the process of trying to add a "toggle all layers" selection, and have noticed that using the map.removeLayer() method external to the panel-layers toggle (such as a click event) causes the panel-layers control to disappear.
See example here:
http://pastebin.com/MXqafEKg

fix event clink in baselayers

groupCheckboxes isn't a thing

Looks like you've replaced it with "selectorGroup", but your readme still refers to "groupCheckboxes" as well.

selectable group

create option for constructor of item layer

collapsible groups

Hi @mikifus I think that your fork is very interesting to integrate in main project

please fix this little bug and send me a pull request! ;-)

here: https://github.com/mikifus/leaflet-panel-layers/blob/148f6ceaf34453d0dc8345951e213b3d079f02c8/dist/leaflet-panel-layers.src.js#L156

obj.group = { name: ob.group };

replace with:

obj.group = { name: obj.group };

zindex lost on layer change

TODO setting zindex of current active layer to the max zindex

Working with WMS Layers

Hi there, great work here. I'm wondering if you have a version that allows one to use WMS layers (served by my GeoServer) for the Group Layers script? I have several layers that are Areas, and several that are points, and would like to include a couple of basemap options. Thank you!

Leaflet 1.4 _section undefined

var panelLayers = new L.Control.PanelLayers(null, overLayers, {
compact: true,
collapsibleGroups: true,
});
Map.addControl(panelLayers);

=> ERROR this._section is undefined

Stack trace:
expand leaflet.js:5:52246
_expandIfNotCollapsed leaflet.js:5:55964
addTo leaflet.js:5:51610
addControl leaflet.js:5:50441

Creates a new layer whenever checked/unchecked instead of adding/removing from map

I noticed the layer-id changes when I add/remove the same item via the checkbox.
This really messes with any functionality such as click handlers that may be attached to a layer, or other adjustments that might have been made during use (such as opacity controls, editing).

Center Icon

I am following the code in this example:
https://labs.easyblog.it/maps/leaflet-panel-layers/examples/collapsible-panel.html

It is all working and I was also able to use a glyphicon instead of a saved icon. My issue is that I can not get the icons (either from file or glyphicon source) to center in the collapsed window. Any advice?

Relevant sections of code attached.
I tested the CSS in JFiddle and it correctly places the icon at the center of the box so it must be that the box is not centered.

code.zip

Allow an Overlay group to use radio buttons

For example, allow by adding an option to the group definition:
radio: true,
Or some other reasonable keyword.

Note that similar functionality has been implemented in the (now stagnant) leaflet-groupedlayercontrol, although they used an array of group names:

exclusiveGroups: ["Landmarks"]

Related to #39

Put geoJson var instead of creating it?

Hi, I am using your plugin, but I am facing some troubles. It doesn't display the "overlay" name (the one the user sees) in some cases, and the items aren't ordered as it they are within the array.
This is how code looks:

var layerBars = L.geoJson(Bar, { ....and other geoJson options});

Then

var overLayers = [
    {
        name: "Bar",
        icon: iconByName('bar'),
        layer:  layerBars
     },
        ......

I am new with JS and CSS, I don't know if the problem has to do with CSS too.
I thought I had to create the L.geoJson within the array declaration, I didn't try it yet.
Any suggestion? Thanks!

create new method for compatibility L.Control.Layers

create new method for converting configuration FROM/TO L.Control.Layers ofr baselayers and overlays defitions

Closing layers

It would be really neat if collapsing a group layer automatically de-activated all its member layers. Is there a way that I can achieve this please?

Tag releases on git

Hello @stefanocudini and congratulations for this project.
Can you add tags to the versions on npmjs even in the git repository?
It seems that here they stop at version v1.1.0 while on npmjs the releases continue (today you are at 1.2.3).

Thanks

Dynamically adding base layers re-orders groups

Hi, thanks for all of your work!
I am experimenting with dynamically adding layer, currently just base layers. Interestingly, this causes the groups to be re-ordered according to the order the layers are added. Not sure if this is an intended feature or a bug. If it is intentional is there a way to disable it?
In the code below note that the group ESRI is created above the group Google. In the resulting map the groups are re-ordered: OSM,Google, ESRI. If I change the order of the last last two lines the group order is: OSM, ESRI, Google

` /-----------------------------
LAYERS - BASE
-----------------------------/

            //REFERENCE: http://leaflet-extras.github.io/leaflet-providers/preview/
            OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{attribution:'<p>Basemap: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a></p>'});
            Esri_NatGeoWorldMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer/tile/{z}/{y}/{x}',{attribution:'<p>Basemap: &copy; ESRI</p>'});
            Esri_WorldImagery = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',{attribution:'<p>Basemap: &copy; ESRI</p>'});
            Esri_WorldTopoMap = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',{attribution:'<p>Basemap: &copy; ESRI</p>'});
            OpenMapSurfer_Roads = L.tileLayer('https://maps.heigit.org/openmapsurfer/tiles/roads/webmercator/{z}/{x}/{y}.png',{attribution:'<p>Basemap: &copy; <a href="https://www.openstreetmap.org/copyright">OSM</a></p>',maxZoom: 24, maxNativeZoom:18}).addTo( map );
            
            // Google Backgrounds: valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
            //var gRoads = L.gridLayer.googleMutant({type: 'roadmap'}); //API restriction?
            var gSatellite = L.gridLayer.googleMutant({type: 'satellite'});
            //var gTerrain = L.gridLayer.googleMutant({type: 'terrain'}); //API restriction?
            var gHybrid = L.gridLayer.googleMutant({type: 'hybrid'});

            /*               
            layerControl.addBaseLayer(OpenMapSurfer_Roads, "OMS Road (Max Zoom Enabled)");
            layerControl.addBaseLayer(OpenTopoMap, "Open Topo Map");
            layerControl.addBaseLayer(Esri_NatGeoWorldMap, "Esri NatGeoWorldMap");
            layerControl.addBaseLayer(Esri_WorldImagery, "Esri WorldImagery");
            layerControl.addBaseLayer(Esri_WorldTopoMap, "Esri WorldTopoMap");
            
            layerControl.addBaseLayer(gSatellite, "Google Satellite");
            layerControl.addBaseLayer(gHybrid, "Google Hybrid");
            */


            var base = {
   
                    title: 'Base Layers',
                    layers: [
                        {
                            group: "OSM",
                            collapsed: false,
                            layers: [
                                {
                                    name: "OMS Road (Max Zoom Enabled)",
                                    active: true,
                                    layer: OpenMapSurfer_Roads
                                },
                                {
                                    name: "Open Topo Map",
                                    layer: OpenTopoMap
                                }
                            ]
                        },
                        {
                            group: "ESRI",
                            collapsed: true,
                            layers: [
                                {
                                    name: "Esri NatGeoWorldMap",
                                    layer: Esri_NatGeoWorldMap
                                },
                                {
                                    name: "Esri WorldImagery",
                                    layer: Esri_WorldImagery
                                }
                            ]
                        },
                        
                        {
                            group: "Google",
                            collapsed: true,
                            layers: [
                                {
                                    name: "Google Satellite",
                                    layer: gSatellite
                                }
                            ]
                        }                            
                        
                    ]};
   
            
            
            var base1 = L.control.panelLayers(base.layers, null,  {
                title: base.title,
                position: 'topleft',
                compact: true,//panle will take up only space needed instead of page height
                collapsibleGroups:true,//alows group to be colapsed
                collapsed: true //panel will colaps on mouse off
            }).addTo(map);
            
            base1.addBaseLayer({layer: gHybrid}, "Google Hybrid","Google");
            base1.addBaseLayer({layer: Esri_WorldTopoMap}, "Esri WorldTopoMap","ESRI");`

Group Layers order not accordingly

I am using leaflet panel layers plugin and I am inseritng three groups in the overlays area but the issue is they are not appearing in the order given.
I am writing the code for overlays as following
var overLayers = [ { group: "Status Wise", collapsed: true, layers: [my layers ] }, { group: "Commercial", collapsed: true, layers: [my layers] }, { group: "Residential", collapsed: true, layers: [] }

But the groups are appearing in the following order.

Embbed control in sidebar

There is some way to put the control in sidebar instead of map?

collapsible panel do not support Touch-Browsers

The collapsible panel do not open when using Touch-Browsers.
Switch between layers works perfectly.

I tried it using leaflet 0.7.3

Anyhow, beautiful layer control solution!
Thankyou very much!

How to remove layer from group dynamically?

I have noticed that both methods below only works when layer is added to a map directly and not to a group

panelLayers.removeLayer(toRemove)
or
toRemove.removeFrom(maps[mapId])

function addLayer(mapId, layer, layerId) {
    layer.id = layerId;
    layers[mapId].push(layer);
    layer.addTo(maps[mapId]);
}

function addLayerToGroup(groupId, layer, layerId) {
    layer.id = layerId;
    for (var i = 0; i < panelLayers._layers.length; i++) {
        if (panelLayers._layers[i].id == groupId) {
            layers[mapId].push(layer);
            panelLayers._layers[i].layer.addLayer(layer);
        }
    }
}

How to properly remove layer from the map when layer is in a group?

add new method to select deselect item in panel

add item id auto generation

Nested groups?

Are nested groups supported? I can't get them to work.

Clicking on labels to collapse/expand groups

Currently, a user needs to click on the small + or - buttons to collapse or expand a group.

The user experience should be the same as with the base and overlay layers, where the user can click anywhere he wants to select/deselect a layer (icon, text or <input>)

It'd be more convenient, if the click handler would be on the <label>, the icon would be inside of the label, and the label would fill the whole width.