add groupedlayercontrol plugin

.gitignore

@@ -23,3 +23,4 @@ miniconda.sh
 latest_logs/
 *.nbconvert.ipynb
 folium/_version.py
+.venv

examples/plugin-GroupedLayerControl.ipynb

@@ -0,0 +1,75 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div style=\"width:100%;\"><div style=\"position:relative;width:100%;height:0;padding-bottom:60%;\"><span style=\"color:#565656\">Make this Notebook Trusted to load map: File -> Trust Notebook</span><iframe src=\"about:blank\" style=\"position:absolute;width:100%;height:100%;left:0;top:0;border:none !important;\" data-html=%3C%21DOCTYPE%20html%3E%0A%3Chead%3E%20%20%20%20%0A%20%20%20%20%3Cmeta%20http-equiv%3D%22content-type%22%20content%3D%22text/html%3B%20charset%3DUTF-8%22%20/%3E%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20L_NO_TOUCH%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20L_DISABLE_3D%20%3D%20false%3B%0A%20%20%20%20%20%20%20%20%3C/script%3E%0A%20%20%20%20%0A%20%20%20%20%3Cstyle%3Ehtml%2C%20body%20%7Bwidth%3A%20100%25%3Bheight%3A%20100%25%3Bmargin%3A%200%3Bpadding%3A%200%3B%7D%3C/style%3E%0A%20%20%20%20%3Cstyle%3E%23map%20%7Bposition%3Aabsolute%3Btop%3A0%3Bbottom%3A0%3Bright%3A0%3Bleft%3A0%3B%7D%3C/style%3E%0A%20%20%20%20%3Cscript%20src%3D%22https%3A//cdn.jsdelivr.net/npm/leaflet%401.6.0/dist/leaflet.js%22%3E%3C/script%3E%0A%20%20%20%20%3Cscript%20src%3D%22https%3A//code.jquery.com/jquery-1.12.4.min.js%22%3E%3C/script%3E%0A%20%20%20%20%3Cscript%20src%3D%22https%3A//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js%22%3E%3C/script%3E%0A%20%20%20%20%3Cscript%20src%3D%22https%3A//cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js%22%3E%3C/script%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A//cdn.jsdelivr.net/npm/leaflet%401.6.0/dist/leaflet.css%22/%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css%22/%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css%22/%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css%22/%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A//cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css%22/%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A//cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css%22/%3E%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20initial-scale%3D1.0%2C%20maximum-scale%3D1.0%2C%20user-scalable%3Dno%22%20/%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%23map_9456573479e441fab1af6a0c0bef1c4b%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20relative%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100.0%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100.0%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20left%3A%200.0%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20top%3A%200.0%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C/style%3E%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%3Cscript%20src%3D%22https%3A//cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.js%22%3E%3C/script%3E%0A%20%20%20%20%3Cscript%20src%3D%22https%3A//cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.js.map%22%3E%3C/script%3E%0A%20%20%20%20%3Clink%20rel%3D%22stylesheet%22%20href%3D%22https%3A//cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.css%22/%3E%0A%3C/head%3E%0A%3Cbody%3E%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%20class%3D%22folium-map%22%20id%3D%22map_9456573479e441fab1af6a0c0bef1c4b%22%20%3E%3C/div%3E%0A%20%20%20%20%20%20%20%20%0A%3C/body%3E%0A%3Cscript%3E%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20map_9456573479e441fab1af6a0c0bef1c4b%20%3D%20L.map%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22map_9456573479e441fab1af6a0c0bef1c4b%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20center%3A%20%5B40.0%2C%2070.0%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20crs%3A%20L.CRS.EPSG3857%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20zoom%3A%206%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20zoomControl%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20preferCanvas%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20tile_layer_05179534e6cb4756aa980eec42d5d219%20%3D%20L.tileLayer%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22https%3A//%7Bs%7D.tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D.png%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22attribution%22%3A%20%22Data%20by%20%5Cu0026copy%3B%20%5Cu003ca%20href%3D%5C%22http%3A//openstreetmap.org%5C%22%5Cu003eOpenStreetMap%5Cu003c/a%5Cu003e%2C%20under%20%5Cu003ca%20href%3D%5C%22http%3A//www.openstreetmap.org/copyright%5C%22%5Cu003eODbL%5Cu003c/a%5Cu003e.%22%2C%20%22detectRetina%22%3A%20false%2C%20%22maxNativeZoom%22%3A%2018%2C%20%22maxZoom%22%3A%2018%2C%20%22minZoom%22%3A%200%2C%20%22noWrap%22%3A%20false%2C%20%22opacity%22%3A%201%2C%20%22subdomains%22%3A%20%22abc%22%2C%20%22tms%22%3A%20false%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28map_9456573479e441fab1af6a0c0bef1c4b%29%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20feature_group_649b9589651a4dbfad4f4436b97447e2%20%3D%20L.featureGroup%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28map_9456573479e441fab1af6a0c0bef1c4b%29%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20marker_305ff622c12742f8b3a73bc54d156679%20%3D%20L.marker%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B40.0%2C%2074.0%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28feature_group_649b9589651a4dbfad4f4436b97447e2%29%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20feature_group_81c313c9f1ce4ae395838eca8c11fca6%20%3D%20L.featureGroup%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28map_9456573479e441fab1af6a0c0bef1c4b%29%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20marker_6e26e38ff4e04e24affb944d40ade810%20%3D%20L.marker%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B38.0%2C%2072.0%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28feature_group_81c313c9f1ce4ae395838eca8c11fca6%29%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20feature_group_a1c023bb23a64c46829aeffed69d2f36%20%3D%20L.featureGroup%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28map_9456573479e441fab1af6a0c0bef1c4b%29%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20marker_ff281066bf6d4c54be0a4b657751dd0b%20%3D%20L.marker%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5B40.0%2C%2072.0%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28feature_group_a1c023bb23a64c46829aeffed69d2f36%29%3B%0A%20%20%20%20%20%20%20%20%0A%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20grouped_layer_control_3fc1d163574f40d7a5509da69d5d1714%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20base_layers%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22openstreetmap%22%20%3A%20tile_layer_05179534e6cb4756aa980eec42d5d219%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20overlays%20%3A%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22g3%22%20%3A%20feature_group_a1c023bb23a64c46829aeffed69d2f36%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20L.control.layers%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20grouped_layer_control_3fc1d163574f40d7a5509da69d5d1714.base_layers%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20grouped_layer_control_3fc1d163574f40d7a5509da69d5d1714.overlays%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7B%22autoZIndex%22%3A%20true%2C%20%22collapsed%22%3A%20false%2C%20%22position%22%3A%20%22topright%22%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28map_9456573479e441fab1af6a0c0bef1c4b%29%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20groupedOverlays%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22groups1%22%20%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22g1%22%20%3A%20feature_group_649b9589651a4dbfad4f4436b97447e2%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22g2%22%20%3A%20feature_group_81c313c9f1ce4ae395838eca8c11fca6%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20options%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20exclusiveGroups%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22groups1%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20collapsed%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20autoZIndex%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20position%3A%20%22topright%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20L.control.groupedLayers%28%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20null%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20groupedOverlays%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20options%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%29.addTo%28map_9456573479e441fab1af6a0c0bef1c4b%29%3B%0A%0A%20%20%20%20%20%20%20%20%0A%3C/script%3E onload=\"this.contentDocument.open();this.contentDocument.write(    decodeURIComponent(this.getAttribute('data-html')));this.contentDocument.close();\" allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe></div></div>"
+      ],
+      "text/plain": [
+       "<folium.folium.Map at 0x7fc693522a30>"
+      ]
+     },
+     "execution_count": 1,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "import folium\n",
+    "from folium.plugins import groupedlayercontrol\n",
+    "\n",
+    "m = folium.Map([40., 70.], zoom_start=6)\n",
+    "fg1 = folium.FeatureGroup(name='g1')\n",
+    "fg2 = folium.FeatureGroup(name='g2')\n",
+    "fg3 = folium.FeatureGroup(name='g3')\n",
+    "folium.Marker([40, 74]).add_to(fg1)\n",
+    "folium.Marker([38, 72]).add_to(fg2)\n",
+    "folium.Marker([40, 72]).add_to(fg3)\n",
+    "m.add_child(fg1)\n",
+    "m.add_child(fg2)\n",
+    "m.add_child(fg3)\n",
+    "lc = groupedlayercontrol.GroupedLayerControl(groups={'groups1': ['g1', 'g2']})\n",
+    "lc.add_to(m)\n",
+    "\n",
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
+  }
+ ],
+ "metadata": {
+  "interpreter": {
+   "hash": "fe5dd214bcd3c7acb291c354b42a251cd956bb0540c24510fdecda31bd920a27"
+  },
+  "kernelspec": {
+   "display_name": "folium",
+   "language": "python",
+   "name": "folium"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.8.1"
+  },
+  "orig_nbformat": 4
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

folium/plugins/__init__.py

@@ -17,6 +17,7 @@
 from folium.plugins.float_image import FloatImage
 from folium.plugins.fullscreen import Fullscreen
 from folium.plugins.geocoder import Geocoder
+from folium.plugins.groupedlayercontrol import GroupedLayerControl
 from folium.plugins.heat_map import HeatMap
 from folium.plugins.heat_map_withtime import HeatMapWithTime
 from folium.plugins.locate_control import LocateControl
@@ -47,6 +48,7 @@
     'FloatImage',
     'Fullscreen',
     'Geocoder',
+    'GroupedLayerControl',
     'HeatMap',
     'HeatMapWithTime',
     'LocateControl',

folium/plugins/groupedlayercontrol.py

@@ -0,0 +1,146 @@
+from collections import OrderedDict
+
+from folium.elements import JSCSSMixin
+from folium.map import Layer, LayerControl
+from folium.utilities import parse_options
+
+from jinja2 import Template
+
+
+class GroupedLayerControl(JSCSSMixin, LayerControl):
+    """
+    Creates a GroupedLayerControl object to be added on a folium map.
+    Allows grouping overlays together so that within groups, overlays are
+    mutually exclusive (radio buttons).
+
+    Parameters
+    ----------
+    groups : dict
+          A dictionary where the keys are group names and the values are lists of overlay
+          names to be displayed with radio buttons. Overlays NOT specified in this
+          dictionary are added with check boxes;
+          e.g. {
+              "Group1": ["layer1", "layer2"],
+              "Group2": ["layer3", "layer4"]
+            }
+    position : str
+          The position of the control (one of the map corners), can be
+          'topleft', 'topright', 'bottomleft' or 'bottomright'
+          default: 'topright'
+    collapsed : bool, default True
+          If true the control will be collapsed into an icon and expanded on
+          mouse hover or touch.
+    autoZIndex : bool, default True
+          If true the control assigns zIndexes in increasing order to all of
+          its layers so that the order is preserved when switching them on/off.
+    **kwargs
+        Additional (possibly inherited) options. See
+        https://leafletjs.com/reference-1.6.0.html#control-layers
+
+    """
+    default_js = [
+        ('leaflet.groupedlayercontrol.min.js',
+         'https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.js'),
+        ('leaflet.groupedlayercontrol.min.js.map',
+         'https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.js.map')
+    ]
+    default_css = [
+        ('leaflet.groupedlayercontrol.min.css',
+         'https://cdnjs.cloudflare.com/ajax/libs/leaflet-groupedlayercontrol/0.6.1/leaflet.groupedlayercontrol.min.css')
+    ]
+
+    _template = Template("""
+        {% macro script(this,kwargs) %}
+            var {{ this.get_name() }} = {
+                base_layers : {
+                    {%- for key, val in this.base_layers.items() %}
+                    {{ key|tojson }} : {{val}},
+                    {%- endfor %}
+                },
+                overlays :  {
+                    {%- for key, val in this.un_grouped_overlays.items() %}
+                    {{ key|tojson }} : {{val}},
+                    {%- endfor %}
+                },
+            };
+
+            L.control.layers(
+                {{ this.get_name() }}.base_layers,
+                {{ this.get_name() }}.overlays,
+                {{ this.options|tojson }}
+            ).addTo({{this._parent.get_name()}});
+
+            var groupedOverlays = {
+                {%- for key, overlays in this.grouped_overlays.items() %}
+                {{ key|tojson }} : {
+                    {%- for overlaykey, val in overlays.items() %}
+                    {{ overlaykey|tojson }} : {{val}},
+                    {%- endfor %}
+                },
+                {%- endfor %}
+            };
+
+            var options = {
+                exclusiveGroups: [
+                    {%- for key, value in this.grouped_overlays.items() %}
+                    {{key|tojson}},
+                    {%- endfor %}
+                ],
+                collapsed: {{ this.options["collapsed"]|tojson }},
+                autoZIndex: {{ this.options["autoZIndex"]|tojson }},
+                position: {{ this.options["position"]|tojson }},
+            };
+
+            L.control.groupedLayers(
+                null,
+                groupedOverlays,
+                options,
+            ).addTo({{this._parent.get_name()}});
+
+            {%- for val in this.layers_untoggle.values() %}
+            {{ val }}.remove();
+            {%- endfor %}
+
+        {% endmacro %}
+        """)
+
+    def __init__(
+        self,
+        groups,
+        position='topright',
+        collapsed=False,
+        autoZIndex=True,
+        **kwargs
+    ):
+        super(GroupedLayerControl, self).__init__()
+        self._name = 'GroupedLayerControl'
+        self.groups = {x: key for key, sublist in groups.items() for x in sublist}
+        self.options = parse_options(
+            position=position,
+            collapsed=collapsed,
+            autoZIndex=autoZIndex,
+            **kwargs
+        )
+        self.un_grouped_overlays = OrderedDict()
+        self.layers_untoggle = OrderedDict()
+        self.grouped_overlays = OrderedDict()
+        for val in self.groups.values():
+            self.grouped_overlays[val] = OrderedDict()
+
+    def render(self, **kwargs):
+        """Renders the HTML representation of the element."""
+        for item in self._parent._children.values():
+            if not isinstance(item, Layer) or not item.control:
+                continue
+            key = item.layer_name
+
+            if item.overlay:
+                if key in self.groups.keys():
+                    self.grouped_overlays[self.groups[key]][key] = item.get_name()
+                    if not item.show:
+                        self.layers_untoggle[key] = item.get_name()
+                else:
+                    self.un_grouped_overlays[key] = item.get_name()
+                    if not item.show:
+                        self.layers_untoggle[key] = item.get_name()
+        super(GroupedLayerControl, self).render()