@npm9912/v-map 0.1.0

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

@@ -0,0 +1,442 @@
+import { log } from "../../utils/logger";
+import MSG from "../../utils/messages";
+import { VMapLayerHelper } from "../../layer/v-map-layer-helper";
+const MSG_COMPONENT = 'v-map-layer-google - ';
+/**
+ * Google Maps Basemap Layer
+ */
+export class VMapLayerGoogle {
+    el;
+    /** Current load state of the layer. */
+    loadState = 'idle';
+    /**
+     * Karten-Typ: "roadmap" | "satellite" | "hybrid" | "terrain".
+     * @default "roadmap"
+     */
+    mapType = 'roadmap';
+    /**
+     * Google Maps API-Schlüssel.
+     * @example
+     * <v-map-layer-google api-key="YOUR_KEY"></v-map-layer-google>
+     */
+    apiKey;
+    /**
+     * Sprach-Lokalisierung (BCP-47, z. B. "de", "en-US").
+     * @default "en"
+     */
+    language;
+    /**
+     * Region-Bias (ccTLD/Region-Code, z. B. "DE", "US").
+     * Beeinflusst Labels/Suchergebnisse.
+     */
+    region;
+    /**
+     * Sichtbarkeit des Layers.
+     * @default true
+     */
+    visible = true;
+    /**
+     * Opazität des Layers (0–1).
+     * @default 1
+     */
+    opacity = 1.0;
+    /**
+     * Scale factor for tile display.
+     * @default "scaleFactor1x"
+     */
+    scale;
+    /**
+     * Maximum zoom level for the layer.
+     */
+    maxZoom;
+    /**
+     * Custom styles for the Google Map (JSON array of styling objects).
+     * Can be passed as JSON string or array.
+     */
+    styles;
+    /**
+     * Google Maps libraries to load (comma-separated string).
+     * @example "geometry,places,drawing"
+     */
+    libraries;
+    /**
+     * Signalisiert, dass der Google-Layer bereit ist. `detail` enthält Metadaten.
+     * @event ready
+     */
+    ready;
+    hasLoadedOnce = false;
+    helper;
+    setLoadState(state) {
+        this.loadState = state;
+    }
+    /** Returns the last error detail, if any. */
+    async getError() {
+        return this.helper?.getError();
+    }
+    parseStyles(newValue) {
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                // Update the prop with the parsed array
+                this.styles = parsed;
+            }
+            catch (e) {
+                this.helper?.setError({ type: 'parse', message: 'Invalid JSON in styles attribute', attribute: 'styles', cause: e });
+            }
+        }
+    }
+    createLayerConfig() {
+        return {
+            type: 'google',
+            apiKey: this.apiKey ?? '',
+            mapType: this.mapType,
+            language: this.language,
+            region: this.region,
+            visible: this.visible,
+            opacity: this.opacity,
+            scale: this.scale,
+            maxZoom: this.maxZoom,
+            styles: this.styles,
+            libraries: this.libraries ? this.libraries.split(',').map(s => s.trim()) : undefined,
+        };
+    }
+    async connectedCallback() {
+        log(MSG_COMPONENT + MSG.COMPONENT_CONNECTED_CALLBACK);
+        // Parse styles on initial load if they are a string
+        if (typeof this.styles === 'string') {
+            this.parseStyles(this.styles);
+        }
+        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();
+    }
+    render() {
+        return;
+    }
+    static get is() { return "v-map-layer-google"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layer-google.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layer-google.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'"
+            },
+            "mapType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'roadmap'\n    | 'satellite'\n    | 'terrain'\n    | 'hybrid'",
+                    "resolved": "\"hybrid\" | \"roadmap\" | \"satellite\" | \"terrain\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"roadmap\""
+                        }],
+                    "text": "Karten-Typ: \"roadmap\" | \"satellite\" | \"hybrid\" | \"terrain\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "map-type",
+                "defaultValue": "'roadmap'"
+            },
+            "apiKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "<v-map-layer-google api-key=\"YOUR_KEY\"></v-map-layer-google>"
+                        }],
+                    "text": "Google Maps API-Schl\u00FCssel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "api-key"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"en\""
+                        }],
+                    "text": "Sprach-Lokalisierung (BCP-47, z. B. \"de\", \"en-US\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "language"
+            },
+            "region": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Region-Bias (ccTLD/Region-Code, z. B. \"DE\", \"US\").\nBeeinflusst Labels/Suchergebnisse."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "region"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Sichtbarkeit des 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": "Opazit\u00E4t des Layers (0\u20131)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "opacity",
+                "defaultValue": "1.0"
+            },
+            "scale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'scaleFactor1x' | 'scaleFactor2x' | 'scaleFactor4x'",
+                    "resolved": "\"scaleFactor1x\" | \"scaleFactor2x\" | \"scaleFactor4x\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"scaleFactor1x\""
+                        }],
+                    "text": "Scale factor for tile display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "scale"
+            },
+            "maxZoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum zoom level for the layer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-zoom"
+            },
+            "styles": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "Record<string, unknown>[] | string",
+                    "resolved": "Record<string, unknown>[] | string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom styles for the Google Map (JSON array of styling objects).\nCan be passed as JSON string or array."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "styles"
+            },
+            "libraries": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "example",
+                            "text": "\"geometry,places,drawing\""
+                        }],
+                    "text": "Google Maps libraries to load (comma-separated string)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "libraries"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ready",
+                "name": "ready",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "ready"
+                        }],
+                    "text": "Signalisiert, dass der Google-Layer bereit ist. `detail` enth\u00E4lt Metadaten."
+                },
+                "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": "styles",
+                "methodName": "parseStyles"
+            }];
+    }
+}

