@npm9912/v-map 0.1.0

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

@@ -0,0 +1,42 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+const featureCollection = JSON.stringify({
+    type: 'FeatureCollection',
+    features: [
+        {
+            type: 'Feature',
+            properties: { name: 'Point' },
+            geometry: { type: 'Point', coordinates: [11.5761, 48.1371] },
+        },
+    ],
+});
+describe('v-map-layer-geojson browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layer-geojson');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates inside a live map with inline geojson data', async () => {
+        const map = createLiveMap('ol');
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-geojson');
+        layer.setAttribute('geojson', featureCollection);
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await waitFor(() => typeof layer.geojson === 'string');
+        layer.opacity = 0.6;
+        layer.visible = false;
+        layer.zIndex = 1200;
+        await waitFor(() => layer.getAttribute('opacity') === '0.6' &&
+            !layer.hasAttribute('visible') &&
+            layer.getAttribute('z-index') === '1200');
+        expect(layer.geojson).toContain('FeatureCollection');
+        expect(layer.getAttribute('opacity')).toBe('0.6');
+        expect(layer.hasAttribute('visible')).toBe(false);
+        expect(layer.getAttribute('z-index')).toBe('1200');
+    });
+});

package/dist/collection/components/v-map-layer-geotiff/v-map-layer-geotiff.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-layer-geotiff/v-map-layer-geotiff.js

