@npm9912/v-map 0.1.0

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

@@ -0,0 +1,331 @@
+import { log } from "../../utils/logger";
+import MSG from "../../utils/messages";
+import { VMapLayerHelper } from "../../layer/v-map-layer-helper";
+const MSG_COMPONENT = 'v-map-layer-xyz - ';
+/**
+ * XYZ Tile Layer
+ */
+export class VMapLayerXyz {
+    el;
+    /** Current load state of the layer. */
+    loadState = 'idle';
+    /**
+     * URL-Template für Kacheln, z. B. "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png".
+     */
+    url;
+    /**
+     * Attributions-/Copyright-Text (HTML erlaubt).
+     */
+    attributions;
+    /**
+     * Maximaler Zoomlevel, den der Tile-Server liefert.
+     * @default 19
+     */
+    maxZoom;
+    /**
+     * Größe einer Kachel in Pixeln.
+     * @default 256
+     */
+    tileSize;
+    /**
+     * Subdomains für parallele Tile-Anfragen (z. B. "a,b,c").
+     */
+    subdomains;
+    /**
+     * Sichtbarkeit des XYZ-Layers.
+     * @default true
+     */
+    visible = true;
+    /**
+     * Opazität (0–1).
+     * @default 1
+     */
+    opacity = 1.0;
+    /**
+     * Wird ausgelöst, wenn der XYZ-Layer bereit ist.
+     * @event ready
+     */
+    ready;
+    hasLoadedOnce = false;
+    helper;
+    setLoadState(state) {
+        this.loadState = state;
+    }
+    /** Returns the last error detail, if any. */
+    async getError() {
+        return this.helper?.getError();
+    }
+    createLayerConfig() {
+        const options = {};
+        if (this.tileSize != null)
+            options.tileSize = this.tileSize;
+        if (this.subdomains != null)
+            options.subdomains = this.subdomains;
+        return {
+            type: 'xyz',
+            url: this.url,
+            attributions: this.attributions,
+            maxZoom: this.maxZoom,
+            visible: this.visible,
+            opacity: this.opacity,
+            ...(Object.keys(options).length > 0 ? { options } : {}),
+        };
+    }
+    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();
+    }
+    render() {
+        return;
+    }
+    static get is() { return "v-map-layer-xyz"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["v-map-layer-xyz.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["v-map-layer-xyz.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": "URL-Template f\u00FCr Kacheln, z. B. \"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "url"
+            },
+            "attributions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Attributions-/Copyright-Text (HTML erlaubt)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "attributions"
+            },
+            "maxZoom": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "19"
+                        }],
+                    "text": "Maximaler Zoomlevel, den der Tile-Server liefert."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "max-zoom"
+            },
+            "tileSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "256"
+                        }],
+                    "text": "Gr\u00F6\u00DFe einer Kachel in Pixeln."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tile-size"
+            },
+            "subdomains": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Subdomains f\u00FCr parallele Tile-Anfragen (z. B. \"a,b,c\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "subdomains"
+            },
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "true"
+                        }],
+                    "text": "Sichtbarkeit des XYZ-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 (0\u20131)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "opacity",
+                "defaultValue": "1.0"
+            }
+        };
+    }
+    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 XYZ-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"; }
+}

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

@@ -0,0 +1,28 @@
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+import { createTaggedElement, loadVMapBundle, onceEvent, waitFor, waitForHydration, } from "../../testing/browser-test-utils";
+describe('v-map-layer-xyz browser', () => {
+    beforeAll(async () => {
+        await loadVMapBundle();
+        await customElements.whenDefined('v-map-layer-xyz');
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('hydrates and emits ready with reflected XYZ attributes', async () => {
+        const layer = createTaggedElement('v-map-layer-xyz');
+        const readyEvent = onceEvent(layer, 'ready');
+        layer.setAttribute('url', 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+        layer.setAttribute('subdomains', 'a,b,c');
+        document.body.appendChild(layer);
+        await waitForHydration(layer);
+        await readyEvent;
+        layer.opacity = 0.7;
+        layer.maxZoom = 19;
+        await waitFor(() => layer.getAttribute('opacity') === '0.7' &&
+            layer.getAttribute('max-zoom') === '19');
+        expect(layer.getAttribute('url')).toBe('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+        expect(layer.getAttribute('subdomains')).toBe('a,b,c');
+        expect(layer.getAttribute('opacity')).toBe('0.7');
+        expect(layer.getAttribute('max-zoom')).toBe('19');
+    });
+});

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

@@ -0,0 +1,74 @@
+.layer-control {
+  background: white;
+  padding: 10px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.layer-group {
+  margin-bottom: 10px;
+  border: 1px solid #eee;
+  border-radius: 4px;
+}
+
+.layer-group summary {
+  padding: 5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.layer-item {
+  margin: 5px 0 5px 20px;
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.layer-item input[type='range'] {
+  width: 80px;
+}
+
+.layer-item input[type='number'] {
+  width: 40px;
+}
+
+.layer-group-title {
+  color: black;
+}
+
+.layer-item-title {
+  color: black;
+}
+
+.layer-control button {
+  background: #f0f0f0;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  padding: 2px 6px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.layer-control button:hover {
+  background: #e0e0e0;
+}
+
+.layer-group summary button {
+  margin-left: auto;
+}
+
+.layer-item button {
+  margin-right: 5px;
+  color: #ff4444;
+  border: none;
+  background: none;
+  font-size: 1.2em;
+  line-height: 1;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}