package/dist/collection/components/v-map-layer-osm/error-api.test.js

@@ -0,0 +1,108 @@
+/**
+ * Browser integration tests for the Error-API.
+ *
+ * These tests use real hydrated Stencil components inside a live map
+ * to verify the Error-API end-to-end:
+ * - load-state attribute is reflected on real components
+ * - getError() method works on hydrated components
+ * - vmap-error event bubbles from layer to v-map element
+ */
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createLiveMap, createTaggedElement, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('Error-API browser integration', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map');
+        await customElements.whenDefined('v-map-layer-osm');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('layer reflects load-state attribute after hydration and successful load', async () => {
+        const map = createLiveMap();
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-osm');
+        layer.id = 'osm-error-api-test';
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        // load-state should be present as an attribute
+        await waitFor(() => layer.hasAttribute('load-state'));
+        const state = layer.getAttribute('load-state');
+        // After hydration, state should be one of the valid values
+        expect(['idle', 'loading', 'ready', 'error']).toContain(state);
+    });
+    it('layer exposes getError() method that returns undefined on success', async () => {
+        const map = createLiveMap();
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-osm');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.id = 'osm-geterror-test';
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        expect(typeof layer.getError).toBe('function');
+        const error = await layer.getError();
+        expect(error).toBeUndefined();
+    });
+    it('load-state transitions to ready after successful layer add', async () => {
+        const map = createLiveMap();
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-osm');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.id = 'osm-loadstate-test';
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        await waitFor(() => layer.getAttribute('load-state') === 'ready');
+        expect(layer.getAttribute('load-state')).toBe('ready');
+    });
+    it('vmap-error event from a layer bubbles to the parent v-map element', async () => {
+        const map = createLiveMap();
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-osm');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.id = 'osm-bubble-test';
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        // Dispatch a synthetic vmap-error from the layer and verify it bubbles to map
+        const receivedAtMap = [];
+        map.addEventListener('vmap-error', ((e) => {
+            receivedAtMap.push(e);
+        }));
+        layer.dispatchEvent(new CustomEvent('vmap-error', {
+            detail: { type: 'provider', message: 'synthetic test error' },
+            bubbles: true,
+            composed: true,
+        }));
+        expect(receivedAtMap).toHaveLength(1);
+        expect(receivedAtMap[0].detail.type).toBe('provider');
+        expect(receivedAtMap[0].detail.message).toBe('synthetic test error');
+    });
+    it('CSS selector [load-state="ready"] matches successfully loaded layers', async () => {
+        const map = createLiveMap();
+        const group = createTaggedElement('v-map-layergroup');
+        const layer = createTaggedElement('v-map-layer-osm');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.id = 'osm-css-test';
+        group.appendChild(layer);
+        map.appendChild(group);
+        document.body.appendChild(map);
+        await waitForHydration(layer);
+        await readyEvent;
+        await waitFor(() => layer.getAttribute('load-state') === 'ready');
+        // CSS selector should find the layer
+        const readyLayers = document.querySelectorAll('[load-state="ready"]');
+        expect(readyLayers.length).toBeGreaterThanOrEqual(1);
+        const found = Array.from(readyLayers).some(el => el.id === 'osm-css-test');
+        expect(found).toBe(true);
+    });
+});

package/dist/collection/components/v-map-layer-osm/v-map-layer-osm.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) */
+}