@npm9912/v-map 0.1.0

package/dist/esm/leaflet-provider-Q41TB6ku.js

@@ -0,0 +1,1794 @@
+import { i as isBrowser, L as LEAFLET_VERSION, s as supportsAdoptedStyleSheets, w as watchElementResize } from './v-map.v-map-layer-osm.v-map-layergroup-B4pFHuSf.js';
+import * as L from 'leaflet';
+import { e as error, l as log } from './messages-CMKJzsgL.js';
+import { D as DEFAULT_STYLE } from './styleconfig-B-bAcABs.js';
+import { l as loadGeoTIFFSource, G as GeoTIFFTileProcessor, g as getColorStops } from './geotiff-source-esnDnC-u.js';
+import { w as wellknownExports } from './index-BUHa4Jj0.js';
+import { GmlParser } from './index.browser-DhQAXuA7.js';
+import './index-jzneDarq.js';
+import './v-map-layer-helper-Dys44Cgo.js';
+import './_commonjsHelpers-E-ZsRS8r.js';
+
+function injectInlineMin(root) {
+    if (!isBrowser())
+        return;
+    const css = `
+    :host { display:block; }
+    #map { width:100%; height:100%; display:block; }
+  `;
+    if (supportsAdoptedStyleSheets()) {
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(css);
+        const target = (root ?? document);
+        const current = target.adoptedStyleSheets ?? [];
+        target.adoptedStyleSheets = [...current, sheet];
+        return null;
+    }
+    else {
+        const style = document.createElement('style');
+        style.textContent = css;
+        (root ?? document.head).appendChild(style);
+        return style;
+    }
+}
+function addLeafletCssFromCdn(root, version = LEAFLET_VERSION, cdn = 'jsdelivr') {
+    if (!isBrowser())
+        return;
+    const href = cdn === 'unpkg'
+        ? `https://unpkg.com/leaflet@${version}/dist/leaflet.css`
+        : `https://cdn.jsdelivr.net/npm/leaflet@${version}/dist/leaflet.css`;
+    if (cdn === 'unpkg')
+        L.Icon.Default.imagePath = `https://unpkg.com/npm/leaflet@${version}/dist/images/`;
+    else
+        L.Icon.Default.imagePath = `https://cdn.jsdelivr.net/npm/leaflet@${version}/dist/images/`;
+    // doppelte Injektion vermeiden (prüfe ShadowRoot **und** globales head)
+    const scope = root ?? document;
+    const already = scope.querySelector?.(`link[rel="stylesheet"][href="${href}"]`) ||
+        document.head.querySelector(`link[rel="stylesheet"][href="${href}"]`);
+    if (already)
+        return null;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    // Optional: link.integrity = '<SRI-Hash>'; link.crossOrigin = '';
+    (root ?? document.head).appendChild(link);
+    return link;
+}
+function removeInjectedCss(shadowRoot, injectedStyle) {
+    if (!shadowRoot || !injectedStyle)
+        return;
+    // Das <style>-Element aus dem Shadow‑DOM entfernen
+    injectedStyle.remove(); // moderne API
+}
+function ensureLeafletCss(mode, root) {
+    if (!isBrowser())
+        return; // Tests/SSR: no-op
+    switch (mode) {
+        case 'cdn':
+            return addLeafletCssFromCdn(root);
+        case 'inline-min':
+            return injectInlineMin(root);
+    }
+    return null;
+}
+// Die Google Maps JS API wird seit der Umstellung auf Map Tiles nicht mehr geladen.
+/** Fügt ein kleines Google-Logo als Leaflet-Control hinzu (Branding-Sicherheit) */
+function ensureGoogleLogo(map, markAdded) {
+    if (map._googleLogoAdded)
+        return;
+    const Logo = L.Control.extend({
+        onAdd() {
+            const img = L.DomUtil.create('img');
+            img.src =
+                'https://developers.google.com/static/maps/documentation/images/google_on_white.png';
+            img.alt = 'Google';
+            img.style.pointerEvents = 'none';
+            img.style.height = '18px';
+            img.style.margin = '0 0 6px 6px';
+            return img;
+        },
+        onRemove() { },
+    });
+    new Logo({ position: 'bottomleft' }).addTo(map);
+    map._googleLogoAdded = true;
+    markAdded();
+}
+
+const CREATE_SESSION_URL = 'https://tile.googleapis.com/v1/createSession';
+const TILE_URL_BASE = 'https://tile.googleapis.com/v1/2dtiles';
+const ATTRIBUTION_URL = 'https://tile.googleapis.com/tile/v1/viewport';
+const DEFAULT_MAX_ZOOM = 22;
+const SESSION_REFRESH_BUFFER_MS = 60 * 1000;
+const FALLBACK_TILE_SIZE = 256;
+class GoogleMapTilesLayer extends L.GridLayer {
+    apiKey;
+    highDpi;
+    sessionRequest;
+    scaleFactor;
+    sessionToken;
+    sessionPromise;
+    sessionRefreshId;
+    previousViewport;
+    currentAttribution;
+    mapInstance;
+    onMoveEnd;
+    constructor(options) {
+        super();
+        this.applyInitialGridOptions(options);
+        const { apiKey, mapType, language, region, imageFormat, scale, highDpi, layerTypes, overlay, styles, apiOptions, } = options;
+        if (!apiKey) {
+            throw new Error('Google Map Tiles layer requires an apiKey');
+        }
+        this.apiKey = apiKey;
+        this.highDpi =
+            highDpi ?? (scale === undefined ? true : scale !== 'scaleFactor1x');
+        this.scaleFactor = this.mapScaleToFactor(scale, this.highDpi);
+        const request = {
+            mapType: mapType ?? 'roadmap',
+            language: language ?? 'en-US',
+            region: region ?? 'US',
+        };
+        if (imageFormat) {
+            request.imageFormat = imageFormat;
+        }
+        if (layerTypes?.length) {
+            request.layerTypes = layerTypes;
+        }
+        if (apiOptions?.length) {
+            request.apiOptions = apiOptions;
+        }
+        if (Array.isArray(styles) && styles.length > 0) {
+            request.styles = styles;
+        }
+        if (overlay === true) {
+            request.overlay = true;
+        }
+        const resolvedScale = scale ?? (this.scaleFactor > 1 ? this.factorToScale(this.scaleFactor) : undefined);
+        if (resolvedScale) {
+            request.scale = resolvedScale;
+        }
+        if (this.highDpi) {
+            request.highDpi = true;
+        }
+        this.sessionRequest = request;
+        this.onMoveEnd = () => {
+            void this.updateAttribution();
+        };
+        this.sessionPromise = this.startSessionFetch();
+    }
+    onAdd(map) {
+        this.mapInstance = map;
+        map.on('moveend', this.onMoveEnd);
+        map.on('zoomend', this.onMoveEnd);
+        void this.ensureSession().then(() => this.updateAttribution());
+        return super.onAdd(map);
+    }
+    onRemove(map) {
+        map.off('moveend', this.onMoveEnd);
+        map.off('zoomend', this.onMoveEnd);
+        this.clearSessionRefresh();
+        this.removeCurrentAttribution();
+        this.mapInstance = undefined;
+        return super.onRemove(map);
+    }
+    createTile(coords, done) {
+        const tile = document.createElement('img');
+        tile.decoding = 'async';
+        tile.alt = '';
+        tile.crossOrigin = 'anonymous';
+        const size = this.resolveTileSize();
+        tile.width = size.x;
+        tile.height = size.y;
+        const handleError = (err) => {
+            const message = err instanceof Error ? err.message : 'Google tile load error';
+            done(new Error(message), tile);
+        };
+        tile.onload = () => done(null, tile);
+        tile.onerror = (event) => {
+            const err = event instanceof ErrorEvent
+                ? event.error ?? new Error(event.message)
+                : new Error('Google tile failed to load');
+            handleError(err);
+        };
+        void this.ensureSession()
+            .then(() => {
+            if (!this.sessionToken) {
+                handleError(new Error('Google Maps session unavailable'));
+                return;
+            }
+            tile.src = this.buildTileUrl(coords);
+        })
+            .catch((err) => {
+            handleError(err);
+        });
+        return tile;
+    }
+    ensureSession() {
+        if (this.sessionToken) {
+            return Promise.resolve();
+        }
+        if (!this.sessionPromise) {
+            this.sessionPromise = this.startSessionFetch();
+        }
+        return this.sessionPromise;
+    }
+    startSessionFetch(force = false) {
+        if (this.sessionPromise && !force) {
+            return this.sessionPromise;
+        }
+        const promise = this.fetchAndApplySession()
+            .catch((err) => {
+            const wrapped = err instanceof Error
+                ? err
+                : new Error('Failed to create Google Maps session');
+            error('Google Map Tiles session error', wrapped);
+            this.sessionToken = undefined;
+            throw wrapped;
+        })
+            .finally(() => {
+            if (this.sessionPromise === promise) {
+                this.sessionPromise = undefined;
+            }
+        });
+        this.sessionPromise = promise;
+        return promise;
+    }
+    async fetchAndApplySession() {
+        const url = `${CREATE_SESSION_URL}?key=${this.apiKey}`;
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(this.sessionRequest),
+        });
+        if (!response.ok) {
+            let details;
+            try {
+                const body = await response.json();
+                details = body?.error?.message;
+            }
+            catch {
+                // ignore JSON parse errors
+            }
+            throw new Error(details ?? `Google Maps session request failed (${response.status})`);
+        }
+        const data = (await response.json());
+        this.sessionToken = data.session;
+        this.applyTileSize(data);
+        this.scheduleSessionRefresh(this.parseExpiry(data.expiry));
+        if (this.mapInstance) {
+            void this.updateAttribution();
+            this.redrawLayer();
+        }
+        log('Google Map Tiles session established');
+    }
+    scheduleSessionRefresh(expiryMs) {
+        if (!isFinite(expiryMs))
+            return;
+        const refreshInMs = Math.max(expiryMs - Date.now() - SESSION_REFRESH_BUFFER_MS, 1000);
+        this.clearSessionRefresh();
+        this.sessionRefreshId = setTimeout(() => {
+            void this.startSessionFetch(true).then(() => {
+                if (this.mapInstance) {
+                    void this.updateAttribution();
+                    this.redrawLayer();
+                }
+            });
+        }, refreshInMs);
+    }
+    clearSessionRefresh() {
+        if (this.sessionRefreshId !== undefined) {
+            clearTimeout(this.sessionRefreshId);
+            this.sessionRefreshId = undefined;
+        }
+    }
+    async updateAttribution() {
+        if (!this.mapInstance || !this.sessionToken)
+            return;
+        const bounds = this.mapInstance.getBounds();
+        if (!bounds?.isValid())
+            return;
+        const zoom = this.mapInstance.getZoom();
+        const viewport = `zoom=${zoom}&north=${bounds.getNorth()}&south=${bounds.getSouth()}&east=${bounds.getEast()}&west=${bounds.getWest()}`;
+        if (this.previousViewport === viewport) {
+            return;
+        }
+        this.previousViewport = viewport;
+        try {
+            const response = await fetch(`${ATTRIBUTION_URL}?session=${this.sessionToken}&key=${this.apiKey}&${viewport}`);
+            if (!response.ok) {
+                throw new Error(`Attribution request failed (${response.status})`);
+            }
+            const json = await response.json();
+            const copyright = json?.copyright;
+            if (typeof copyright === 'string' && copyright.length > 0) {
+                this.applyAttribution(copyright);
+            }
+        }
+        catch (err) {
+            error('Failed to fetch Google attribution', err);
+        }
+    }
+    applyAttribution(value) {
+        const map = this.mapInstance;
+        if (!map?.attributionControl)
+            return;
+        if (this.currentAttribution && this.currentAttribution !== value) {
+            map.attributionControl.removeAttribution(this.currentAttribution);
+        }
+        if (!this.currentAttribution || this.currentAttribution !== value) {
+            map.attributionControl.addAttribution(value);
+            this.currentAttribution = value;
+        }
+    }
+    removeCurrentAttribution() {
+        const map = this.mapInstance;
+        if (!map?.attributionControl || !this.currentAttribution)
+            return;
+        map.attributionControl.removeAttribution(this.currentAttribution);
+        this.currentAttribution = undefined;
+    }
+    applyTileSize(data) {
+        const width = Math.max(1, Math.round(data.tileWidth / this.scaleFactor));
+        const height = Math.max(1, Math.round(data.tileHeight / this.scaleFactor));
+        const tileSize = L.point(width, height);
+        this.setGridOptions({ tileSize });
+    }
+    parseExpiry(expiry) {
+        const asInt = parseInt(expiry, 10);
+        return Number.isFinite(asInt) ? asInt * 1000 : Number.NaN;
+    }
+    buildTileUrl(coords) {
+        if (!this.sessionToken) {
+            throw new Error('Google Maps session missing');
+        }
+        const z = coords.z;
+        const x = coords.x;
+        const y = coords.y;
+        return `${TILE_URL_BASE}/${z}/${x}/${y}?session=${this.sessionToken}&key=${this.apiKey}`;
+    }
+    mapScaleToFactor(scale, highDpi) {
+        switch (scale) {
+            case 'scaleFactor4x':
+                return 4;
+            case 'scaleFactor2x':
+                return 2;
+            case 'scaleFactor1x':
+                return 1;
+            default:
+                return highDpi ? 2 : 1;
+        }
+    }
+    factorToScale(factor) {
+        switch (factor) {
+            case 4:
+                return 'scaleFactor4x';
+            case 2:
+                return 'scaleFactor2x';
+            case 1:
+                return 'scaleFactor1x';
+            default:
+                return undefined;
+        }
+    }
+    applyInitialGridOptions(options) {
+        const payload = {};
+        const keys = [
+            'attribution',
+            'bounds',
+            'className',
+            'detectRetina',
+            'errorTileUrl',
+            'keepBuffer',
+            'maxNativeZoom',
+            'maxZoom',
+            'minNativeZoom',
+            'minZoom',
+            'noWrap',
+            'opacity',
+            'pane',
+            'reuseTiles',
+            'subdomains',
+            'tileSize',
+            'tms',
+            'updateInterval',
+            'updateWhenIdle',
+            'updateWhenZooming',
+            'zIndex',
+            'zoomOffset',
+        ];
+        for (const key of keys) {
+            const value = options[key];
+            if (value !== undefined) {
+                payload[key] = value;
+            }
+        }
+        if (payload.maxZoom === undefined) {
+            payload.maxZoom = DEFAULT_MAX_ZOOM;
+        }
+        this.setGridOptions(payload);
+    }
+    setGridOptions(options) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- L.Util.setOptions is typed as (obj: any, options: any) => any in Leaflet
+        const setOptionsFn = L.Util?.setOptions;
+        if (typeof setOptionsFn === 'function') {
+            setOptionsFn(this, options);
+        }
+        else {
+            const self = this;
+            self.options = {
+                ...self.options,
+                ...options,
+            };
+        }
+    }
+    resolveTileSize() {
+        const raw = this.options?.tileSize;
+        if (raw && typeof raw === 'object') {
+            if (Array.isArray(raw) && raw.length === 2) {
+                const [x, y] = raw;
+                return L.point(Number(x) || FALLBACK_TILE_SIZE, Number(y) || FALLBACK_TILE_SIZE);
+            }
+            if ('x' in raw && 'y' in raw) {
+                const point = raw;
+                return L.point(Number(point.x) || FALLBACK_TILE_SIZE, Number(point.y) || FALLBACK_TILE_SIZE);
+            }
+        }
+        if (typeof raw === 'number' && Number.isFinite(raw)) {
+            return L.point(raw, raw);
+        }
+        return L.point(FALLBACK_TILE_SIZE, FALLBACK_TILE_SIZE);
+    }
+    redrawLayer() {
+        this.redraw();
+    }
+}
+
+class GeoTIFFGridLayer extends L.GridLayer {
+    geotiffOptions;
+    tileProcessor = null;
+    colorStops;
+    loadingPromise;
+    defaultResolution = 1;
+    defaultResample = 'bilinear';
+    constructor(options) {
+        super(options);
+        this.geotiffOptions = { ...options };
+    }
+    onAdd(map) {
+        super.onAdd(map);
+        void this.ensureReady().then(() => this.redraw());
+        return this;
+    }
+    createTile(coords, done) {
+        const size = this.getTileSize();
+        const canvas = L.DomUtil.create('canvas', 'leaflet-tile');
+        canvas.width = size.x;
+        canvas.height = size.y;
+        this.ensureReady()
+            .then(async () => {
+            if (!this.tileProcessor) {
+                done(null, canvas);
+                return;
+            }
+            try {
+                const rgba = await this.tileProcessor.getTileData({
+                    x: coords.x,
+                    y: coords.y,
+                    z: coords.z,
+                    tileSize: size.x,
+                    resolution: this.geotiffOptions.resolution ?? this.defaultResolution,
+                    resampleMethod: this.geotiffOptions.resampleMethod ?? this.defaultResample,
+                    colorStops: this.colorStops,
+                });
+                if (!rgba) {
+                    done(null, canvas);
+                    return;
+                }
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    const imageData = ctx.createImageData(size.x, size.y);
+                    imageData.data.set(rgba);
+                    ctx.putImageData(imageData, 0, 0);
+                }
+                done(null, canvas);
+            }
+            catch (err) {
+                done(err, canvas);
+            }
+        })
+            .catch(err => {
+            done(err, canvas);
+        });
+        return canvas;
+    }
+    async ensureReady() {
+        if (!this.loadingPromise) {
+            this.loadingPromise = this.initializeProcessor();
+        }
+        return this.loadingPromise;
+    }
+    async updateSource(options) {
+        Object.assign(this.geotiffOptions, options);
+        this.tileProcessor = null;
+        this.colorStops = undefined;
+        this.loadingPromise = undefined;
+        await this.ensureReady();
+        this.redraw();
+    }
+    async initializeProcessor() {
+        if (this.tileProcessor)
+            return;
+        const [geotiffModule, { default: proj4 }, geokeysModule] = await Promise.all([
+            import('./geotiff-BEWxTIfH.js').then(function (n) { return n.g; }),
+            import('./index-RpJarvr_.js'),
+            import('./main-dist-CwnA7_Xn.js').then(function (n) { return n.m; }),
+        ]);
+        const source = await loadGeoTIFFSource(this.geotiffOptions.url, {
+            projection: undefined,
+            forceProjection: false,
+            nodata: this.geotiffOptions.nodata,
+        }, {
+            geotiff: geotiffModule,
+            proj4,
+            geokeysToProj4: geokeysModule,
+        });
+        const transformViewToSourceMapFn = (coord) => {
+            const result = source.proj4(this.geotiffOptions.viewProjection, //source.toProjection,
+            source.fromProjection, coord);
+            return [Number(result[0]), Number(result[1])];
+        };
+        const transformSourceMapToViewFn = (coord) => {
+            const result = source.proj4(source.fromProjection, this.geotiffOptions.viewProjection, //source.toProjection,
+            coord);
+            return [Number(result[0]), Number(result[1])];
+        };
+        this.tileProcessor = new GeoTIFFTileProcessor({
+            transformViewToSourceMapFn,
+            transformSourceMapToViewFn,
+            sourceBounds: source.sourceBounds,
+            sourceRef: source.sourceRef,
+            resolution: source.resolution,
+            imageWidth: source.width,
+            imageHeight: source.height,
+            fromProjection: source.fromProjection,
+            toProjection: this.geotiffOptions.viewProjection, //source.toProjection,
+            baseImage: source.baseImage,
+            overviewImages: source.overviewImages ?? [],
+        });
+        this.tileProcessor.createGlobalTriangulation();
+        // Set bounds to restrict tile loading to GeoTIFF coverage area
+        this.setViewBounds(source.sourceBounds, transformSourceMapToViewFn);
+        if (this.geotiffOptions.colorMap) {
+            const { stops } = getColorStops(this.geotiffOptions.colorMap, this.geotiffOptions.valueRange);
+            this.colorStops = stops;
+        }
+    }
+    /**
+     * Set Leaflet bounds from GeoTIFF source bounds
+     * Restricts tile loading to the GeoTIFF coverage area
+     */
+    setViewBounds(sourceBounds, transformSourceToView) {
+        const [srcWest, srcSouth, srcEast, srcNorth] = sourceBounds;
+        // Transform corners from Source to View (Web Mercator for Leaflet)
+        const sw = transformSourceToView([srcWest, srcSouth]);
+        const se = transformSourceToView([srcEast, srcSouth]);
+        const nw = transformSourceToView([srcWest, srcNorth]);
+        const ne = transformSourceToView([srcEast, srcNorth]);
+        // Calculate bounds in View coordinates
+        const minX = Math.min(sw[0], se[0], nw[0], ne[0]);
+        const maxX = Math.max(sw[0], se[0], nw[0], ne[0]);
+        const minY = Math.min(sw[1], se[1], nw[1], ne[1]);
+        const maxY = Math.max(sw[1], se[1], nw[1], ne[1]);
+        // Convert to Leaflet LatLngBounds (Web Mercator meters to lat/lng)
+        const southWest = L.CRS.EPSG3857.unproject(L.point(minX, maxY));
+        const northEast = L.CRS.EPSG3857.unproject(L.point(maxX, minY));
+        // Set bounds option - Leaflet will use this to restrict tile loading
+        this.options.bounds = L.latLngBounds(southWest, northEast);
+    }
+}
+
+const LOG_PREFIX = 'v-map - leaflet - wcs - tile - ';
+/**
+ * Custom Leaflet GridLayer for WCS (Web Coverage Service) support
+ *
+ * Supports:
+ * - WCS 2.0.1 with subset parameters
+ * - WCS 1.x.x with BBOX parameters (backward compatibility)
+ * - GeoTIFF FLOAT32 format
+ * - Dynamic BBOX-based requests
+ */
+class WCSGridLayer extends L.GridLayer {
+    wcsOptions;
+    constructor(options) {
+        super(options);
+        this.wcsOptions = {
+            ...options,
+            version: options.version ?? '2.0.1',
+            format: options.format ?? 'image/tiff',
+            projection: options.projection ?? 'EPSG:4326',
+        };
+    }
+    /**
+     * Build WCS GetCoverage URL for a given tile
+     */
+    buildWCSUrl(coords) {
+        const { url, coverageName, version, format, projection, params } = this.wcsOptions;
+        // Calculate tile bounds in lat/lng
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- Leaflet private method not exposed in type definitions
+        const tileBounds = this._tileCoordsToBounds(coords);
+        const southwest = tileBounds.getSouthWest();
+        const northeast = tileBounds.getNorthEast();
+        const minx = southwest.lng;
+        const miny = southwest.lat;
+        const maxx = northeast.lng;
+        const maxy = northeast.lat;
+        const baseParams = {
+            SERVICE: 'WCS',
+            REQUEST: 'GetCoverage',
+            VERSION: version,
+            FORMAT: format,
+        };
+        // WCS 2.0.1 uses subset parameters
+        if (version.startsWith('2.0')) {
+            baseParams.coverageId = coverageName;
+            // Build URL with subset parameters
+            // Note: We can't use the same param name twice in URLSearchParams,
+            // so we'll manually construct the query string
+            const extraParams = params ? { ...params } : {};
+            const allParams = { ...baseParams, ...extraParams };
+            // Add GeoTIFF compression if format is tiff
+            if (format.includes('tiff') || format.includes('geotiff')) {
+                allParams['geotiff:compression'] = 'LZW';
+            }
+            const query = new URLSearchParams();
+            Object.entries(allParams).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    query.set(key, String(value));
+                }
+            });
+            // Manually add subset parameters (can't use URLSearchParams for duplicate keys)
+            const queryString = query.toString();
+            const subsetX = `subset=X(${minx},${maxx})`;
+            const subsetY = `subset=Y(${miny},${maxy})`;
+            return `${url}${url.includes('?') ? '&' : '?'}${queryString}&${subsetX}&${subsetY}`;
+        }
+        // WCS 1.x.x uses BBOX parameter
+        else {
+            baseParams.COVERAGE = coverageName;
+            baseParams.BBOX = `${minx},${miny},${maxx},${maxy}`;
+            baseParams.CRS = projection;
+            // Calculate width and height for the tile
+            const tileSize = this.getTileSize();
+            baseParams.WIDTH = typeof tileSize === 'number' ? tileSize : tileSize.x;
+            baseParams.HEIGHT = typeof tileSize === 'number' ? tileSize : tileSize.y;
+            const extraParams = params ? { ...params } : {};
+            const allParams = { ...baseParams, ...extraParams };
+            const query = new URLSearchParams();
+            Object.entries(allParams).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    query.set(key, String(value));
+                }
+            });
+            return `${url}${url.includes('?') ? '&' : '?'}${query.toString()}`;
+        }
+    }
+    /**
+     * Create tile element (required by GridLayer)
+     */
+    createTile(coords, done) {
+        const tile = document.createElement('img');
+        const wcsUrl = this.buildWCSUrl(coords);
+        log(`${LOG_PREFIX}load: coords=(${coords.x},${coords.y},${coords.z})`);
+        log(`${LOG_PREFIX}url: ${wcsUrl}`);
+        tile.onload = () => {
+            done(null, tile);
+        };
+        tile.onerror = (err) => {
+            error(`${LOG_PREFIX}failed to load tile:`, err);
+            done(err instanceof Error ? err : new Error(String(err)), tile);
+        };
+        // Set crossOrigin for CORS support
+        tile.crossOrigin = 'anonymous';
+        tile.src = wcsUrl;
+        return tile;
+    }
+    /**
+     * Update WCS options and redraw
+     */
+    updateOptions(newOptions) {
+        this.wcsOptions = {
+            ...this.wcsOptions,
+            ...newOptions,
+        };
+        this.redraw();
+    }
+}
+
+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 = wellknownExports.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;
+    }
+}
+
+export { LeafletProvider };