@npm9912/v-map 0.1.0

package/dist/collection/map-provider/leaflet/leaflet-provider.js

@@ -0,0 +1,1095 @@
+import { watchElementResize } from "../../utils/dom-env";
+import * as L from "leaflet";
+import { isBrowser } from "../../utils/dom-env";
+import { log, error } from "../../utils/logger";
+import { DEFAULT_STYLE } from "../../types/styleconfig";
+import { removeInjectedCss, ensureLeafletCss, ensureGoogleLogo, } from "./leaflet-helpers";
+import { GoogleMapTilesLayer } from "./google-map-tiles-layer";
+import { GeoTIFFGridLayer } from "./GeoTIFFGridLayer";
+import { WCSGridLayer } from "./WCSGridLayer";
+import { wellknown } from "wellknown";
+import { GmlParser } from "@npm9912/s-gml";
+export class LeafletProvider {
+    map;
+    layers = [];
+    baseLayers = [];
+    hiddenLayerGroups = [];
+    googleLogoAdded = false;
+    unsubscribeResize;
+    shadowRoot;
+    injectedStyle;
+    layerErrorCallbacks = new Map();
+    layerErrorCleanups = new Map();
+    async init(options) {
+        if (!isBrowser())
+            return;
+        this.shadowRoot = options.shadowRoot;
+        this.injectedStyle = ensureLeafletCss(options.cssMode, this.shadowRoot);
+        const [lon, lat] = (options?.mapInitOptions?.center ?? [0, 0]);
+        this.map = L.map(options.target, {
+            zoomControl: true,
+            attributionControl: true,
+        }).setView([lat, lon], options?.mapInitOptions?.zoom ?? 2);
+        this.unsubscribeResize = watchElementResize(options.target, () => {
+            this.map?.invalidateSize();
+        }, {
+            attributes: true,
+            attributeFilter: ['style', 'class'],
+        });
+    }
+    async updateLayer(layerId, update) {
+        const layer = await this._getLayerById(layerId);
+        switch (update.type) {
+            case 'geojson':
+                await this.updateGeoJSONLayer(layer, update.data);
+                break;
+            case 'osm':
+                await this.updateOSMLayer(layer, update.data);
+                break;
+            case 'arcgis':
+                await this.updateArcGISLayer(layer, update.data);
+                break;
+            case 'wkt':
+                await this.updateWKTLayer(layer, update.data);
+                break;
+            case 'geotiff':
+                await this.updateGeoTIFFLayer(layer, update.data);
+                break;
+            case 'wcs':
+                await this.updateWCSLayer(layer, update.data);
+                break;
+            case 'wfs':
+                if (layer instanceof L.GeoJSON) {
+                    await this.updateWFSLayer(layer, update.data);
+                }
+                break;
+        }
+    }
+    // private async addStandaloneLayer(layerConfig: LayerConfig): Promise<L.Layer> {
+    //   const layer = await this.createLayer(layerConfig);
+    //   layer.addTo(this.map!);
+    //   this.layers.push(layer);
+    // }
+    async addLayerToGroup(layerConfig) {
+        const group = await this._ensureGroup(layerConfig.groupId, layerConfig.groupVisible);
+        const layer = await this.createLayer(layerConfig);
+        if (layer == null) {
+            return null;
+        }
+        group.addLayer(layer);
+        const layerId = this.getLayerId(layer);
+        layer.vmapVisible = true;
+        layer.vmapOpacity = 1.0;
+        if (layerConfig.opacity !== undefined) {
+            this.setOpacityByLayer(layer, layerConfig.opacity);
+        }
+        if (layerConfig.zIndex !== undefined) {
+            layer.setZIndex?.(layerConfig.zIndex);
+        }
+        if (layerConfig.visible) {
+            this.setVisibleByLayer(layer, true);
+        }
+        else if (layerConfig.visible === false) {
+            this.setVisibleByLayer(layer, false);
+        }
+        return layerId;
+    }
+    // async addLayer(config: LayerConfig): Promise<string> {
+    //   if (!this.map) return;
+    //   let layer: L.Layer = null;
+    //   if ('groupId' in config && config.groupId) {
+    //     try {
+    //       layer = await this.addLayerToGroup(
+    //         config as LayerConfig & { groupId: string },
+    //       );
+    //     } catch (ex) {
+    //       error('addLayer - Unerwarteter Fehler:', ex);
+    //       return null;
+    //     }
+    //   } else {
+    //     try {
+    //       layer = await this.addStandaloneLayer(config);
+    //     } catch (ex) {
+    //       error('addLayer - Unerwarteter Fehler:', ex);
+    //       return null;
+    //     }
+    //   }
+    //   if (layer == null) {
+    //     return null;
+    //   }
+    //   const layerId = L.Util.stamp(layer); //layer._leaflet_id;
+    //   layer.vmapVisible = true;
+    //   layer.vmapOpacity = 1.0;
+    //   if (config.opacity !== undefined) {
+    //     this.setOpacityByLayer(layer, config.opacity);
+    //   }
+    //   if (config.zIndex !== undefined) {
+    //     layer.setZIndex(config.zIndex);
+    //   }
+    //   if (config.visible) {
+    //     this.setVisibleByLayer(layer, true);
+    //   } else if (config.visible === false) {
+    //     this.setVisibleByLayer(layer, false);
+    //   }
+    //   return layerId;
+    // }
+    async addBaseLayer(layerConfig, basemapid, layerElementId) {
+        if (layerElementId === undefined || layerElementId === null) {
+            log('leaflet - addBaseLayer - layerElementId not set.');
+            return null;
+        }
+        if (basemapid === undefined || basemapid === null) {
+            log('leaflet - addBaseLayer - basemapid not set.');
+        }
+        const group = await this._ensureGroup(layerConfig.groupId, layerConfig.groupVisible);
+        group.basemap = true;
+        const layer = await this.createLayer(layerConfig);
+        //    layer.group = group;
+        this.baseLayers.push(layer);
+        if (layer == null) {
+            return null;
+        }
+        layer.layerElementId = layerElementId;
+        const layerId = this.getLayerId(layer);
+        layer.vmapVisible = true;
+        layer.vmapOpacity = 1.0;
+        if (layerConfig.opacity !== undefined) {
+            this.setOpacityByLayer(layer, layerConfig.opacity);
+        }
+        if (layerConfig.zIndex !== undefined) {
+            layer.setZIndex?.(layerConfig.zIndex);
+        }
+        if (layerConfig.visible) {
+            this.setVisibleByLayer(layer, true);
+        }
+        else if (layerConfig.visible === false) {
+            this.setVisibleByLayer(layer, false);
+        }
+        if (basemapid === layerElementId) {
+            const prev_layer = group.getLayers()[0];
+            if (prev_layer) {
+                this.map.removeLayer(prev_layer);
+                group.clearLayers();
+            }
+            group.addLayer(layer);
+            if (group.visible) {
+                layer.addTo(this.map);
+            }
+            //group.layerId = layerId;
+        }
+        return layerId;
+    }
+    async setBaseLayer(groupId, layerElementId) {
+        if (layerElementId === null) {
+            log('leaflet - setBaseLayer - layerElementId is null.');
+            return;
+        }
+        const group = this.layers.find(l => l._groupId === groupId);
+        const layer = this.baseLayers.find(l => l.layerElementId === layerElementId);
+        if (layer === undefined) {
+            log('leaflet - setBaseLayer - layer not found. layerElementId: ' +
+                layerElementId);
+            return;
+        }
+        if (!group) {
+            return;
+        }
+        const prev_layer = group.getLayers()[0];
+        if (prev_layer) {
+            this.map.removeLayer(prev_layer);
+            group.clearLayers();
+        }
+        group.addLayer(layer);
+        ////layer.addTo(this.map!);
+        //group.layerId = layerId;
+        //group.set('layerId', layerId, false);
+    }
+    getLayerId(layer) {
+        return String(L.Util.stamp(layer));
+    }
+    normalizeAttribution(attribution) {
+        if (Array.isArray(attribution)) {
+            return attribution.join(', ');
+        }
+        return attribution;
+    }
+    async _getLayerById(layerId) {
+        let layerFound = null;
+        this.map?.eachLayer(layer => {
+            if (this.getLayerId(layer) === layerId) {
+                layerFound = layer;
+            }
+        });
+        if (layerFound)
+            return layerFound;
+        layerFound =
+            this.baseLayers.find(l => this.getLayerId(l) === layerId) ?? null;
+        if (layerFound === undefined)
+            return null;
+        return layerFound;
+    }
+    async createLayer(layerConfig) {
+        switch (layerConfig.type) {
+            case 'geojson':
+                return this.createGeoJSONLayer(layerConfig);
+            case 'xyz':
+                return this.createXYZLayer(layerConfig);
+            case 'osm':
+                return this.createOSMLayer(layerConfig);
+            case 'wms':
+                return this.createWMSLayer(layerConfig);
+            case 'wcs':
+                return this.createWCSLayer(layerConfig);
+            case 'wfs':
+                return this.createWFSLayer(layerConfig);
+            case 'arcgis':
+                return this.createArcGISLayer(layerConfig);
+            case 'google':
+                return this.createGoogleLayer(layerConfig);
+            case 'wkt':
+                return this.createWKTLayer(layerConfig);
+            case 'geotiff':
+                return this.createGeoTIFFLayer(layerConfig);
+            default:
+                throw new Error(`Unsupported layer type: ${layerConfig.type}`);
+        }
+    }
+    async updateGeoJSONLayer(layer, data) {
+        if (!(layer instanceof L.GeoJSON))
+            return;
+        let geoJsonData = null;
+        if (data.geojson) {
+            geoJsonData = JSON.parse(data.geojson);
+        }
+        else if (data.url) {
+            const res = await fetch(data.url);
+            if (!res.ok)
+                throw new Error(`GeoJSON fetch failed: ${res.status} ${res.statusText}`);
+            geoJsonData = await res.json();
+        }
+        layer.clearLayers();
+        layer.addData(geoJsonData);
+    }
+    async createGeoJSONLayer(config) {
+        let data = null;
+        if (config.geojson) {
+            data = JSON.parse(config.geojson);
+        }
+        else if (config.url) {
+            const res = await fetch(config.url);
+            if (!res.ok)
+                throw new Error(`GeoJSON fetch failed: ${res.status} ${res.statusText}`);
+            data = await res.json();
+        }
+        if (data) {
+            // Use geostyler style if available, otherwise use provided style or default style
+            let layerOptions = {};
+            if (config.geostylerStyle) {
+                layerOptions = await this.createGeostylerLeafletOptions(config.geostylerStyle);
+            }
+            else {
+                const style = config.style
+                    ? { ...DEFAULT_STYLE, ...config.style }
+                    : DEFAULT_STYLE;
+                layerOptions = {
+                    style: this.createLeafletStyle(style),
+                    pointToLayer: (feature, latlng) => this.createLeafletPoint(feature, latlng, style),
+                    onEachFeature: (feature, layer) => this.bindLeafletPopup(feature, layer, style),
+                };
+            }
+            const layer = L.geoJSON(data, layerOptions);
+            return layer;
+        }
+        return null;
+    }
+    async createXYZLayer(config) {
+        const layer = L.tileLayer(config.url, {
+            attribution: this.normalizeAttribution(config.attributions),
+            maxZoom: config.maxZoom ?? 19,
+            ...(config.options ?? {}),
+        });
+        return layer;
+    }
+    async updateOSMLayer(layer, data) {
+        if (!('setUrl' in layer) || typeof layer.setUrl !== 'function')
+            return;
+        let url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+        if (data.url) {
+            url = data.url + '/{z}/{x}/{y}.png';
+        }
+        layer.setUrl(url);
+    }
+    async createOSMLayer(cfg) {
+        let url = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+        if (cfg.url) {
+            url = cfg.url + '/{z}/{x}/{y}.png';
+        }
+        return L.tileLayer(url, {
+            attribution: '© OpenStreetMap contributors',
+            maxZoom: 19,
+        });
+    }
+    async createWMSLayer(config) {
+        return L.tileLayer.wms(config.url, {
+            layers: config.layers,
+            format: config.format ?? 'image/png',
+            transparent: config.transparent ?? true,
+            ...(config.extraParams ?? {}),
+        });
+    }
+    buildArcGISUrl(url, params) {
+        if (!params || Object.keys(params).length === 0)
+            return url;
+        const query = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                query.set(key, String(value));
+            }
+        });
+        if (query.toString().length === 0)
+            return url;
+        return `${url}${url.includes('?') ? '&' : '?'}${query.toString()}`;
+    }
+    async createArcGISLayer(config) {
+        const params = {
+            ...(config.params ?? {}),
+        };
+        if (config.token) {
+            params.token = config.token;
+        }
+        const arcgisUrl = this.buildArcGISUrl(config.url, params);
+        const options = {
+            attribution: this.normalizeAttribution(config.attributions),
+            minZoom: config.minZoom,
+            maxZoom: config.maxZoom,
+            ...(config.options ?? {}),
+        };
+        return L.tileLayer(arcgisUrl, options);
+    }
+    async updateArcGISLayer(layer, data) {
+        const params = {
+            ...(data?.params ?? {}),
+        };
+        if (data?.token) {
+            params.token = data.token;
+        }
+        const tileLayer = layer;
+        const targetUrl = data?.url ?? tileLayer.options?.url ?? '';
+        const nextUrl = this.buildArcGISUrl(targetUrl, params);
+        if ('setUrl' in tileLayer && typeof tileLayer.setUrl === 'function') {
+            tileLayer.setUrl(nextUrl);
+        }
+    }
+    async createGoogleLayer(config) {
+        if (!this.map)
+            throw new Error('Map not initialized');
+        if (!config.apiKey)
+            throw new Error("Google-Layer benötigt 'apiKey' (Google Maps Platform).");
+        const parsedStyles = typeof config.styles === 'string'
+            ? this.tryParseStyles(config.styles)
+            : config.styles;
+        const googleLayer = new GoogleMapTilesLayer({
+            apiKey: config.apiKey,
+            mapType: config.mapType ?? 'roadmap',
+            language: config.language,
+            region: config.region,
+            scale: config.scale,
+            highDpi: config.highDpi,
+            layerTypes: config.layerTypes,
+            overlay: config.overlay,
+            styles: Array.isArray(parsedStyles) ? parsedStyles : undefined,
+            imageFormat: config.imageFormat,
+            apiOptions: config.apiOptions,
+            maxZoom: config.maxZoom ?? 22,
+        });
+        ensureGoogleLogo(this.map, () => {
+            this.googleLogoAdded = true;
+            log('v-map - provider - leaflet - googleLogoAdded: ', this.googleLogoAdded);
+        });
+        return googleLayer;
+    }
+    tryParseStyles(value) {
+        try {
+            const parsed = JSON.parse(value);
+            return Array.isArray(parsed) ? parsed : undefined;
+        }
+        catch {
+            error('Failed to parse Google styles JSON');
+            return undefined;
+        }
+    }
+    async destroy() {
+        this.unsubscribeResize?.();
+        removeInjectedCss(this.shadowRoot, this.injectedStyle);
+        for (const l of this.layers) {
+            this.map?.removeLayer(l);
+        }
+        this.layers = [];
+        this.map?.remove();
+        this.map = undefined;
+    }
+    async setView([lon, lat], zoom) {
+        this.map?.setView([lat, lon], zoom, { animate: false });
+    }
+    onLayerError(layerId, callback) {
+        this.layerErrorCallbacks.set(layerId, callback);
+        this._getLayerById(layerId).then(layer => {
+            if (!layer)
+                return;
+            const handler = () => { callback({ type: 'network', message: 'Tile load error' }); };
+            layer.on('tileerror', handler);
+            this.layerErrorCleanups.set(layerId, () => layer.off('tileerror', handler));
+        });
+    }
+    offLayerError(layerId) {
+        this.layerErrorCleanups.get(layerId)?.();
+        this.layerErrorCleanups.delete(layerId);
+        this.layerErrorCallbacks.delete(layerId);
+    }
+    async removeLayer(layerId) {
+        if (!layerId) {
+            return;
+        }
+        this.offLayerError(layerId);
+        const layer = await this._getLayerById(layerId);
+        if (layer) {
+            this.map.removeLayer(layer);
+        }
+    }
+    async setZIndex(layerId, zIndex) {
+        if (!layerId) {
+            return;
+        }
+        const layer = await this._getLayerById(layerId);
+        if (layer) {
+            if (typeof layer.setZIndex === 'function') {
+                layer.setZIndex(zIndex);
+            } //todo
+        }
+    }
+    async setOpacity(layerId, opacity) {
+        if (!layerId)
+            return;
+        const layer = await this._getLayerById(layerId);
+        this.setOpacityByLayer(layer, opacity);
+    }
+    setOpacityByLayer(layer, opacity) {
+        if (!layer)
+            return;
+        // 1. Speichere die Ziel-Opazität (auch wenn Layer unsichtbar)
+        layer.vmapOpacity = opacity;
+        if (layer.vmapVisible === undefined) {
+            layer.vmapVisible = true;
+        }
+        // 2. Wende sie nur an, wenn der Layer sichtbar IST ODER GEMACHT WIRD
+        //    (vermeidet unnötige setOpacity-Aufrufe, wenn vmapVisible=false)
+        if (layer.vmapVisible !== false) {
+            this.setLayerOpacity(layer, opacity);
+        }
+    }
+    async setVisible(layerId, visible) {
+        if (!layerId)
+            return;
+        const layer = await this._getLayerById(layerId);
+        this.setVisibleByLayer(layer, visible);
+    }
+    setVisibleByLayer(layer, visible) {
+        if (!layer)
+            return;
+        // 1. Aktualisiere den Sichtbarkeitszustand
+        layer.vmapVisible = visible;
+        if (layer.vmapOpacity === undefined) {
+            layer.vmapOpacity = 1.0;
+        }
+        // 2. Setze die Opazität basierend auf dem neuen Zustand:
+        const targetOpacity = visible ? layer.vmapOpacity : 0.0;
+        this.setLayerOpacity(layer, targetOpacity);
+    }
+    setLayerOpacity(layer, options) {
+        if (!layer)
+            return;
+        const opacity = typeof options === 'number' ? options : options.opacity ?? 1;
+        const fillOpacity = typeof options === 'number' ? options : options.fillOpacity ?? opacity;
+        const hasLeafletClass = (candidate, className) => {
+            if (!(className in L))
+                return false;
+            const ctor = L[className];
+            return (typeof ctor === 'function' &&
+                candidate instanceof ctor);
+        };
+        const isLayerCollection = (candidate) => hasLeafletClass(candidate, 'GeoJSON') ||
+            hasLeafletClass(candidate, 'LayerGroup');
+        const isPathLayer = (candidate) => hasLeafletClass(candidate, 'Path');
+        const isMarkerLayer = (candidate) => hasLeafletClass(candidate, 'Marker');
+        if (isLayerCollection(layer)) {
+            layer.eachLayer(subLayer => this.setLayerOpacity(subLayer, options));
+        }
+        else if (isPathLayer(layer)) {
+            layer.setStyle({ opacity, fillOpacity });
+        }
+        else if (isMarkerLayer(layer)) {
+            layer.setOpacity(opacity);
+        }
+        else if ('setOpacity' in layer) {
+            layer.setOpacity(opacity);
+        }
+    }
+    async ensureGroup(groupId, visible, _opts) {
+        await this._ensureGroup(groupId, visible);
+    }
+    async _ensureGroup(groupId, visible) {
+        let group = await this._getLayerGroupById(groupId);
+        if (!group) {
+            group = L.layerGroup();
+            group._groupId = groupId;
+            group.visible = true;
+            group.addTo(this.map);
+            this.layers.push(group);
+        }
+        this.setGroupVisible(groupId, visible !== undefined ? visible : true);
+        return group;
+    }
+    async _getLayerGroupById(groupId) {
+        if (!this.map) {
+            return null;
+        }
+        let group = this.layers.find(l => l instanceof L.LayerGroup && l._groupId === groupId);
+        if (!group) {
+            group = this.hiddenLayerGroups.find(lg => lg._groupId === groupId);
+            if (!group)
+                return null;
+        }
+        return group;
+    }
+    async setGroupVisible(groupId, visible) {
+        const layerGroup = await this._getLayerGroupById(groupId);
+        if (layerGroup) {
+            if (layerGroup.visible === visible)
+                return;
+            if (layerGroup.visible === false) {
+                layerGroup.addTo(this.map);
+                // remove layergroup from hidden list
+                this.hiddenLayerGroups = this.hiddenLayerGroups.filter(lg => lg._groupId !== groupId);
+                layerGroup.visible = visible;
+            }
+            else if (layerGroup.visible === true) {
+                this.map.removeLayer(layerGroup);
+                // add layergroup to hidden list
+                layerGroup.visible = visible;
+                this.hiddenLayerGroups.push(layerGroup);
+            }
+        }
+    }
+    async updateWKTLayer(layer, data) {
+        if (!(layer instanceof L.GeoJSON))
+            return;
+        let geoJsonData = null;
+        if (data.wkt) {
+            geoJsonData = await this.wktToGeoJSON(data.wkt);
+        }
+        else if (data.url) {
+            try {
+                const response = await fetch(data.url);
+                if (!response.ok)
+                    throw new Error(`Failed to fetch WKT: ${response.status}`);
+                const wktText = await response.text();
+                geoJsonData = await this.wktToGeoJSON(wktText);
+            }
+            catch (e) {
+                error('Failed to load WKT from URL:', e);
+                return;
+            }
+        }
+        if (geoJsonData) {
+            layer.clearLayers();
+            // Update layer options to use enhanced styling
+            const geoJsonLayer = layer;
+            geoJsonLayer.options.style = this.createLeafletStyle(data.style);
+            geoJsonLayer.options.pointToLayer = (feature, latlng) => this.createLeafletPoint(feature, latlng, data.style);
+            geoJsonLayer.options.onEachFeature = (feature, layer) => this.bindLeafletPopup(feature, layer, data.style);
+            geoJsonLayer.addData(geoJsonData);
+        }
+    }
+    async createWKTLayer(config) {
+        let geoJsonData = null;
+        const emptyCollection = { type: 'FeatureCollection', features: [] };
+        if (config.wkt) {
+            geoJsonData = await this.wktToGeoJSON(config.wkt);
+        }
+        else if (config.url) {
+            try {
+                const response = await fetch(config.url);
+                if (!response.ok)
+                    throw new Error(`Failed to fetch WKT: ${response.status}`);
+                const wktText = await response.text();
+                geoJsonData = await this.wktToGeoJSON(wktText);
+            }
+            catch (e) {
+                error('Failed to load WKT from URL:', e);
+                geoJsonData = emptyCollection;
+            }
+        }
+        else {
+            geoJsonData = emptyCollection;
+        }
+        log('[Leaflet WKT] Creating layer with GeoJSON data:', geoJsonData);
+        log('[Leaflet WKT] Config:', config);
+        // Use geostyler style if available, otherwise use config style or default
+        let layerOptions = {};
+        if (config.geostylerStyle) {
+            layerOptions = await this.createGeostylerLeafletOptions(config.geostylerStyle);
+        }
+        else {
+            const style = config.style
+                ? { ...DEFAULT_STYLE, ...config.style }
+                : DEFAULT_STYLE;
+            layerOptions = {
+                style: this.createLeafletStyle(style),
+                pointToLayer: (feature, latlng) => this.createLeafletPoint(feature, latlng, style),
+                onEachFeature: (feature, layer) => this.bindLeafletPopup(feature, layer, style),
+            };
+        }
+        log('[Leaflet WKT] Layer options:', layerOptions);
+        const layer = L.geoJSON(geoJsonData, layerOptions);
+        log('[Leaflet WKT] Created layer:', layer);
+        if (typeof layer.getBounds === 'function') {
+            log('[Leaflet WKT] Layer bounds:', layer.getBounds());
+        }
+        return layer;
+    }
+    async wktToGeoJSON(wkt) {
+        try {
+            // Use wellknown library to parse WKT into GeoJSON (browser-compatible)
+            const geoJSON = wellknown.parse(wkt);
+            if (!geoJSON) {
+                throw new Error('Failed to parse WKT - returned null');
+            }
+            // Return as a Feature
+            const feature = {
+                type: 'Feature',
+                geometry: geoJSON,
+                properties: {},
+            };
+            // Debug output to browser console
+            log('[Leaflet WKT] Input WKT:', wkt);
+            log('[Leaflet WKT] Generated GeoJSON:', JSON.stringify(feature, null, 2));
+            const fc = {
+                type: 'FeatureCollection',
+                features: [feature],
+            };
+            return fc;
+        }
+        catch (e) {
+            error('[Leaflet WKT] Failed to parse WKT:', wkt, e);
+            // If parsing fails, return empty FeatureCollection
+            const empty = { type: 'FeatureCollection', features: [] };
+            return empty;
+        }
+    }
+    async createGeoTIFFLayer(config) {
+        if (!config.url) {
+            throw new Error('GeoTIFF layer requires a URL');
+        }
+        try {
+            const layer = new GeoTIFFGridLayer({
+                url: config.url,
+                tileSize: 256,
+                colorMap: config.colorMap,
+                valueRange: config.valueRange,
+                nodata: config.nodata,
+                resolution: config.resolution,
+                resampleMethod: config.resampleMethod,
+                viewProjection: this.map.options.crs.code,
+            });
+            if (config.opacity !== undefined) {
+                layer.setOpacity?.(config.opacity);
+            }
+            if (config.zIndex !== undefined) {
+                layer.setZIndex?.(config.zIndex);
+            }
+            return layer;
+        }
+        catch (err) {
+            error('Failed to create GeoTIFF layer:', err);
+            // Return a placeholder layer in case of error
+            return L.layerGroup([]);
+        }
+    }
+    async updateGeoTIFFLayer(layer, data) {
+        if (!data.url) {
+            throw new Error('GeoTIFF update requires a URL');
+        }
+        if (!layer)
+            return;
+        if (!(layer instanceof GeoTIFFGridLayer))
+            return;
+        const extData = data;
+        await layer.updateSource({
+            url: data.url,
+            colorMap: data.colorMap,
+            valueRange: data.valueRange,
+            nodata: data.nodata,
+            resolution: extData.resolution,
+            resampleMethod: extData.resampleMethod,
+        });
+    }
+    async createWCSLayer(config) {
+        if (!config.url) {
+            throw new Error('WCS layer requires a URL');
+        }
+        if (!config.coverageName) {
+            throw new Error('WCS layer requires a coverageName');
+        }
+        try {
+            const wcsOptions = {
+                url: config.url,
+                coverageName: config.coverageName,
+                version: config.version ?? '2.0.1',
+                format: config.format ?? 'image/tiff',
+                projection: config.projection ?? 'EPSG:4326',
+                params: config.params,
+            };
+            // Add GridLayer options
+            if (config.tileSize)
+                wcsOptions.tileSize = config.tileSize;
+            if (config.minZoom !== undefined)
+                wcsOptions.minZoom = config.minZoom;
+            if (config.maxZoom !== undefined)
+                wcsOptions.maxZoom = config.maxZoom;
+            const layer = new WCSGridLayer(wcsOptions);
+            if (config.opacity !== undefined) {
+                layer.setOpacity?.(config.opacity);
+            }
+            if (config.zIndex !== undefined) {
+                layer.setZIndex?.(config.zIndex);
+            }
+            return layer;
+        }
+        catch (err) {
+            error('[Leaflet WCS] Failed to create WCS layer:', err);
+            // Return a placeholder layer in case of error
+            return L.layerGroup([]);
+        }
+    }
+    async updateWCSLayer(layer, data) {
+        if (!layer)
+            return;
+        if (layer instanceof WCSGridLayer) {
+            const updateOptions = {};
+            if (data.url)
+                updateOptions.url = data.url;
+            if (data.coverageName)
+                updateOptions.coverageName = data.coverageName;
+            if (data.version)
+                updateOptions.version = data.version;
+            if (data.format)
+                updateOptions.format = data.format;
+            if (data.projection)
+                updateOptions.projection = data.projection;
+            if (data.params)
+                updateOptions.params = data.params;
+            layer.updateOptions(updateOptions);
+        }
+    }
+    // ========== Enhanced Styling Methods ==========
+    /**
+     * Convert a Geostyler style to Leaflet GeoJSON options
+     */
+    async createGeostylerLeafletOptions(geostylerStyle) {
+        // Helper to extract static value from GeoStyler property
+        const getValue = (prop, defaultValue = undefined) => {
+            if (prop === undefined || prop === null)
+                return defaultValue;
+            // If it's a GeoStyler function object, we can't evaluate it here - return default
+            if (typeof prop === 'object' && prop.name)
+                return defaultValue;
+            return prop;
+        };
+        const options = {
+            style: (feature) => {
+                const geometryType = feature?.geometry?.type;
+                let leafletStyle = {};
+                if (geostylerStyle.rules) {
+                    for (const rule of geostylerStyle.rules) {
+                        if (rule.symbolizers) {
+                            for (const symbolizer of rule.symbolizers) {
+                                switch (symbolizer.kind) {
+                                    case 'Fill':
+                                        if (geometryType === 'Polygon' ||
+                                            geometryType === 'MultiPolygon') {
+                                            const fillColor = getValue(symbolizer.color, 'rgba(0,100,255,0.3)');
+                                            const fillOpacity = getValue(symbolizer.opacity, 0.3);
+                                            const outlineColor = getValue(symbolizer.outlineColor, 'rgba(0,100,255,1)');
+                                            const outlineWidth = getValue(symbolizer.outlineWidth, 1);
+                                            leafletStyle = {
+                                                ...leafletStyle,
+                                                fillColor: fillColor,
+                                                fillOpacity: fillOpacity,
+                                                color: outlineColor,
+                                                weight: outlineWidth,
+                                            };
+                                        }
+                                        break;
+                                    case 'Line':
+                                        const lineColor = getValue(symbolizer.color, 'rgba(0,100,255,1)');
+                                        const lineWidth = getValue(symbolizer.width, 2);
+                                        const dashArray = symbolizer.dasharray
+                                            ? Array.isArray(symbolizer.dasharray)
+                                                ? symbolizer.dasharray
+                                                    .map((v) => getValue(v, 0))
+                                                    .join(',')
+                                                : undefined
+                                            : undefined;
+                                        leafletStyle = {
+                                            ...leafletStyle,
+                                            color: lineColor,
+                                            weight: lineWidth,
+                                            dashArray: dashArray,
+                                        };
+                                        break;
+                                }
+                            }
+                        }
+                    }
+                }
+                return leafletStyle;
+            },
+            pointToLayer: (_feature, latlng) => {
+                if (geostylerStyle.rules) {
+                    for (const rule of geostylerStyle.rules) {
+                        if (rule.symbolizers) {
+                            for (const symbolizer of rule.symbolizers) {
+                                switch (symbolizer.kind) {
+                                    case 'Mark':
+                                        const markColor = getValue(symbolizer.color, 'rgba(0,100,255,1)');
+                                        const markRadius = getValue(symbolizer.radius, 6);
+                                        const strokeColor = getValue(symbolizer.strokeColor, 'rgba(0,100,255,1)');
+                                        const strokeWidth = getValue(symbolizer.strokeWidth, 2);
+                                        return L.circleMarker(latlng, {
+                                            radius: markRadius,
+                                            fillColor: markColor,
+                                            fillOpacity: 1,
+                                            color: strokeColor,
+                                            weight: strokeWidth,
+                                        });
+                                    case 'Icon':
+                                        const iconSrc = getValue(symbolizer.image);
+                                        const iconSize = getValue(symbolizer.size, 32);
+                                        if (iconSrc && typeof iconSrc === 'string') {
+                                            const icon = L.icon({
+                                                iconUrl: iconSrc,
+                                                iconSize: [iconSize, iconSize],
+                                                iconAnchor: [iconSize / 2, iconSize],
+                                            });
+                                            return L.marker(latlng, { icon });
+                                        }
+                                        break;
+                                }
+                            }
+                        }
+                    }
+                }
+                // Default point style
+                return L.circleMarker(latlng, {
+                    radius: 6,
+                    fillColor: 'rgba(0,100,255,1)',
+                    fillOpacity: 1,
+                    color: 'rgba(0,100,255,1)',
+                    weight: 2,
+                });
+            },
+            onEachFeature: (feature, layer) => {
+                if (geostylerStyle.rules) {
+                    for (const rule of geostylerStyle.rules) {
+                        if (rule.symbolizers) {
+                            for (const symbolizer of rule.symbolizers) {
+                                if (symbolizer.kind === 'Text') {
+                                    const labelProp = symbolizer.label;
+                                    if (labelProp &&
+                                        typeof labelProp === 'string' &&
+                                        feature.properties &&
+                                        feature.properties[labelProp]) {
+                                        const textContent = String(feature.properties[labelProp]);
+                                        const textColor = getValue(symbolizer.color, '#000000');
+                                        const textSize = getValue(symbolizer.size, 12);
+                                        const styledText = `<div style="color: ${textColor}; font-size: ${textSize}px; font-family: Arial, sans-serif;">${textContent}</div>`;
+                                        layer.bindTooltip(styledText, {
+                                            permanent: true,
+                                            direction: 'center',
+                                            className: 'leaflet-tooltip-custom',
+                                        });
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+        };
+        return options;
+    }
+    createLeafletStyle(style) {
+        return (feature) => {
+            const geometryType = feature?.geometry?.type;
+            const fillColor = style?.fillColor ?? 'rgba(0,100,255,0.3)';
+            const fillOpacity = style?.fillOpacity ?? 0.3;
+            const strokeColor = style?.strokeColor ?? 'rgba(0,100,255,1)';
+            const strokeOpacity = style?.strokeOpacity ?? 1;
+            const strokeWidth = style?.strokeWidth ?? 2;
+            if (geometryType === 'Polygon' || geometryType === 'MultiPolygon') {
+                return {
+                    fillColor,
+                    fillOpacity,
+                    color: strokeColor,
+                    opacity: strokeOpacity,
+                    weight: strokeWidth,
+                    dashArray: style?.strokeDashArray
+                        ? style.strokeDashArray.join(',')
+                        : undefined,
+                };
+            }
+            if (geometryType === 'LineString' || geometryType === 'MultiLineString') {
+                return {
+                    color: strokeColor,
+                    opacity: strokeOpacity,
+                    weight: strokeWidth,
+                    dashArray: style?.strokeDashArray
+                        ? style.strokeDashArray.join(',')
+                        : undefined,
+                };
+            }
+            return {};
+        };
+    }
+    createLeafletPoint(feature, latlng, style) {
+        let finalStyle = { ...(style ?? {}) };
+        if (style?.styleFunction) {
+            const conditionalStyle = style.styleFunction(feature);
+            if (conditionalStyle) {
+                finalStyle = {
+                    ...style,
+                    ...conditionalStyle,
+                };
+            }
+        }
+        if (finalStyle?.iconUrl) {
+            // Create icon marker
+            const iconSize = finalStyle.iconSize || [32, 32];
+            const iconAnchor = finalStyle.iconAnchor || [
+                iconSize[0] / 2,
+                iconSize[1],
+            ];
+            const icon = L.icon({
+                iconUrl: finalStyle.iconUrl,
+                iconSize: iconSize,
+                iconAnchor: iconAnchor,
+            });
+            return L.marker(latlng, { icon });
+        }
+        else {
+            // Create circle marker
+            const pointColor = finalStyle?.pointColor ?? 'rgba(0,100,255,1)';
+            const pointOpacity = finalStyle?.pointOpacity ?? 1;
+            const pointRadius = finalStyle?.pointRadius ?? 6;
+            const strokeColor = finalStyle?.strokeColor ?? 'rgba(0,100,255,1)';
+            const strokeOpacity = finalStyle?.strokeOpacity ?? 1;
+            const strokeWidth = finalStyle?.strokeWidth ?? 2;
+            return L.circleMarker(latlng, {
+                radius: pointRadius,
+                fillColor: pointColor,
+                fillOpacity: pointOpacity,
+                color: strokeColor,
+                opacity: strokeOpacity,
+                weight: strokeWidth,
+            });
+        }
+    }
+    bindLeafletPopup(feature, layer, style) {
+        // Text labeling via popup or tooltip - handle undefined style
+        if (style?.textProperty &&
+            feature.properties &&
+            feature.properties[style.textProperty]) {
+            const textContent = String(feature.properties[style.textProperty]);
+            const textColor = style?.textColor ?? '#000000';
+            const textSize = style?.textSize ?? 12;
+            // Create styled text content
+            const styledText = `<div style="color: ${textColor}; font-size: ${textSize}px; font-family: Arial, sans-serif;">${textContent}</div>`;
+            // Bind as permanent tooltip for labels or popup for clickable info
+            layer.bindTooltip(styledText, {
+                permanent: true,
+                direction: 'center',
+                className: 'leaflet-tooltip-custom',
+            });
+        }
+    }
+    async createWFSLayer(config) {
+        const geojson = await this.fetchWFSFromUrl(config);
+        // Use geostyler style if available, otherwise use provided style or default style
+        let layerOptions = {};
+        if (config.geostylerStyle) {
+            layerOptions = await this.createGeostylerLeafletOptions(config.geostylerStyle);
+        }
+        else {
+            const style = config.style
+                ? { ...DEFAULT_STYLE, ...config.style }
+                : DEFAULT_STYLE;
+            layerOptions = {
+                style: this.createLeafletStyle(style),
+                pointToLayer: (feature, latlng) => this.createLeafletPoint(feature, latlng, style),
+                onEachFeature: (feature, layer) => this.bindLeafletPopup(feature, layer, style),
+            };
+        }
+        const layer = L.geoJSON(geojson, layerOptions);
+        return layer;
+    }
+    async updateWFSLayer(layer, data) {
+        const geojson = await this.fetchWFSFromUrl(data);
+        layer.clearLayers();
+        layer.addData(geojson);
+    }
+    async fetchWFSFromUrl(config) {
+        const baseParams = {
+            service: 'WFS',
+            request: 'GetFeature',
+            version: config.version ?? '1.1.0',
+            typeName: config.typeName,
+            outputFormat: config.outputFormat ?? 'application/json',
+            srsName: config.srsName ?? 'EPSG:4326',
+        };
+        const params = { ...baseParams, ...(config.params ?? {}) };
+        const requestUrl = this.appendParams(config.url, params);
+        const response = await fetch(requestUrl);
+        if (!response.ok) {
+            throw new Error(`WFS request failed (${response.status} ${response.statusText})`);
+        }
+        const outputFormat = (config.outputFormat ?? 'application/json').toLowerCase();
+        // Handle JSON formats
+        if (outputFormat.includes('json') ||
+            outputFormat.includes('geojson') ||
+            outputFormat === 'application/json') {
+            return (await response.json());
+        }
+        // Handle GML formats - parse XML to GeoJSON using gml2geojson
+        if (outputFormat.includes('gml') || outputFormat.includes('xml')) {
+            const xml = await response.text();
+            const parser = new GmlParser();
+            return (await parser.parse(xml));
+        }
+        // Default: try to parse as JSON
+        return (await response.json());
+    }
+    appendParams(baseUrl, params) {
+        const query = new URLSearchParams();
+        Object.entries(params).forEach(([key, value]) => {
+            if (value !== undefined && value !== null) {
+                query.set(key, String(value));
+            }
+        });
+        if (!query.toString())
+            return baseUrl;
+        return `${baseUrl}${baseUrl.includes('?') ? '&' : '?'}${query.toString()}`;
+    }
+    getMap() {
+        return this.map;
+    }
+}