@npm9912/v-map 0.1.0

package/dist/collection/components/v-map-layercontrol/v-map-layercontrol.js

@@ -0,0 +1,277 @@
+import { h } from "@stencil/core";
+export class VMapLayerControl {
+    /** ID der zu steuernden Karte (DOM-Element mit dieser id) */
+    for;
+    host;
+    layerGroups = [];
+    observer;
+    mapElement = null;
+    // ---- Lifecycle -----------------------------------------------------------
+    async connectedCallback() {
+        //this.findMapElement();
+    }
+    async componentWillLoad() {
+        this.findMapElement();
+    }
+    async disconnectedCallback() {
+        this.observer?.disconnect();
+    }
+    // ---- DOM-Discovery/Observation ------------------------------------------
+    findMapElement() {
+        this.mapElement = document.getElementById(this.for);
+        if (this.mapElement) {
+            this.initObserver();
+            this.updateLayerGroupsFromDom();
+            //      this.updateLayersFromDom();
+        }
+        else {
+            // Karte noch nicht da – später erneut versuchen
+            setTimeout(() => this.findMapElement(), 100);
+        }
+    }
+    initObserver() {
+        if (!this.mapElement)
+            return;
+        this.observer = new MutationObserver(async () => {
+            this.updateLayerGroupsFromDom();
+            //this.updateLayersFromDom();
+        });
+        this.observer.observe(this.mapElement, {
+            childList: true,
+            subtree: true,
+            // WICHTIG: Attribute lauschen, sonst werden UI-Änderungen nicht gespiegelt
+            attributes: true,
+            attributeFilter: ['basemapid', 'visible', 'opacity', 'zindex'],
+        });
+    }
+    // ---- Layer-Extraktion ----------------------------------------------------
+    readBool(el, prop, ...attrs) {
+        const elRecord = el;
+        if (typeof elRecord[prop] === 'boolean')
+            return !!elRecord[prop];
+        for (const a of attrs)
+            if (el.hasAttribute(a))
+                return true;
+        return false;
+    }
+    readNumber(el, prop, def, ...attrs) {
+        const elRecord = el;
+        const v = elRecord[prop];
+        if (typeof v === 'number' && Number.isFinite(v))
+            return v;
+        for (const a of attrs) {
+            const s = el.getAttribute(a);
+            if (s != null && s !== '') {
+                const n = Number(s);
+                if (!Number.isNaN(n))
+                    return n;
+            }
+        }
+        return def;
+    }
+    readString(el, prop, def, ...attrs) {
+        const elRecord = el;
+        const v = elRecord[prop];
+        if (typeof v === 'string' && v.length)
+            return v;
+        for (const a of attrs) {
+            const s = el.getAttribute(a);
+            if (s)
+                return s;
+        }
+        return def;
+    }
+    updateLayerGroupsFromDom() {
+        if (!this.mapElement)
+            return;
+        const sel = 'v-map-layergroup';
+        const layerGroupElements = Array.from(this.mapElement.querySelectorAll(sel));
+        //await customElements.whenDefined('v-map-layercontrol');
+        this.layerGroups = layerGroupElements.map((groupElement, _idx) => {
+            // groupId: existiert als Attr/Prop? Sonst generieren, aber direkt setzen, damit stabil bleibt
+            let id = groupElement.id;
+            if (!id) {
+                id = `auto-${Math.random().toString(36).slice(2, 9)}`;
+                groupElement.id = id;
+            }
+            const label = this.readString(groupElement, 'label', id, 'label');
+            // const type =
+            //   (this.readString(
+            //     groupElement,
+            //     'type',
+            //     'overlay',
+            //     'type',
+            //   ) as LayerType) ?? 'overlay';
+            const groupTitle = groupElement?.getAttribute('group-title') || undefined;
+            //const groupId = groupElement?.getAttribute('groupid') || undefined;
+            const visible = this.readBool(groupElement, 'visible', 'visible');
+            //      const zIndex = this.readNumber(element, 'zIndex', 0, 'zindex');
+            const basemapid = groupElement.getAttribute('basemapid');
+            const layers = this.getLayersFromDom(groupElement);
+            return {
+                info: {
+                    element: groupElement,
+                    id,
+                    visible,
+                    opacity: undefined,
+                    zIndex: undefined,
+                },
+                label,
+                //type,
+                groupTitle,
+                //groupId,
+                basemapid,
+                layers,
+            };
+        });
+        this.layerGroups = this.cloneLayerGroups();
+        //forceUpdate(this.host);
+    }
+    cloneLayerGroups() {
+        return this.layerGroups.map(group => ({
+            ...group,
+            info: { ...group.info }, // Neue Referenz für info
+            layers: group.layers.map(layer => ({
+                ...layer,
+                info: { ...layer.info }, // Neue Referenz für layer.info
+            })),
+        }));
+    }
+    getLayersFromDom(groupElement) {
+        if (!groupElement)
+            return;
+        const sel = 'v-map-layer-wms, v-map-layer-osm, v-map-layer-geotiff, v-map-layer-geojson';
+        const layerElements = Array.from(groupElement.querySelectorAll(sel));
+        const layers = layerElements.map((element, _idx) => {
+            // id: existiert als Attr/Prop? Sonst generieren, aber direkt setzen, damit stabil bleibt
+            let id = element.id;
+            if (!id) {
+                id = `auto-${Math.random().toString(36).slice(2, 9)}`;
+                element.id = id;
+            }
+            const label = this.readString(element, 'label', id, 'label');
+            // const type =
+            //   (this.readString(element, 'type', 'overlay', 'type') as LayerType) ??
+            //   'overlay';
+            //const groupElement = element.closest('v-map-layergroup');
+            //const group = groupElement?.getAttribute('group-title') || undefined;
+            //const groupId = groupElement?.getAttribute('groupid') || undefined;
+            const visible = this.readBool(element, 'visible', 'visible');
+            const opacity = this.readNumber(element, 'opacity', 1, 'opacity');
+            //const zIndex = this.readNumber(element, 'zIndex', 0, 'z-index', 'zindex');
+            const zIndex = this.readNumber(element, 'zIndex', 0, 'zindex');
+            //const groupId = groupElement.id;
+            return {
+                info: {
+                    element,
+                    id,
+                    visible,
+                    opacity,
+                    zIndex,
+                },
+                label,
+                //type,
+            };
+        });
+        return layers;
+    }
+    setBool(el, prop, val, ...attrs) {
+        el[prop] = val;
+        for (const a of attrs) {
+            if (val)
+                el.setAttribute(a, '');
+            else
+                el.removeAttribute(a);
+        }
+    }
+    setNumber(el, prop, val, ...attrs) {
+        el[prop] = val;
+        for (const a of attrs)
+            el.setAttribute(a, String(val));
+    }
+    // Sichtbarkeit eines Layers ändern
+    handleVisibilityChange(info, visible) {
+        if (!info.element)
+            return;
+        this.setBool(info.element, 'visible', visible, 'visible');
+        info.visible = visible;
+        // UI aktualisieren
+        this.layerGroups = [...this.layerGroups];
+    }
+    handleOpacityChange(info, opacity) {
+        if (!info.element)
+            return;
+        this.setNumber(info.element, 'opacity', opacity, 'opacity');
+        info.opacity = opacity;
+        // UI aktualisieren
+        this.layerGroups = [...this.layerGroups];
+    }
+    handleZIndexChange(info, zIndex) {
+        if (!info.element)
+            return;
+        this.setNumber(info.element, 'zIndex', zIndex, 'z-index', 'zindex');
+        info.zIndex = zIndex;
+        // UI aktualisieren
+        this.layerGroups = [...this.layerGroups];
+    }
+    handleBaseLayerChange(group, newBaseLayerId) {
+        // basemapid aktualisieren
+        group.basemapid = newBaseLayerId;
+        group.info.element.setAttribute('basemapid', newBaseLayerId);
+        // UI aktualisieren
+        this.layerGroups = [...this.layerGroups];
+    }
+    // ---- Render --------------------------------------------------------------
+    render() {
+        if (this.layerGroups.length === 0) {
+            return h("div", { class: "layer-control-empty" }, "Keine Layer verf\u00FCgbar");
+        }
+        return (h("div", { class: "layer-control" }, this.layerGroups.map(group => {
+            return (h("details", { key: group.info.id, class: "layer-group" }, h("summary", { class: "layer-group-header" }, h("input", { type: "checkbox", checked: group.info.visible, onChange: e => {
+                    const visible = e.target.checked;
+                    this.handleVisibilityChange(group.info, visible);
+                }, class: "layer-group-checkbox" }), h("span", { class: "layer-group-title" }, group.groupTitle), group.basemapid !== null ? (h("select", { class: "basemap-selector", onChange: e => this.handleBaseLayerChange(group, e.target.value) }, group.layers.map(layer => (h("option", { key: layer.info.id, value: layer.info.id, selected: group.basemapid === layer.info.id }, layer.label))))) : (h("div", null))), h("div", { class: "layer-group-content" }, group.layers.map(layer => (h("div", { key: layer.info.id, class: "layer-item" }, h("label", { class: "layer-item-label", title: layer.label }, h("input", { name: `group-${group.info.id}`, type: "checkbox", checked: layer.info.visible, onChange: e => this.handleVisibilityChange(layer.info, e.target.checked), class: "layer-item-checkbox" }), h("span", { class: "layer-item-title" }, layer.label)), h("div", { class: "layer-item-controls" }, h("input", { type: "range", min: "0", max: "1", step: "0.1", value: String(layer.info.opacity), onInput: e => this.handleOpacityChange(layer.info, parseFloat(e.target.value)), class: "layer-item-opacity", "aria-label": `Opacity ${layer.label}` }), h("input", { type: "number", min: "0", value: String(layer.info.zIndex), onChange: e => this.handleZIndexChange(layer.info, parseInt(e.target.value, 10) || 0), class: "layer-item-zindex", "aria-label": `Z-Index ${layer.label}` }))))))));
+        })));
+    }
+    static get is() { return "v-map-layercontrol"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layercontrol.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layercontrol.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ID der zu steuernden Karte (DOM-Element mit dieser id)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "for"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "layerGroups": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/v-map-layercontrol/v-map-layercontrol.test.js

@@ -0,0 +1,134 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { loadVMapBundle, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layercontrol browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layercontrol');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('renders discovered layer groups from live DOM', async () => {
+        document.body.innerHTML = `
+      <div id="map-browser-1">
+        <v-map-layergroup id="group-1" group-title="Base Maps" visible>
+          <v-map-layer-osm id="osm" label="OpenStreetMap" visible opacity="0.6" zindex="3"></v-map-layer-osm>
+          <v-map-layer-geotiff id="dem" label="DEM" opacity="0.9" zindex="4"></v-map-layer-geotiff>
+        </v-map-layergroup>
+      </div>
+    `;
+        const control = document.createElement('v-map-layercontrol');
+        control.setAttribute('for', 'map-browser-1');
+        document.body.appendChild(control);
+        await waitFor(() => control.classList.contains('hydrated'));
+        await waitFor(() => !!control.shadowRoot?.querySelector('.layer-control'));
+        const titles = Array.from(control.shadowRoot.querySelectorAll('.layer-item-title')).map(node => node.textContent?.trim());
+        expect(control.shadowRoot?.querySelector('.layer-group-title')?.textContent).toBe('Base Maps');
+        expect(titles).toEqual(['OpenStreetMap', 'DEM']);
+    });
+    it('reacts to live DOM mutations via MutationObserver', async () => {
+        document.body.innerHTML = `
+      <div id="map-browser-2">
+        <v-map-layergroup id="group-2" group-title="Overlays" visible></v-map-layergroup>
+      </div>
+    `;
+        const control = document.createElement('v-map-layercontrol');
+        control.setAttribute('for', 'map-browser-2');
+        document.body.appendChild(control);
+        await waitFor(() => control.classList.contains('hydrated'));
+        await waitFor(() => !!control.shadowRoot?.querySelector('.layer-control'));
+        const group = document.querySelector('#group-2');
+        const layer = document.createElement('v-map-layer-osm');
+        layer.id = 'late-layer';
+        layer.setAttribute('label', 'Late Layer');
+        layer.setAttribute('visible', '');
+        group.appendChild(layer);
+        await waitFor(() => control.shadowRoot?.textContent?.includes('Late Layer') ?? false);
+        expect(control.shadowRoot?.querySelector('.layer-item-title')?.textContent).toBe('Late Layer');
+    });
+    it('updates source layer attributes through browser UI interactions', async () => {
+        document.body.innerHTML = `
+      <div id="map-browser-3">
+        <v-map-layergroup id="group-3" group-title="Interactive" visible>
+          <v-map-layer-osm id="interactive-layer" label="Interactive Layer" visible opacity="1" zindex="2"></v-map-layer-osm>
+        </v-map-layergroup>
+      </div>
+    `;
+        const control = document.createElement('v-map-layercontrol');
+        control.setAttribute('for', 'map-browser-3');
+        document.body.appendChild(control);
+        await waitFor(() => control.classList.contains('hydrated'));
+        await waitFor(() => !!control.shadowRoot?.querySelector('.layer-item-checkbox'));
+        const sourceLayer = document.getElementById('interactive-layer');
+        const checkbox = control.shadowRoot.querySelector('.layer-item-checkbox');
+        const opacity = control.shadowRoot.querySelector('.layer-item-opacity');
+        const zIndex = control.shadowRoot.querySelector('.layer-item-zindex');
+        checkbox.checked = false;
+        checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+        opacity.value = '0.4';
+        opacity.dispatchEvent(new Event('input', { bubbles: true }));
+        zIndex.value = '7';
+        zIndex.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitFor(() => !sourceLayer.hasAttribute('visible') &&
+            sourceLayer.getAttribute('opacity') === '0.4' &&
+            sourceLayer.getAttribute('zindex') === '7');
+        expect(sourceLayer.hasAttribute('visible')).toBe(false);
+        expect(sourceLayer.getAttribute('opacity')).toBe('0.4');
+        expect(sourceLayer.getAttribute('zindex')).toBe('7');
+    });
+    it('updates group visibility through the rendered group checkbox', async () => {
+        document.body.innerHTML = `
+      <div id="map-browser-4">
+        <v-map-layergroup id="group-4" group-title="Grouped" visible>
+          <v-map-layer-osm id="grouped-layer" label="Grouped Layer" visible></v-map-layer-osm>
+        </v-map-layergroup>
+      </div>
+    `;
+        const control = document.createElement('v-map-layercontrol');
+        control.setAttribute('for', 'map-browser-4');
+        document.body.appendChild(control);
+        await waitFor(() => control.classList.contains('hydrated'));
+        await waitFor(() => !!control.shadowRoot?.querySelector('.layer-group-checkbox'));
+        const sourceGroup = document.getElementById('group-4');
+        const groupCheckbox = control.shadowRoot.querySelector('.layer-group-checkbox');
+        groupCheckbox.checked = false;
+        groupCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitFor(() => !sourceGroup.hasAttribute('visible'));
+        expect(sourceGroup.hasAttribute('visible')).toBe(false);
+    });
+    it('updates the basemap id through the rendered selector', async () => {
+        document.body.innerHTML = `
+      <div id="map-browser-5">
+        <v-map-layergroup id="group-5" group-title="Basemaps" basemapid="osm-1" visible>
+          <v-map-layer-osm id="osm-1" label="OSM" visible></v-map-layer-osm>
+          <v-map-layer-wms id="wms-1" label="WMS" visible></v-map-layer-wms>
+        </v-map-layergroup>
+      </div>
+    `;
+        const control = document.createElement('v-map-layercontrol');
+        control.setAttribute('for', 'map-browser-5');
+        document.body.appendChild(control);
+        await waitFor(() => control.classList.contains('hydrated'));
+        await waitFor(() => !!control.shadowRoot?.querySelector('.basemap-selector'));
+        const sourceGroup = document.getElementById('group-5');
+        const select = control.shadowRoot.querySelector('.basemap-selector');
+        select.value = 'wms-1';
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        await waitFor(() => sourceGroup.getAttribute('basemapid') === 'wms-1');
+        expect(sourceGroup.getAttribute('basemapid')).toBe('wms-1');
+    });
+});
+it('hydrates and keeps the target map reference via the for attribute', async () => {
+    document.body.innerHTML = `
+      <v-map id="my-map" flavour="ol" style="display:block;width:300px;height:200px">
+        <v-map-layergroup>
+          <v-map-layer-osm></v-map-layer-osm>
+        </v-map-layergroup>
+      </v-map>
+    `;
+    const control = document.createElement('v-map-layercontrol');
+    control.setAttribute('for', 'my-map');
+    document.body.appendChild(control);
+    await waitForHydration(control);
+    expect(control.getAttribute('for')).toBe('my-map');
+});

