lib/leaflet-components
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

feat: group child tags by type in add-child wizard

Browse Source 
When adding a child to leaflet-map, the tag select is now grouped
into categories: Tile Layers, Markers, Shapes, Data, Overlays,
Groups, and Controls, using <optgroup> elements.
This commit is contained in:
Buddy 2026-06-08 21:47:10 -07:00
parent 275c74f0c2
commit 26e110d0b4
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -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);