@npm9912/v-map 0.1.0

package/dist/cjs/v-map-layercontrol.cjs.entry.js

@@ -0,0 +1,247 @@
+'use strict';
+
+var index = require('./index-JSwBbvGA.js');
+
+const vMapLayercontrolCss = () => `.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}`;
+
+const VMapLayerControl = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** ID der zu steuernden Karte (DOM-Element mit dieser id) */
+    for;
+    get host() { return index.getElement(this); }
+    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 index.h("div", { class: "layer-control-empty" }, "Keine Layer verf\u00FCgbar");
+        }
+        return (index.h("div", { class: "layer-control" }, this.layerGroups.map(group => {
+            return (index.h("details", { key: group.info.id, class: "layer-group" }, index.h("summary", { class: "layer-group-header" }, index.h("input", { type: "checkbox", checked: group.info.visible, onChange: e => {
+                    const visible = e.target.checked;
+                    this.handleVisibilityChange(group.info, visible);
+                }, class: "layer-group-checkbox" }), index.h("span", { class: "layer-group-title" }, group.groupTitle), group.basemapid !== null ? (index.h("select", { class: "basemap-selector", onChange: e => this.handleBaseLayerChange(group, e.target.value) }, group.layers.map(layer => (index.h("option", { key: layer.info.id, value: layer.info.id, selected: group.basemapid === layer.info.id }, layer.label))))) : (index.h("div", null))), index.h("div", { class: "layer-group-content" }, group.layers.map(layer => (index.h("div", { key: layer.info.id, class: "layer-item" }, index.h("label", { class: "layer-item-label", title: layer.label }, index.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" }), index.h("span", { class: "layer-item-title" }, layer.label)), index.h("div", { class: "layer-item-controls" }, index.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}` }), index.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}` }))))))));
+        })));
+    }
+};
+VMapLayerControl.style = vMapLayercontrolCss();
+
+exports.v_map_layercontrol = VMapLayerControl;

package/dist/cjs/v-map.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-JSwBbvGA.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('v-map.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["v-map-builder.cjs",[[769,"v-map-builder",{"mapconfig":[1040]},null,{"mapconfig":[{"onMapConfigChanged":0}]}]]],["v-map-layer-terrain-geotiff.cjs",[[769,"v-map-layer-terrain-geotiff",{"loadState":[1537,"load-state"],"url":[1],"projection":[1],"forceProjection":[4,"force-projection"],"visible":[4],"opacity":[2],"zIndex":[2,"z-index"],"nodata":[2],"meshMaxError":[2,"mesh-max-error"],"wireframe":[4],"texture":[1],"color":[16],"colorMap":[1,"color-map"],"valueRange":[16],"elevationScale":[2,"elevation-scale"],"renderMode":[1,"render-mode"],"minZoom":[2,"min-zoom"],"maxZoom":[2,"max-zoom"],"tileSize":[2,"tile-size"],"getError":[64],"getLayerId":[64]},null,{"url":[{"onUrlChanged":0}],"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"projection":[{"onPropertyChanged":0}],"forceProjection":[{"onPropertyChanged":0}],"nodata":[{"onPropertyChanged":0}],"meshMaxError":[{"onPropertyChanged":0}],"wireframe":[{"onPropertyChanged":0}],"texture":[{"onPropertyChanged":0}],"color":[{"onPropertyChanged":0}],"colorMap":[{"onPropertyChanged":0}],"valueRange":[{"onPropertyChanged":0}],"elevationScale":[{"onPropertyChanged":0}],"renderMode":[{"onPropertyChanged":0}],"minZoom":[{"onPropertyChanged":0}],"maxZoom":[{"onPropertyChanged":0}],"tileSize":[{"onPropertyChanged":0}]}]]],["v-map-layercontrol.cjs",[[513,"v-map-layercontrol",{"for":[1],"layerGroups":[32]}]]],["v-map_3.cjs",[[769,"v-map",{"flavour":[513],"center":[1],"zoom":[2],"useDefaultImportMap":[4,"use-default-import-map"],"cssMode":[1,"css-mode"],"isMapProviderReady":[64],"setView":[64]},null,{"flavour":[{"onFlavourChanged":0}]}],[513,"v-map-layer-osm",{"loadState":[1537,"load-state"],"visible":[516],"opacity":[514],"zIndex":[514,"z-index"],"url":[513],"getError":[64],"getLayerId":[64]},null,{"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"url":[{"onUrlChanged":0}]}],[769,"v-map-layergroup",{"visible":[516],"opacity":[514],"basemapid":[513],"getGroupId":[64]},null,{"visible":[{"onVisibleChanged":0}],"basemapid":[{"onBaseMapIdChanged":0}]}]]],["v-map-layer-geojson_12.cjs",[[769,"v-map-layer-geojson",{"loadState":[1537,"load-state"],"geojson":[1025],"url":[513],"visible":[516],"zIndex":[514,"z-index"],"opacity":[514],"fillColor":[513,"fill-color"],"fillOpacity":[514,"fill-opacity"],"strokeColor":[513,"stroke-color"],"strokeWidth":[514,"stroke-width"],"strokeOpacity":[514,"stroke-opacity"],"pointRadius":[514,"point-radius"],"pointColor":[513,"point-color"],"iconUrl":[513,"icon-url"],"iconSize":[513,"icon-size"],"textProperty":[513,"text-property"],"textColor":[513,"text-color"],"textSize":[514,"text-size"],"getLayerId":[64],"getError":[64]},[[4,"styleReady","onStyleReady"]],{"geojson":[{"onGeoJsonChanged":0}],"url":[{"onUrlChanged":0}],"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"fillColor":[{"onStyleChanged":0}],"fillOpacity":[{"onStyleChanged":0}],"strokeColor":[{"onStyleChanged":0}],"strokeWidth":[{"onStyleChanged":0}],"strokeOpacity":[{"onStyleChanged":0}],"pointRadius":[{"onStyleChanged":0}],"pointColor":[{"onStyleChanged":0}],"iconUrl":[{"onStyleChanged":0}],"iconSize":[{"onStyleChanged":0}],"textProperty":[{"onStyleChanged":0}],"textColor":[{"onStyleChanged":0}],"textSize":[{"onStyleChanged":0}]}],[513,"v-map-layer-geotiff",{"loadState":[1537,"load-state"],"url":[1],"visible":[4],"opacity":[2],"zIndex":[2,"z-index"],"nodata":[2],"colorMap":[1,"color-map"],"valueRange":[16],"getError":[64],"getLayerId":[64]},null,{"url":[{"onUrlChanged":0}],"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"nodata":[{"onNodataChanged":0}],"colorMap":[{"onColorMapChanged":0}],"valueRange":[{"onValueRangeChanged":0}]}],[513,"v-map-layer-google",{"loadState":[1537,"load-state"],"mapType":[513,"map-type"],"apiKey":[513,"api-key"],"language":[513],"region":[513],"visible":[516],"opacity":[514],"scale":[513],"maxZoom":[514,"max-zoom"],"styles":[1025],"libraries":[513],"getError":[64]},null,{"styles":[{"parseStyles":0}]}],[513,"v-map-layer-scatterplot",{"loadState":[1537,"load-state"],"data":[513],"url":[513],"getFillColor":[513,"get-fill-color"],"getRadius":[514,"get-radius"],"opacity":[514],"visible":[516],"getError":[64]}],[769,"v-map-layer-terrain",{"loadState":[1537,"load-state"],"elevationData":[513,"elevation-data"],"texture":[513],"elevationDecoder":[513,"elevation-decoder"],"wireframe":[516],"color":[513],"minZoom":[514,"min-zoom"],"maxZoom":[514,"max-zoom"],"meshMaxError":[514,"mesh-max-error"],"visible":[516],"opacity":[514],"zIndex":[514,"z-index"],"didLoad":[32],"getError":[64],"isReady":[64]},null,{"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"elevationData":[{"onTerrainConfigChanged":0}],"texture":[{"onTerrainConfigChanged":0}],"elevationDecoder":[{"onTerrainConfigChanged":0}],"wireframe":[{"onTerrainConfigChanged":0}],"color":[{"onTerrainConfigChanged":0}],"minZoom":[{"onTerrainConfigChanged":0}],"maxZoom":[{"onTerrainConfigChanged":0}],"meshMaxError":[{"onTerrainConfigChanged":0}]}],[769,"v-map-layer-tile3d",{"loadState":[1537,"load-state"],"url":[513],"tilesetOptions":[1,"tileset-options"],"visible":[516],"opacity":[514],"zIndex":[514,"z-index"],"didLoad":[32],"isReady":[64],"getError":[64]},[[4,"styleReady","onStyleReady"]],{"url":[{"onUrlChanged":0}],"tilesetOptions":[{"onTilesetOptionsChanged":0}],"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}]}],[769,"v-map-layer-wcs",{"loadState":[1537,"load-state"],"url":[513],"coverageName":[513,"coverage-name"],"format":[513],"version":[513],"projection":[513],"resolutions":[513],"params":[513],"visible":[516],"opacity":[514],"zIndex":[514,"z-index"],"didLoad":[32],"getError":[64],"isReady":[64]},null,{"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"url":[{"onSourceChanged":0}],"coverageName":[{"onSourceChanged":0}],"format":[{"onSourceChanged":0}],"version":[{"onSourceChanged":0}],"projection":[{"onSourceChanged":0}],"resolutions":[{"onSourceChanged":0}],"params":[{"onSourceChanged":0}]}],[769,"v-map-layer-wfs",{"loadState":[1537,"load-state"],"url":[513],"typeName":[513,"type-name"],"version":[513],"outputFormat":[513,"output-format"],"srsName":[513,"srs-name"],"params":[513],"visible":[516],"opacity":[514],"zIndex":[514,"z-index"],"didLoad":[32],"getError":[64],"isReady":[64]},[[4,"styleReady","onStyleReady"]],{"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"url":[{"onSourceChanged":0}],"typeName":[{"onSourceChanged":0}],"version":[{"onSourceChanged":0}],"outputFormat":[{"onSourceChanged":0}],"srsName":[{"onSourceChanged":0}],"params":[{"onSourceChanged":0}]}],[513,"v-map-layer-wkt",{"loadState":[1537,"load-state"],"wkt":[513],"url":[513],"visible":[516],"opacity":[514],"zIndex":[514,"z-index"],"fillColor":[513,"fill-color"],"fillOpacity":[514,"fill-opacity"],"strokeColor":[513,"stroke-color"],"strokeWidth":[514,"stroke-width"],"strokeOpacity":[514,"stroke-opacity"],"pointRadius":[514,"point-radius"],"pointColor":[513,"point-color"],"iconUrl":[513,"icon-url"],"iconSize":[513,"icon-size"],"textProperty":[513,"text-property"],"textColor":[513,"text-color"],"textSize":[514,"text-size"],"getError":[64],"getLayerId":[64]},[[4,"styleReady","onStyleReady"]],{"wkt":[{"onWktChanged":0}],"url":[{"onUrlChanged":0}],"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"fillColor":[{"onStyleChanged":0}],"fillOpacity":[{"onStyleChanged":0}],"strokeColor":[{"onStyleChanged":0}],"strokeWidth":[{"onStyleChanged":0}],"strokeOpacity":[{"onStyleChanged":0}],"pointRadius":[{"onStyleChanged":0}],"pointColor":[{"onStyleChanged":0}],"iconUrl":[{"onStyleChanged":0}],"iconSize":[{"onStyleChanged":0}],"textProperty":[{"onStyleChanged":0}],"textColor":[{"onStyleChanged":0}],"textSize":[{"onStyleChanged":0}]}],[513,"v-map-layer-wms",{"loadState":[1537,"load-state"],"url":[513],"layers":[513],"styles":[513],"format":[513],"transparent":[516],"tiled":[516],"visible":[516],"opacity":[514],"zIndex":[514,"z-index"],"getError":[64]},null,{"visible":[{"onVisibleChanged":0}],"opacity":[{"onOpacityChanged":0}],"zIndex":[{"onZIndexChanged":0}],"url":[{"onUrlChanged":0}],"layers":[{"onLayersChanged":0}],"styles":[{"onStylesChanged":0}]}],[513,"v-map-layer-xyz",{"loadState":[1537,"load-state"],"url":[513],"attributions":[513],"maxZoom":[514,"max-zoom"],"tileSize":[514,"tile-size"],"subdomains":[513],"visible":[516],"opacity":[514],"getError":[64]}],[769,"v-map-style",{"format":[513],"src":[513],"content":[513],"layerTargets":[513,"layer-targets"],"autoApply":[516,"auto-apply"],"parsedStyle":[32],"isLoading":[32],"error":[32],"getStyle":[64],"getLayerTargetIds":[64]},null,{"src":[{"onStyleSourceChanged":0}],"content":[{"onStyleSourceChanged":0}],"format":[{"onStyleSourceChanged":0}]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;