diff --git a/index.html b/index.html
index 0604c1d..704cd7b 100644
--- a/index.html
+++ b/index.html
@@ -354,6 +354,18 @@
'leaflet-geojson': ['leaflet-popup', 'leaflet-tooltip'],
};
+ const TAG_GROUPS = {
+ 'leaflet-map': [
+ { label: 'Tile Layers', tags: ['leaflet-tile-layer', 'leaflet-tile-layer-wms'] },
+ { label: 'Markers', tags: ['leaflet-marker'] },
+ { label: 'Shapes', tags: ['leaflet-circle', 'leaflet-circle-marker', 'leaflet-polygon', 'leaflet-polyline', 'leaflet-rectangle'] },
+ { label: 'Data', tags: ['leaflet-geojson'] },
+ { label: 'Overlays', tags: ['leaflet-image-overlay', 'leaflet-video-overlay', 'leaflet-svg-overlay'] },
+ { label: 'Groups', tags: ['leaflet-layer-group', 'leaflet-feature-group'] },
+ { label: 'Controls', tags: ['leaflet-control-zoom', 'leaflet-control-scale', 'leaflet-control-attribution'] },
+ ],
+ };
+
const ATTRS = {
'leaflet-map': {
View: [
@@ -1096,11 +1108,26 @@
form.appendChild(h5);
const select = document.createElement('select');
- for (const childTag of validChildren) {
- const opt = document.createElement('option');
- opt.value = childTag;
- opt.textContent = childTag;
- select.appendChild(opt);
+ const groups = TAG_GROUPS[tagName(parentEl)];
+ if (groups) {
+ for (const group of groups) {
+ const optgroup = document.createElement('optgroup');
+ optgroup.label = group.label;
+ for (const childTag of group.tags) {
+ const opt = document.createElement('option');
+ opt.value = childTag;
+ opt.textContent = childTag;
+ optgroup.appendChild(opt);
+ }
+ select.appendChild(optgroup);
+ }
+ } else {
+ for (const childTag of validChildren) {
+ const opt = document.createElement('option');
+ opt.value = childTag;
+ opt.textContent = childTag;
+ select.appendChild(opt);
+ }
}
form.appendChild(select);