@npm9912/v-map 0.1.0

package/dist/collection/components/v-map-layer-wkt/v-map-layer-wkt.test.js

@@ -0,0 +1,34 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layer-wkt browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layer-wkt');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates inside a live map with WKT data and emits ready', async () => {
+        const map = createLiveMap('ol');
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-wkt');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.setAttribute('wkt', 'POINT(11.5761 48.1371)');
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        layer.opacity = 0.5;
+        layer.visible = false;
+        layer.zIndex = 1500;
+        await waitFor(() => layer.getAttribute('opacity') === '0.5' &&
+            !layer.hasAttribute('visible') &&
+            layer.getAttribute('z-index') === '1500');
+        expect(layer.getAttribute('wkt')).toBe('POINT(11.5761 48.1371)');
+        expect(typeof layer.getLayerId).toBe('function');
+        expect(layer.getAttribute('opacity')).toBe('0.5');
+        expect(layer.hasAttribute('visible')).toBe(false);
+        expect(layer.getAttribute('z-index')).toBe('1500');
+    });
+});

package/dist/collection/components/v-map-layer-wms/v-map-layer-wms.css

@@ -0,0 +1 @@
+/* no shadow content */

package/dist/collection/components/v-map-layer-wms/v-map-layer-wms.js

@@ -0,0 +1,453 @@
+import { VMapLayerHelper } from "../../layer/v-map-layer-helper";
+import MSG from "../../utils/messages";
+import { log } from "../../utils/logger";
+const MSG_COMPONENT = 'v-map-layer-wms - ';
+/**
+ * OGC WMS Layer
+ */
+export class VMapLayerWms {
+    el;
+    /** Current load state of the layer. */
+    loadState = 'idle';
+    /**
+     * Basis-URL des WMS-Dienstes (GetMap-Endpunkt ohne Query-Parameter).
+     */
+    url;
+    /**
+     * Kommagetrennte Layer-Namen (z. B. "topp:states").
+     */
+    layers;
+    /**
+     * WMS-`STYLES` Parameter (kommagetrennt).
+     * @default ""
+     */
+    styles;
+    /**
+     * Bildformat des GetMap-Requests.
+     * @default "image/png"
+     */
+    format = 'image/png';
+    /**
+     * Transparente Kacheln anfordern.
+     * @default true
+     */
+    transparent = true;
+    /**
+     * Tiled/geslicete Requests verwenden (falls Server unterstützt).
+     * @default true
+     */
+    tiled = true;
+    /**
+     * Sichtbarkeit des WMS-Layers.
+     * @default true
+     */
+    visible = true;
+    /**
+     * Globale Opazität des WMS-Layers (0–1).
+     * @default 1
+     */
+    opacity = 1.0;
+    /**
+     * Z-index for layer stacking order. Higher values render on top.
+     */
+    zIndex = 10;
+    /**
+     * Signalisiert, dass der WMS-Layer bereit ist.
+     * @event ready
+     */
+    ready;
+    //private mapProvider?: MapProvider;
+    hasLoadedOnce = false;
+    helper;
+    setLoadState(state) {
+        this.loadState = state;
+    }
+    /** Returns the last error detail, if any. */
+    async getError() {
+        return this.helper?.getError();
+    }
+    async onVisibleChanged() {
+        log(MSG_COMPONENT + 'onVisibleChanged');
+        await this.helper?.setVisible(this.visible);
+    }
+    async onOpacityChanged() {
+        log(MSG_COMPONENT + 'onOpacityChanged');
+        await this.helper?.setOpacity(this.opacity);
+    }
+    async onZIndexChanged() {
+        log(MSG_COMPONENT + 'onZIndexChanged');
+        await this.helper?.setZIndex(this.zIndex);
+    }
+    async onUrlChanged(oldValue, newValue) {
+        log(MSG_COMPONENT + 'onUrlChanged');
+        if (oldValue !== newValue) {
+            await this.updateLayer();
+        }
+    }
+    async onLayersChanged(oldValue, newValue) {
+        log(MSG_COMPONENT + 'onLayersChanged');
+        if (oldValue !== newValue) {
+            await this.updateLayer();
+        }
+    }
+    async onStylesChanged(oldValue, newValue) {
+        log(MSG_COMPONENT + 'onStylesChanged');
+        if (oldValue !== newValue) {
+            await this.updateLayer();
+        }
+    }
+    async updateLayer() {
+        await this.helper?.updateLayer({
+            type: 'wms',
+            data: {
+                url: this.url,
+                layers: this.layers,
+                styles: this.styles,
+                format: this.format,
+                transparent: String(this.transparent),
+            },
+        });
+    }
+    async connectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_CONNECTED_CALLBACK);
+        if (!this.hasLoadedOnce)
+            return;
+        this.helper.startLoading();
+        await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+    }
+    async componentWillLoad() {
+        log(MSG_COMPONENT + MSG.COMPONENT_WILL_LOAD);
+        this.helper = new VMapLayerHelper(this.el, this);
+    }
+    async componentDidLoad() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DID_LOAD);
+        this.helper.startLoading();
+        await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+        this.hasLoadedOnce = true;
+        this.ready.emit();
+    }
+    async disconnectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_DISCONNECTED_CALLBACK);
+        await this.helper?.dispose();
+    }
+    createLayerConfig() {
+        return {
+            type: 'wms',
+            url: this.url,
+            layers: this.layers,
+            transparent: String(this.transparent),
+            styles: this.styles,
+            format: this.format,
+            extraParams: {
+                tiled: String(this.tiled),
+            },
+            visible: this.visible,
+            opacity: this.opacity,
+            zIndex: this.zIndex,
+        };
+    }
+    render() {
+        return;
+    }
+    static get is() { return "v-map-layer-wms"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layer-wms.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layer-wms.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loadState": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'idle' | 'loading' | 'ready' | 'error'",
+                    "resolved": "\"error\" | \"idle\" | \"loading\" | \"ready\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current load state of the layer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "load-state",
+                "defaultValue": "'idle'"
+            },
+            "url": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Basis-URL des WMS-Dienstes (GetMap-Endpunkt ohne Query-Parameter)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "url"
+            },
+            "layers": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Kommagetrennte Layer-Namen (z. B. \"topp:states\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layers"
+            },
+            "styles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"\""
+                        }],
+                    "text": "WMS-`STYLES` Parameter (kommagetrennt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "styles"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"image/png\""
+                        }],
+                    "text": "Bildformat des GetMap-Requests."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "format",
+                "defaultValue": "'image/png'"
+            },
+            "transparent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Transparente Kacheln anfordern."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "transparent",
+                "defaultValue": "true"
+            },
+            "tiled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Tiled/geslicete Requests verwenden (falls Server unterst\u00FCtzt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tiled",
+                "defaultValue": "true"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Sichtbarkeit des WMS-Layers."
+                },
+                "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 des WMS-Layers (0\u20131)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "opacity",
+                "defaultValue": "1.0"
+            },
+            "zIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-index for layer stacking order. Higher values render on top."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "z-index",
+                "defaultValue": "10"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ready",
+                "name": "ready",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "ready"
+                        }],
+                    "text": "Signalisiert, dass der WMS-Layer bereit ist."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getError": {
+                "complexType": {
+                    "signature": "() => Promise<VMapErrorDetail | undefined>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "VMapErrorDetail": {
+                            "location": "import",
+                            "path": "../../utils/events",
+                            "id": "src/utils/events.ts::VMapErrorDetail",
+                            "referenceLocation": "VMapErrorDetail"
+                        }
+                    },
+                    "return": "Promise<VMapErrorDetail>"
+                },
+                "docs": {
+                    "text": "Returns the last error detail, if any.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "visible",
+                "methodName": "onVisibleChanged"
+            }, {
+                "propName": "opacity",
+                "methodName": "onOpacityChanged"
+            }, {
+                "propName": "zIndex",
+                "methodName": "onZIndexChanged"
+            }, {
+                "propName": "url",
+                "methodName": "onUrlChanged"
+            }, {
+                "propName": "layers",
+                "methodName": "onLayersChanged"
+            }, {
+                "propName": "styles",
+                "methodName": "onStylesChanged"
+            }];
+    }
+}

package/dist/collection/components/v-map-layer-wms/v-map-layer-wms.test.js

@@ -0,0 +1,36 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layer-wms browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layer-wms');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates inside a live map and updates reflected WMS properties', async () => {
+        const map = createLiveMap();
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-wms');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.setAttribute('url', 'https://ahocevar.com/geoserver/wms');
+        layer.setAttribute('layers', 'topp:states');
+        layer.visible = false;
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        expect(layer.getAttribute('url')).toBe('https://ahocevar.com/geoserver/wms');
+        expect(layer.getAttribute('layers')).toBe('topp:states');
+        layer.styles = 'population';
+        layer.transparent = false;
+        layer.opacity = 0.5;
+        await waitFor(() => layer.getAttribute('styles') === 'population' &&
+            !layer.hasAttribute('transparent') &&
+            layer.getAttribute('opacity') === '0.5');
+        expect(layer.getAttribute('styles')).toBe('population');
+        expect(layer.hasAttribute('transparent')).toBe(false);
+        expect(layer.getAttribute('opacity')).toBe('0.5');
+    });
+});

package/dist/collection/components/v-map-layer-xyz/v-map-layer-xyz.css

@@ -0,0 +1 @@
+/* no shadow content */