@@ -0,0 +1,500 @@
+import { VMapLayerHelper } from "../../layer/v-map-layer-helper";
+import { log } from "../../utils/logger";
+import MSG from "../../utils/messages";
+import { isGeoStylerStyle } from "../../types/styling";
+const MSG_COMPONENT = 'v-map-layer-geotiff - ';
+export class VMapLayerGeoTIFF {
+    el;
+    /** Current load state of the layer. */
+    loadState = 'idle';
+    /**
+     * URL to the GeoTIFF file to be displayed on the map.
+     */
+    url = null;
+    visible = true;
+    /**
+     * Opazität der GeoTIFF-Kacheln (0–1).
+     * @default 1
+     */
+    opacity = 1.0;
+    /**
+     * Z-index for layer stacking order. Higher values render on top.
+     */
+    zIndex = 100;
+    /**
+     * NoData Values to discard (overriding any nodata values in the metadata).
+     */
+    nodata = null;
+    /**
+     * ColorMap für die Visualisierung (kann entweder ein vordefinierter Name oder eine GeoStyler ColorMap sein).
+     */
+    colorMap = null;
+    /**
+     * Value range for colormap normalization [min, max].
+     */
+    valueRange = null;
+    /**
+     * Wird ausgelöst, wenn der GeoTIFF-Layer bereit ist.
+     * @event ready
+     */
+    ready;
+    didLoad = false;
+    hasLoadedOnce = false;
+    helper;
+    setLoadState(state) {
+        this.loadState = state;
+    }
+    /** Returns the last error detail, if any. */
+    async getError() {
+        return this.helper?.getError();
+    }
+    async onUrlChanged() {
+        log(MSG_COMPONENT + 'onUrlChanged');
+        await this.helper?.updateLayer({
+            type: 'geotiff',
+            data: {
+                url: this.url,
+                nodata: this.nodata,
+                colorMap: this.colorMap,
+                valueRange: this.valueRange,
+            },
+        });
+    }
+    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 onNodataChanged() {
+        log(MSG_COMPONENT + 'onNodataChanged');
+        if (isNaN(this.nodata)) {
+            this.nodata = null;
+        }
+        await this.helper?.updateLayer({
+            type: 'geotiff',
+            data: {
+                url: this.url,
+                nodata: this.nodata,
+                colorMap: this.colorMap,
+                valueRange: this.valueRange,
+            },
+        });
+    }
+    async onColorMapChanged() {
+        log(MSG_COMPONENT + 'onColorMapChanged');
+        await this.helper?.updateLayer({
+            type: 'geotiff',
+            data: {
+                url: this.url,
+                nodata: this.nodata,
+                colorMap: this.colorMap,
+                valueRange: this.valueRange,
+            },
+        });
+    }
+    async onValueRangeChanged() {
+        log(MSG_COMPONENT + 'onValueRangeChanged');
+        await this.helper?.updateLayer({
+            type: 'geotiff',
+            data: {
+                url: this.url,
+                nodata: this.nodata,
+                colorMap: this.colorMap,
+                valueRange: this.valueRange,
+            },
+        });
+    }
+    isReady() {
+        return this.didLoad;
+    }
+    /**
+     * Returns the internal layer ID used by the map provider.
+     */
+    async getLayerId() {
+        return this.helper.getLayerId();
+    }
+    createLayerConfig() {
+        return {
+            type: 'geotiff',
+            visible: this.visible,
+            zIndex: this.zIndex,
+            opacity: this.opacity,
+            url: this.url,
+            nodata: this.nodata,
+            colorMap: this.colorMap,
+            valueRange: this.valueRange,
+        };
+    }
+    // /**
+    //  * Fügt den GeoTIFF-Layer der Karte hinzu (vom Eltern-<v-map> aufgerufen).
+    //  */
+    // @Method()
+    // async addToMap(_mapElement: HTMLVMapElement) {
+    //   await this.helper?.initLayer(() => this.createLayerConfig());
+    // }
+    async connectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_CONNECTED_CALLBACK);
+        if (this.hasLoadedOnce) {
+            this.helper.startLoading();
+            await this.helper.initLayer(() => this.createLayerConfig(), this.el.id);
+        }
+        // Listen for styleReady events from v-map-style component
+        document.addEventListener('styleReady', this.handleStyleReady.bind(this));
+    }
+    async disconnectedCallback() {
+        document.removeEventListener('styleReady', this.handleStyleReady.bind(this));
+        await this.helper?.dispose();
+    }
+    /**
+     * Handle styleReady event from v-map-style component
+     */
+    async handleStyleReady(event) {
+        log(MSG_COMPONENT + 'handleStyleReady');
+        const styleEvent = event.detail;
+        // Check if this layer is targeted (if layerIds is specified)
+        if (styleEvent.layerIds && styleEvent.layerIds.length > 0) {
+            const layerId = this.helper?.getLayerId();
+            const targetIds = styleEvent.layerIds;
+            // Check if this layer is in the target list
+            if (layerId && !targetIds.includes(layerId) && !targetIds.includes(this.el.id)) {
+                log(MSG_COMPONENT + 'style not targeted for this layer');
+                return;
+            }
+        }
+        // Check if it's a GeoStyler Style
+        if (!isGeoStylerStyle(styleEvent.style)) {
+            log(MSG_COMPONENT + 'not a GeoStyler style');
+            return;
+        }
+        const style = styleEvent.style;
+        // Extract RasterSymbolizer from the first matching rule
+        const rasterSymbolizer = this.extractRasterSymbolizer(style);
+        if (rasterSymbolizer) {
+            log(MSG_COMPONENT + 'applying RasterSymbolizer from style');
+            // Apply colorMap if present
+            if (rasterSymbolizer.colorMap) {
+                this.colorMap = rasterSymbolizer.colorMap;
+            }
+            // Apply opacity if present (and not already set)
+            if (rasterSymbolizer.opacity !== undefined && typeof rasterSymbolizer.opacity === 'number') {
+                this.opacity = rasterSymbolizer.opacity;
+            }
+            // Apply visibility if present
+            if (rasterSymbolizer.visibility !== undefined && typeof rasterSymbolizer.visibility === 'boolean') {
+                this.visible = rasterSymbolizer.visibility;
+            }
+        }
+    }
+    /**
+     * Extract RasterSymbolizer from GeoStyler Style
+     */
+    extractRasterSymbolizer(style) {
+        for (const rule of style.rules) {
+            for (const symbolizer of rule.symbolizers) {
+                if (symbolizer.kind === 'Raster') {
+                    return symbolizer;
+                }
+            }
+        }
+        return null;
+    }
+    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.didLoad = true;
+        this.ready.emit();
+    }
+    async componentWillRender() {
+        log(MSG_COMPONENT + MSG.COMPONENT_WILL_RENDER);
+    }
+    render() {
+        return;
+    }
+    static get is() { return "v-map-layer-geotiff"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layer-geotiff.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layer-geotiff.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": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL to the GeoTIFF file to be displayed on the map."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url",
+                "defaultValue": "null"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sichtbarkeit des Layers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "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": "Opazit\u00E4t der GeoTIFF-Kacheln (0\u20131)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "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": false,
+                "attribute": "z-index",
+                "defaultValue": "100"
+            },
+            "nodata": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "NoData Values to discard (overriding any nodata values in the metadata)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "nodata",
+                "defaultValue": "null"
+            },
+            "colorMap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | GeoStylerColorMap",
+                    "resolved": "ColorMap | string",
+                    "references": {
+                        "GeoStylerColorMap": {
+                            "location": "import",
+                            "path": "geostyler-style",
+                            "id": "node_modules::ColorMap",
+                            "referenceLocation": "ColorMap"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "ColorMap f\u00FCr die Visualisierung (kann entweder ein vordefinierter Name oder eine GeoStyler ColorMap sein)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color-map",
+                "defaultValue": "null"
+            },
+            "valueRange": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "[number, number]",
+                    "resolved": "[number, number]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Value range for colormap normalization [min, max]."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ready",
+                "name": "ready",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "ready"
+                        }],
+                    "text": "Wird ausgel\u00F6st, wenn der GeoTIFF-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": []
+                }
+            },
+            "getLayerId": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the internal layer ID used by the map provider.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "url",
+                "methodName": "onUrlChanged"
+            }, {
+                "propName": "visible",
+                "methodName": "onVisibleChanged"
+            }, {
+                "propName": "opacity",
+                "methodName": "onOpacityChanged"
+            }, {
+                "propName": "zIndex",
+                "methodName": "onZIndexChanged"
+            }, {
+                "propName": "nodata",
+                "methodName": "onNodataChanged"
+            }, {
+                "propName": "colorMap",
+                "methodName": "onColorMapChanged"
+            }, {
+                "propName": "valueRange",
+                "methodName": "onValueRangeChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,38 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layer-geotiff browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layer-geotiff');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates inside a live deck map with a local GeoTIFF fixture', async () => {
+        const map = createLiveMap('deck');
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-geotiff');
+        const readyEvent = onceEvent(layer, 'ready', 10_000);
+        layer.setAttribute('url', '/geotiff/cea.tif');
+        layer.setAttribute('color-map', 'viridis');
+        layer.setAttribute('nodata', '-9999');
+        layer.visible = false;
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        expect(layer.getAttribute('url')).toBe('/geotiff/cea.tif');
+        expect(layer.getAttribute('color-map')).toBe('viridis');
+        expect(layer.getAttribute('nodata')).toBe('-9999');
+        layer.opacity = 0.8;
+        layer.visible = true;
+        layer.zIndex = 50;
+        await waitFor(() => layer.opacity === 0.8 &&
+            layer.visible === true &&
+            layer.zIndex === 50);
+        expect(layer.opacity).toBe(0.8);
+        expect(layer.visible).toBe(true);
+        expect(layer.zIndex).toBe(50);
+    });
+});

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

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