package/dist/collection/components/v-map-layergroup/v-map-layergroup.css

@@ -0,0 +1,4 @@
+/* src/components/v-map-layer-geojson/v-map-layer-geojson.css */
+:host {
+  display: none; /* Komponente selbst nicht sichtbar (nur Logik) */
+}

package/dist/collection/components/v-map-layergroup/v-map-layergroup.js

@@ -0,0 +1,212 @@
+import { h } from "@stencil/core";
+import { VMapEvents } from "../../utils/events";
+import { log } from "../../utils/logger";
+import MSG from "../../utils/messages";
+const MSG_COMPONENT = 'v-map-layergroup - ';
+export class VMapLayerGroup {
+    el;
+    /**
+     * Sichtbarkeit der gesamten Gruppe.
+     * @default true
+     */
+    visible = true;
+    /**
+     * Globale Opazität (0–1) für alle Kinder.
+     * @default 1
+     */
+    opacity = 1.0;
+    // /**
+    //  * Kennzeichnet diese Gruppe als Basis-Kartenebene (exklusiv sichtbar).
+    //  * @default false
+    //  */
+    // @Prop({ reflect: true }) basemap = false;
+    /**
+     * Base map identifier for this layer group. When set, layers in this group will be treated as base map layers.
+     */
+    basemapid = null;
+    // /**
+    //  * Eindeutige Gruppen-ID (z. B. für programmatisches Umschalten).
+    //  */
+    // @Prop({ reflect: true }) groupId: string = Math.random()
+    //   .toString(36)
+    //   .slice(2, 11);
+    mapProvider = null;
+    groupId = crypto.randomUUID();
+    async onVisibleChanged() {
+        log(MSG_COMPONENT + 'onVisibleChanged');
+        if (this.mapProvider?.setGroupVisible) {
+            await this.mapProvider.setGroupVisible(this.groupId, this.visible);
+        }
+    }
+    async onBaseMapIdChanged() {
+        log(MSG_COMPONENT + 'onBaseMapIdChanged');
+        if (this.mapProvider?.setBaseLayer) {
+            await this.mapProvider.setBaseLayer(this.groupId, this.basemapid);
+        }
+    }
+    async init(mapProvider) {
+        if (this.mapProvider != null)
+            return;
+        this.mapProvider = mapProvider;
+        if (this.mapProvider === null)
+            return;
+        if (this.mapProvider?.ensureGroup) {
+            await this.mapProvider.ensureGroup(this.groupId, this.visible, {
+                basemapid: this.basemapid,
+            });
+        }
+        await this.mapProvider?.setGroupVisible(this.groupId, this.visible);
+        await this.mapProvider?.setBaseLayer(this.groupId, this.basemapid);
+    }
+    async connectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_CONNECTED_CALLBACK);
+        const mapElement = this.el.closest('v-map');
+        await customElements.whenDefined('v-map');
+        const vmap = mapElement;
+        const mapProviderAvailable = (await mapElement?.isMapProviderReady?.()) === true;
+        if (mapProviderAvailable) {
+            const mapProvider = mapElement?.__vMapProvider ?? null;
+            await this.init(mapProvider);
+        }
+        vmap?.addEventListener(VMapEvents.MapProviderReady, (async (event) => {
+            log(`${MSG_COMPONENT}map provider ready`);
+            const mapEvent = event.detail;
+            await this.init(mapEvent.mapProvider);
+        }));
+        vmap?.addEventListener(VMapEvents.MapProviderWillShutdown, async (_event) => {
+            log(`${MSG_COMPONENT}map provider shutting down`);
+            this.mapProvider = null;
+        });
+    }
+    async componentWillLoad() {
+        log(MSG_COMPONENT + MSG.COMPONENT_WILL_LOAD);
+    }
+    async componentDidLoad() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DID_LOAD);
+    }
+    async componentWillRender() {
+        log(MSG_COMPONENT + MSG.COMPONENT_WILL_RENDER);
+    }
+    /**
+     * Returns the internal group identifier used by the map provider.
+     */
+    async getGroupId() {
+        return this.groupId;
+    }
+    render() {
+        return h("slot", { key: '584a5816d8f73071bf257e3f70a4c2baea2d2f56' });
+    }
+    static get is() { return "v-map-layergroup"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layergroup.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layergroup.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Sichtbarkeit der gesamten Gruppe."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "visible",
+                "defaultValue": "true"
+            },
+            "opacity": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "1"
+                        }],
+                    "text": "Globale Opazit\u00E4t (0\u20131) f\u00FCr alle Kinder."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "opacity",
+                "defaultValue": "1.0"
+            },
+            "basemapid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Base map identifier for this layer group. When set, layers in this group will be treated as base map layers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "basemapid",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getGroupId": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the internal group identifier used by the map provider.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "onVisibleChanged"
+            }, {
+                "propName": "basemapid",
+                "methodName": "onBaseMapIdChanged"
+            }];
+    }
+}

package/dist/collection/components/v-map-layergroup/v-map-layergroup.test.js

@@ -0,0 +1,39 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layergroup browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layergroup');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates with child base layers and keeps a live group id', async () => {
+        const map = createLiveMap();
+        const mapReady = onceEvent(map, 'map-provider-ready');
+        const group = createTaggedElement('v-map-layergroup');
+        const primaryLayer = createTaggedElement('v-map-layer-osm');
+        const secondaryLayer = createTaggedElement('v-map-layer-osm');
+        group.setAttribute('basemapid', 'osm-primary');
+        primaryLayer.id = 'osm-primary';
+        secondaryLayer.id = 'osm-secondary';
+        primaryLayer.visible = false;
+        secondaryLayer.visible = false;
+        group.append(primaryLayer, secondaryLayer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await mapReady;
+        await waitForHydration(group);
+        await waitForHydration(primaryLayer);
+        await waitForHydration(secondaryLayer);
+        const groupId = await group.getGroupId();
+        expect(typeof groupId).toBe('string');
+        expect(groupId.length).toBeGreaterThan(0);
+        group.visible = false;
+        group.setAttribute('basemapid', 'osm-secondary');
+        await waitFor(() => !group.hasAttribute('visible') &&
+            group.getAttribute('basemapid') === 'osm-secondary');
+        expect(group.hasAttribute('visible')).toBe(false);
+        expect(group.getAttribute('basemapid')).toBe('osm-secondary');
+    });
+});