@angular-helpers/openlayers 0.4.0 → 0.5.1

package/fesm2022/angular-helpers-openlayers-layers.mjs

@@ -1,35 +1,357 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Injectable, DestroyRef, input, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, signal, computed, Injectable, input, output, ChangeDetectionStrategy, Component, DestroyRef, contentChild, afterNextRender, effect } from '@angular/core';
 import VectorLayer from 'ol/layer/Vector';
+import HeatmapLayer from 'ol/layer/Heatmap';
 import TileLayer from 'ol/layer/Tile';
 import ImageLayer from 'ol/layer/Image';
 import VectorSource from 'ol/source/Vector';
-import OLFeature from 'ol/Feature';
-import { Point, LineString, Polygon, Circle } from 'ol/geom';
-import { fromLonLat } from 'ol/proj';
-import { getCenter } from 'ol/extent';
-import { Style, Circle as Circle$1, Stroke, Fill, Icon } from 'ol/style';
-import Text from 'ol/style/Text';
 import ClusterSource from 'ol/source/Cluster';
+import GeoJSON from 'ol/format/GeoJSON';
+import TopoJSON from 'ol/format/TopoJSON';
+import KML from 'ol/format/KML';
+import { getCenter } from 'ol/extent';
+import { Point, LineString, Polygon, Circle as Circle$1 } from 'ol/geom';
+import { featureToOlFeature, olFeatureToFeature, OlMapService } from '@angular-helpers/openlayers/core';
 import OSM from 'ol/source/OSM';
 import XYZ from 'ol/source/XYZ';
 import TileWMS from 'ol/source/TileWMS';
 import ImageWMS from 'ol/source/ImageWMS';
 import ImageStatic from 'ol/source/ImageStatic';
-import { OlMapService } from '@angular-helpers/openlayers/core';
+import { Style, Text, Fill, Circle, Stroke, Icon } from 'ol/style';
+import OLFeature from 'ol/Feature';
+import { fromLonLat } from 'ol/proj';
+import WebGLVectorLayer from 'ol/layer/WebGLVector';
+import WebGLTileLayer from 'ol/layer/WebGLTile';
+import WebGLVectorTileLayer from 'ol/layer/WebGLVectorTile';
+import VectorTileSource from 'ol/source/VectorTile';
+import MVT from 'ol/format/MVT';
+
+function buildTileSource(config) {
+    switch (config.type) {
+        case 'osm':
+            return new OSM({ attributions: config.attributions });
+        case 'xyz':
+            return new XYZ({ url: config.url, attributions: config.attributions });
+        case 'wms':
+            return new TileWMS({
+                url: config.url,
+                params: config.params ?? {},
+                attributions: config.attributions,
+            });
+        default:
+            return new OSM();
+    }
+}
+function buildImageSource(config) {
+    if (config.type === 'static') {
+        return new ImageStatic({
+            url: config.url,
+            imageExtent: config.imageExtent ?? [0, 0, 1, 1],
+        });
+    }
+    return new ImageWMS({ url: config.url, params: config.params });
+}
+
+function createClusterStyleFn(clusterCfg, styleFn, defaultStyle) {
+    return (olFeature, resolution) => {
+        const features = olFeature.get('features');
+        const size = features ? features.length : 0;
+        // Render cluster badge
+        if (size > 1) {
+            const showCount = clusterCfg?.showCount ?? true;
+            return new Style({
+                image: new Circle({
+                    radius: 15 + Math.min(size * 2, 15),
+                    fill: new Fill({ color: 'rgba(255, 100, 100, 0.8)' }),
+                    stroke: new Stroke({ color: '#fff', width: 2 }),
+                }),
+                text: showCount
+                    ? new Text({
+                        text: String(size),
+                        fill: new Fill({ color: '#fff' }),
+                    })
+                    : undefined,
+            });
+        }
+        // Single feature in cluster: unwrap and call styleFn
+        const originalFeature = features?.[0];
+        if (originalFeature) {
+            // 1. Feature level override
+            if (clusterCfg?.featureStyle) {
+                // OpenLayers styles are mutable. Clone before modifying geometry to prevent global breakage.
+                const style = clusterCfg.featureStyle; // Cast since it might be abstract
+                if (style instanceof Style) {
+                    const origGeom = originalFeature.getGeometry();
+                    if (origGeom) {
+                        const clonedStyle = style.clone();
+                        clonedStyle.setGeometry(origGeom);
+                        return clonedStyle;
+                    }
+                }
+                return style;
+            }
+            // 2. Original Layer style
+            if (styleFn) {
+                const style = styleFn(originalFeature, resolution);
+                if (style instanceof Style) {
+                    const origGeom = originalFeature.getGeometry();
+                    if (origGeom) {
+                        const clonedStyle = style.clone();
+                        clonedStyle.setGeometry(origGeom);
+                        return clonedStyle;
+                    }
+                }
+                return style;
+            }
+        }
+        // 3. Fallback to styleFn or default
+        return styleFn ? styleFn(olFeature, resolution) : defaultStyle;
+    };
+}
+
+const STYLE_PROP$1 = '__angular_helpers_style__';
+const defaultStyle = new Style({
+    image: new Circle({
+        radius: 6,
+        fill: new Fill({ color: '#3399CC' }),
+        stroke: new Stroke({ color: '#fff', width: 2 }),
+    }),
+});
+function buildVectorLayer(config, source) {
+    const clusterCfg = config.cluster;
+    const userStyle = config.style;
+    const styleFn = (olFeature, resolution) => {
+        const abstractStyle = olFeature.get(STYLE_PROP$1);
+        if (abstractStyle) {
+            const style = new Style();
+            const { icon, fill, stroke } = abstractStyle;
+            if (icon?.src) {
+                style.setImage(new Icon({
+                    src: icon.src,
+                    ...(icon.size ? { size: icon.size } : {}),
+                    ...(icon.anchor ? { anchor: icon.anchor } : {}),
+                }));
+            }
+            if (fill)
+                style.setFill(new Fill({ color: fill.color }));
+            if (stroke)
+                style.setStroke(new Stroke({ color: stroke.color, width: stroke.width }));
+            if (icon?.src || fill || stroke)
+                return style;
+        }
+        if (userStyle) {
+            if (typeof userStyle === 'function') {
+                const feature = {
+                    id: String(olFeature.getId() ?? ''),
+                    geometry: {
+                        type: olFeature.getGeometry()?.getType(),
+                        coordinates: [],
+                    },
+                    properties: olFeature.getProperties(),
+                };
+                return userStyle(feature, resolution);
+            }
+            return userStyle;
+        }
+        return defaultStyle;
+    };
+    const clusterStyleFn = createClusterStyleFn(clusterCfg, styleFn, defaultStyle);
+    const layer = new VectorLayer({
+        source,
+        visible: config.visible ?? true,
+        opacity: config.opacity ?? 1,
+        zIndex: config.zIndex,
+        style: clusterCfg?.enabled ? clusterStyleFn : styleFn,
+    });
+    layer.set('id', config.id);
+    layer.set('cluster-config', clusterCfg);
+    layer.set('style-fn', styleFn);
+    return layer;
+}
+function buildHeatmapLayer(config) {
+    const vectorSource = new VectorSource();
+    if (config.features && config.features.length > 0) {
+        const olFeatures = config.features.map(featureToOlFeature);
+        vectorSource.addFeatures(olFeatures);
+    }
+    const layer = new HeatmapLayer({
+        source: vectorSource,
+        visible: config.visible ?? true,
+        opacity: config.opacity ?? 1,
+        zIndex: config.zIndex,
+        ...(config.blur !== undefined && { blur: config.blur }),
+        ...(config.radius !== undefined && { radius: config.radius }),
+        ...(config.weight !== undefined && {
+            weight: config.weight,
+        }),
+    });
+    layer.set('id', config.id);
+    return layer;
+}
+function buildTileLayer(config, source) {
+    const layer = new TileLayer({
+        source,
+        visible: config.visible ?? true,
+        opacity: config.opacity ?? 1,
+        zIndex: config.zIndex,
+    });
+    layer.set('id', config.id);
+    return layer;
+}
+function buildImageLayer(config, source) {
+    const layer = new ImageLayer({
+        source,
+        visible: config.visible ?? true,
+        opacity: config.opacity ?? 1,
+        zIndex: config.zIndex,
+    });
+    layer.set('id', config.id);
+    return layer;
+}
+
+class SpiderficationManager {
+    spiderSource = new VectorSource();
+    spiderLayer = new VectorLayer({
+        source: this.spiderSource,
+        zIndex: 9999,
+        properties: { 'is-spider-layer': true },
+    });
+    mapClickListenerRegistered = false;
+    map = null;
+    layerCache;
+    constructor(layerCache) {
+        this.layerCache = layerCache;
+    }
+    register(map) {
+        if (this.mapClickListenerRegistered)
+            return;
+        this.mapClickListenerRegistered = true;
+        this.map = map;
+        map.addLayer(this.spiderLayer);
+        // Unspiderfy on map movement or zoom
+        map.on('movestart', () => this.unspiderfy());
+        map.on('singleclick', (e) => {
+            let handled = false;
+            let keepSpiderOpen = false;
+            map.forEachFeatureAtPixel(e.pixel, (f, l) => {
+                if (handled)
+                    return;
+                // Check if we clicked a spider item
+                if (l === this.spiderLayer) {
+                    const originalOlFeature = f.get('spider-feature');
+                    if (originalOlFeature) {
+                        const layerId = f.get('cluster-layer-id');
+                        const layerObj = this.layerCache.get(layerId);
+                        if (layerObj) {
+                            const clusterCfg = layerObj.get('cluster-config');
+                            if (clusterCfg?.onSpiderfyClick) {
+                                // Use olFeatureToFeature so coordinates are properly extracted!
+                                const feat = olFeatureToFeature(originalOlFeature);
+                                clusterCfg.onSpiderfyClick(feat);
+                            }
+                        }
+                    }
+                    handled = true;
+                    keepSpiderOpen = true; // Keep spider open when clicking a leg
+                    return;
+                }
+                // Check if we clicked a cluster
+                if (!l)
+                    return;
+                const features = f.get('features');
+                if (features && features.length > 1) {
+                    const clusterCfg = l.get('cluster-config');
+                    if (clusterCfg?.spiderfyOnSelect) {
+                        keepSpiderOpen = true;
+                        handled = true;
+                        // Execute layer manipulations outside the synchronous event loop
+                        setTimeout(() => {
+                            this.spiderfy(map, f, features, l, clusterCfg);
+                        });
+                    }
+                }
+            });
+            // Cleanup existing spider layer if we clicked anything else
+            if (!keepSpiderOpen) {
+                this.unspiderfy();
+            }
+        });
+    }
+    unspiderfy() {
+        this.spiderSource.clear();
+    }
+    spiderfy(map, clusterFeature, features, parentLayer, cfg) {
+        this.unspiderfy();
+        const count = features.length;
+        const centerGeom = clusterFeature.getGeometry();
+        if (!centerGeom || centerGeom.getType() !== 'Point')
+            return;
+        const centerCoords = centerGeom.getCoordinates();
+        const resolution = map.getView().getResolution() ?? 1;
+        const baseRadius = 30; // 30 pixels
+        const radius = baseRadius + count * 2;
+        const angleStep = (2 * Math.PI) / count;
+        const spiderFeatures = [];
+        const styleFn = parentLayer.get('style-fn');
+        features.forEach((f, i) => {
+            let x, y;
+            if (count <= 8) {
+                // Circle layout for small number of features
+                const angle = i * angleStep;
+                x = centerCoords[0] + radius * Math.cos(angle) * resolution;
+                y = centerCoords[1] + radius * Math.sin(angle) * resolution;
+            }
+            else {
+                // Spiral layout (caracol) for many features
+                const initialRadius = 20;
+                const legLength = 15;
+                const spiralAngleStep = 0.5;
+                const angle = i * spiralAngleStep;
+                const r = initialRadius + legLength * (angle / Math.PI);
+                x = centerCoords[0] + r * Math.cos(angle) * resolution;
+                y = centerCoords[1] + r * Math.sin(angle) * resolution;
+            }
+            const legGeom = new Point([x, y]);
+            // Create leg line
+            const lineFeature = new OLFeature(new LineString([centerCoords, [x, y]]));
+            lineFeature.setStyle(new Style({ stroke: new Stroke({ color: 'rgba(0,0,0,0.5)', width: 2 }) }));
+            spiderFeatures.push(lineFeature);
+            // Create point feature
+            const pointFeature = new OLFeature(legGeom);
+            // Determine style for the spider leg point
+            let pointStyle = undefined;
+            if (cfg?.featureStyle) {
+                pointStyle = cfg.featureStyle;
+            }
+            else if (styleFn) {
+                pointStyle = styleFn(f, resolution);
+            }
+            // Ensure we always have a visible style even if the original feature has none
+            if (!pointStyle || (Array.isArray(pointStyle) && pointStyle.length === 0)) {
+                pointStyle = new Style({
+                    image: new Circle({
+                        radius: 6,
+                        fill: new Fill({ color: '#3399CC' }),
+                        stroke: new Stroke({ color: '#fff', width: 2 }),
+                    }),
+                });
+            }
+            pointFeature.setStyle(pointStyle);
+            pointFeature.set('spider-feature', f);
+            pointFeature.set('cluster-layer-id', parentLayer.get('id'));
+            spiderFeatures.push(pointFeature);
+        });
+        this.spiderSource.addFeatures(spiderFeatures);
+    }
+}
 
-// OlLayerService
-/**
- * Internal property key used to stash the abstract style metadata on the
- * underlying `ol/Feature` so the layer style function can resolve a
- * per-feature visual without colliding with user `properties`.
- */
 const STYLE_PROP = '__angular_helpers_style__';
 class OlLayerService {
     mapService = inject(OlMapService);
     layerCache = new Map();
     pendingConfigs = [];
     layerState = signal([], ...(ngDevMode ? [{ debugName: "layerState" }] : /* istanbul ignore next */ []));
+    spiderManager = new SpiderficationManager(this.layerCache);
     layers = computed(() => this.layerState(), ...(ngDevMode ? [{ debugName: "layers" }] : /* istanbul ignore next */ []));
     visibleLayers = computed(() => this.layerState().filter((l) => l.visible), ...(ngDevMode ? [{ debugName: "visibleLayers" }] : /* istanbul ignore next */ []));
     tileLayers = computed(() => this.layerState().filter((l) => l.type === 'tile'), ...(ngDevMode ? [{ debugName: "tileLayers" }] : /* istanbul ignore next */ []));
@@ -55,16 +377,74 @@ class OlLayerService {
         }
     }
     createLayer(config, map) {
+        let layer;
         switch (config.type) {
-            case 'vector':
-                return this.createVectorLayer(config, map);
-            case 'tile':
-                return this.createTileLayer(config, map);
-            case 'image':
-                return this.createImageLayer(config, map);
+            case 'vector': {
+                const vConfig = config;
+                const sourceOptions = {};
+                if (vConfig.url && vConfig.format) {
+                    sourceOptions.url = vConfig.url;
+                    if (vConfig.format === 'geojson')
+                        sourceOptions.format = new GeoJSON();
+                    else if (vConfig.format === 'topojson')
+                        sourceOptions.format = new TopoJSON();
+                    else if (vConfig.format === 'kml')
+                        sourceOptions.format = new KML();
+                }
+                const vectorSource = new VectorSource(sourceOptions);
+                if (vConfig.features && vConfig.features.length > 0) {
+                    const olFeatures = vConfig.features.map((f) => {
+                        const olf = featureToOlFeature(f);
+                        if (f.style)
+                            olf.set(STYLE_PROP, f.style);
+                        return olf;
+                    });
+                    vectorSource.addFeatures(olFeatures);
+                }
+                const clusterCfg = vConfig.cluster;
+                const source = clusterCfg?.enabled
+                    ? new ClusterSource({
+                        source: vectorSource,
+                        distance: clusterCfg.distance ?? 40,
+                        minDistance: clusterCfg.minDistance ?? 20,
+                        geometryFunction: (feature) => {
+                            const geometry = feature.getGeometry();
+                            if (!geometry)
+                                return null;
+                            if (geometry.getType() === 'Point')
+                                return geometry;
+                            return new Point(getCenter(geometry.getExtent()));
+                        },
+                    })
+                    : vectorSource;
+                layer = buildVectorLayer(vConfig, source);
+                if (clusterCfg?.spiderfyOnSelect) {
+                    this.spiderManager.register(map);
+                }
+                break;
+            }
+            case 'heatmap':
+                layer = buildHeatmapLayer(config);
+                break;
+            case 'tile': {
+                const tConfig = config;
+                const source = buildTileSource(tConfig.source);
+                layer = buildTileLayer(tConfig, source);
+                break;
+            }
+            case 'image': {
+                const iConfig = config;
+                const source = buildImageSource(iConfig.source);
+                layer = buildImageLayer(iConfig, source);
+                break;
+            }
             default:
                 return { id: config.id };
         }
+        map.addLayer(layer);
+        this.layerCache.set(config.id, layer);
+        this.updateLayerState();
+        return { id: config.id };
     }
     getLayer(id) {
         return this.layerCache.get(id);
@@ -73,7 +453,6 @@ class OlLayerService {
         return this.layerCache.has(id);
     }
     removeLayer(id) {
-        // Cancel if it's still pending (map not ready yet)
         const pendingIdx = this.pendingConfigs.findIndex((c) => c.id === id);
         if (pendingIdx !== -1) {
             this.pendingConfigs.splice(pendingIdx, 1);
@@ -83,6 +462,7 @@ class OlLayerService {
         const layer = this.layerCache.get(id);
         if (map && layer) {
             map.removeLayer(layer);
+            layer.dispose();
             this.layerCache.delete(id);
             this.updateLayerState();
         }
@@ -93,6 +473,11 @@ class OlLayerService {
             layer.setVisible(visible);
             this.updateLayerState();
         }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending)
+                pending.visible = visible;
+        }
     }
     toggleVisibility(id) {
         const layer = this.layerCache.get(id);
@@ -110,6 +495,11 @@ class OlLayerService {
             layer.setOpacity(opacity);
             this.updateLayerState();
         }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending)
+                pending.opacity = opacity;
+        }
     }
     setZIndex(id, zIndex) {
         const layer = this.layerCache.get(id);
@@ -117,6 +507,52 @@ class OlLayerService {
             layer.setZIndex(zIndex);
             this.updateLayerState();
         }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending)
+                pending.zIndex = zIndex;
+        }
+    }
+    setClusterDistance(id, distance) {
+        const layer = this.layerCache.get(id);
+        if (layer instanceof VectorLayer) {
+            const source = layer.getSource();
+            if (source && 'setDistance' in source) {
+                source.setDistance(distance);
+            }
+        }
+    }
+    setClusterMinDistance(id, minDistance) {
+        const layer = this.layerCache.get(id);
+        if (layer instanceof VectorLayer) {
+            const source = layer.getSource();
+            if (source && 'setMinDistance' in source) {
+                source.setMinDistance(minDistance);
+            }
+        }
+    }
+    setHeatmapProperties(id, props) {
+        const layer = this.layerCache.get(id);
+        if (layer instanceof HeatmapLayer) {
+            if (props.blur !== undefined)
+                layer.setBlur(props.blur);
+            if (props.radius !== undefined)
+                layer.setRadius(props.radius);
+            if (props.weight !== undefined)
+                layer.setWeight(props.weight);
+        }
+        else {
+            const pending = this.pendingConfigs.find((c) => c.id === id);
+            if (pending && pending.type === 'heatmap') {
+                const heatmapConfig = pending;
+                if (props.blur !== undefined)
+                    heatmapConfig.blur = props.blur;
+                if (props.radius !== undefined)
+                    heatmapConfig.radius = props.radius;
+                if (props.weight !== undefined)
+                    heatmapConfig.weight = props.weight;
+            }
+        }
     }
     isVisible(id) {
         return this.layerCache.get(id)?.getVisible() ?? false;
@@ -127,11 +563,6 @@ class OlLayerService {
     getZIndex(id) {
         return this.layerCache.get(id)?.getZIndex() ?? 0;
     }
-    /**
-     * Clears all features from a vector layer's source.
-     * Does not remove the layer itself.
-     * @param id - Layer identifier
-     */
     clearFeatures(id) {
         const layer = this.layerCache.get(id);
         if (!(layer instanceof VectorLayer))
@@ -139,19 +570,12 @@ class OlLayerService {
         const source = layer.getSource();
         if (!source)
             return;
-        // Handle Cluster source: clear the underlying VectorSource
         const clusterSource = source;
         const vectorSource = clusterSource.getSource
             ? clusterSource.getSource()
             : source;
         vectorSource?.clear();
     }
-    /**
-     * Updates the features of a vector layer.
-     * Syncs new features without clearing existing ones (preserves OL modifications).
-     * @param id - Layer identifier
-     * @param features - New features to sync
-     */
     updateFeatures(id, features) {
         const layer = this.layerCache.get(id);
         if (!(layer instanceof VectorLayer))
@@ -159,58 +583,32 @@ class OlLayerService {
         const source = layer.getSource();
         if (!source)
             return;
-        // Handle Cluster source: get the underlying VectorSource
         const clusterSource = source;
         const vectorSource = clusterSource.getSource
             ? clusterSource.getSource()
             : source;
         if (!(vectorSource instanceof VectorSource))
             return;
-        // Get existing feature IDs from source
-        const existingIds = new Set(vectorSource
-            .getFeatures()
-            .map((f) => f.getId())
-            .filter((id) => id !== undefined));
-        // Only add features that don't already exist in the source
-        if (features && features.length > 0) {
-            const newFeatures = features.filter((f) => !existingIds.has(f.id));
-            if (newFeatures.length > 0) {
-                const olFeatures = newFeatures.map((feature) => {
-                    const geom = feature.geometry;
-                    let geometry;
-                    // Validate coordinates exist before processing
-                    if (!geom.coordinates) {
-                        geometry = new Point([0, 0]);
-                    }
-                    else if (geom.type === 'Point') {
-                        const coords = geom.coordinates;
-                        geometry = new Point(fromLonLat(coords));
-                    }
-                    else if (geom.type === 'LineString') {
-                        const coords = geom.coordinates.map((c) => fromLonLat(c));
-                        geometry = new LineString(coords);
-                    }
-                    else if (geom.type === 'Polygon') {
-                        const rings = geom.coordinates.map((ring) => ring.map((c) => fromLonLat(c)));
-                        geometry = new Polygon(rings);
-                    }
-                    else if (geom.type === 'Circle') {
-                        const center = fromLonLat(geom.coordinates);
-                        // Approximate radius in meters - use 1000m as default if not specified
-                        geometry = new Circle(center, geom.radius ?? 1000);
-                    }
-                    else {
-                        geometry = new Point([0, 0]);
-                    }
-                    const olFeature = new OLFeature({
-                        geometry,
-                        ...feature.properties,
-                    });
-                    if (feature.style) {
-                        olFeature.set(STYLE_PROP, feature.style);
-                    }
-                    olFeature.setId(feature.id);
-                    return olFeature;
+        if (features) {
+            const newFeatureIds = new Set(features.map((f) => f.id));
+            const sourceFeatures = vectorSource.getFeatures();
+            sourceFeatures.forEach((f) => {
+                const fId = f.getId();
+                if (fId !== undefined && !newFeatureIds.has(fId)) {
+                    vectorSource.removeFeature(f);
+                }
+            });
+            const existingIds = new Set(vectorSource
+                .getFeatures()
+                .map((f) => f.getId())
+                .filter((fId) => fId !== undefined));
+            const featuresToAdd = features.filter((f) => !existingIds.has(f.id));
+            if (featuresToAdd.length > 0) {
+                const olFeatures = featuresToAdd.map((f) => {
+                    const olf = featureToOlFeature(f);
+                    if (f.style)
+                        olf.set(STYLE_PROP, f.style);
+                    return olf;
                 });
                 vectorSource.addFeatures(olFeatures);
             }
@@ -219,7 +617,13 @@ class OlLayerService {
     updateLayerState() {
         const layers = [];
         this.layerCache.forEach((layer, id) => {
-            const type = layer instanceof VectorLayer ? 'vector' : layer instanceof TileLayer ? 'tile' : 'image';
+            let type = 'vector';
+            if (layer instanceof HeatmapLayer)
+                type = 'heatmap';
+            else if (layer instanceof TileLayer)
+                type = 'tile';
+            else if (layer instanceof ImageLayer)
+                type = 'image';
             layers.push({
                 id,
                 type: type,
@@ -230,252 +634,73 @@ class OlLayerService {
         });
         this.layerState.set(layers.sort((a, b) => a.zIndex - b.zIndex));
     }
-    createVectorLayer(config, map) {
-        const vectorSource = new VectorSource();
-        // Add features if provided
-        if (config.features && config.features.length > 0) {
-            const olFeatures = config.features.map((feature) => {
-                const geom = feature.geometry;
-                let geometry;
-                // Validate coordinates exist before processing
-                if (!geom.coordinates) {
-                    geometry = new Point([0, 0]);
-                }
-                else if (geom.type === 'Point') {
-                    // Transform from EPSG:4326 (lon/lat) to EPSG:3857 (map projection)
-                    const coords = geom.coordinates;
-                    geometry = new Point(fromLonLat(coords));
-                }
-                else if (geom.type === 'LineString') {
-                    const coords = geom.coordinates.map((c) => fromLonLat(c));
-                    geometry = new LineString(coords);
-                }
-                else if (geom.type === 'Polygon') {
-                    const rings = geom.coordinates.map((ring) => ring.map((c) => fromLonLat(c)));
-                    geometry = new Polygon(rings);
-                }
-                else if (geom.type === 'Circle') {
-                    const center = fromLonLat(geom.coordinates);
-                    geometry = new Circle(center, geom.radius ?? 1000);
-                }
-                else {
-                    geometry = new Point([0, 0]);
-                }
-                const olFeature = new OLFeature({
-                    geometry,
-                    ...feature.properties,
-                });
-                if (feature.style) {
-                    olFeature.set(STYLE_PROP, feature.style);
-                }
-                olFeature.setId(feature.id);
-                return olFeature;
-            });
-            vectorSource.addFeatures(olFeatures);
-        }
-        // Wrap in cluster source if enabled
-        const clusterCfg = config.cluster;
-        const source = clusterCfg?.enabled
-            ? new ClusterSource({
-                source: vectorSource,
-                distance: clusterCfg.distance ?? 40,
-                minDistance: clusterCfg.minDistance ?? 20,
-                geometryFunction: (feature) => {
-                    const geometry = feature.getGeometry();
-                    if (!geometry)
-                        return null;
-                    // For Point geometries, use as-is
-                    if (geometry.getType() === 'Point') {
-                        return geometry;
-                    }
-                    // For other geometries (Polygon, Circle, etc.), use center point
-                    const extent = geometry.getExtent();
-                    const center = getCenter(extent);
-                    return new Point(center);
-                },
-            })
-            : vectorSource;
-        // Default style for all geometry types (points, lines, polygons)
-        const defaultStyle = new Style({
-            fill: new Fill({ color: 'rgba(25, 118, 210, 0.3)' }),
-            stroke: new Stroke({ color: '#1976d2', width: 2 }),
-            image: new Circle$1({
-                radius: 8,
-                fill: new Fill({ color: '#1976d2' }),
-                stroke: new Stroke({ color: '#d32f2f', width: 2 }),
-            }),
-        });
-        // Cluster style: shows count badge when features are clustered
-        const clusterStyleFn = (olFeature) => {
-            const features = olFeature.get('features');
-            const size = features?.length ?? 1;
-            if (size > 1) {
-                const showCount = clusterCfg?.showCount ?? true;
-                return new Style({
-                    image: new Circle$1({
-                        radius: 15 + Math.min(size * 2, 15),
-                        fill: new Fill({ color: 'rgba(255, 100, 100, 0.8)' }),
-                        stroke: new Stroke({ color: '#fff', width: 2 }),
-                    }),
-                    text: showCount
-                        ? new Text({
-                            text: String(size),
-                            fill: new Fill({ color: '#fff' }),
-                        })
-                        : undefined,
-                });
-            }
-            // Single feature: get the original feature from the cluster and use its style
-            const originalFeatures = olFeature.get('features');
-            const originalFeature = originalFeatures?.[0];
-            if (originalFeature) {
-                const abstractStyle = originalFeature.get(STYLE_PROP);
-                if (abstractStyle) {
-                    const style = new Style();
-                    const { icon, fill, stroke } = abstractStyle;
-                    if (icon?.src) {
-                        style.setImage(new Icon({
-                            src: icon.src,
-                            ...(icon.size ? { size: icon.size } : {}),
-                            ...(icon.anchor ? { anchor: icon.anchor } : {}),
-                        }));
-                    }
-                    if (fill) {
-                        style.setFill(new Fill({ color: fill.color }));
-                    }
-                    if (stroke) {
-                        style.setStroke(new Stroke({ color: stroke.color, width: stroke.width }));
-                    }
-                    // If we mapped at least one property, return it, otherwise fallback
-                    if (icon?.src || fill || stroke)
-                        return style;
-                }
-            }
-            return defaultStyle;
-        };
-        // Per-feature style resolver: features carrying `style` render it.
-        // Structural type avoids importing `FeatureLike` from `ol/Feature`;
-        // tooling has been observed to auto-remove the unused-looking import.
-        const styleFn = (olFeature) => {
-            const abstractStyle = olFeature.get(STYLE_PROP);
-            if (abstractStyle) {
-                const style = new Style();
-                const { icon, fill, stroke } = abstractStyle;
-                if (icon?.src) {
-                    style.setImage(new Icon({
-                        src: icon.src,
-                        ...(icon.size ? { size: icon.size } : {}),
-                        ...(icon.anchor ? { anchor: icon.anchor } : {}),
-                    }));
-                }
-                if (fill) {
-                    style.setFill(new Fill({ color: fill.color }));
-                }
-                if (stroke) {
-                    style.setStroke(new Stroke({ color: stroke.color, width: stroke.width }));
-                }
-                if (icon?.src || fill || stroke)
-                    return style;
-            }
-            return defaultStyle;
-        };
-        const layer = new VectorLayer({
-            source,
-            visible: config.visible ?? true,
-            opacity: config.opacity ?? 1,
-            zIndex: config.zIndex,
-            style: clusterCfg?.enabled ? clusterStyleFn : styleFn,
-        });
-        layer.set('id', config.id);
-        map.addLayer(layer);
-        this.layerCache.set(config.id, layer);
-        this.updateLayerState();
-        return { id: config.id };
-    }
-    createTileLayer(config, map) {
-        let source;
-        switch (config.source.type) {
-            case 'osm':
-                source = new OSM({ attributions: config.source.attributions });
-                break;
-            case 'xyz':
-                source = new XYZ({ url: config.source.url, attributions: config.source.attributions });
-                break;
-            case 'wms':
-                source = new TileWMS({
-                    url: config.source.url,
-                    params: config.source.params,
-                    attributions: config.source.attributions,
-                });
-                break;
-            default:
-                source = new OSM();
-        }
-        const layer = new TileLayer({
-            source,
-            visible: config.visible ?? true,
-            opacity: config.opacity ?? 1,
-            zIndex: config.zIndex,
-        });
-        layer.set('id', config.id);
-        map.addLayer(layer);
-        this.layerCache.set(config.id, layer);
-        this.updateLayerState();
-        return { id: config.id };
-    }
-    createImageLayer(config, map) {
-        let source;
-        if (config.source.type === 'static') {
-            source = new ImageStatic({
-                url: config.source.url,
-                imageExtent: config.source.imageExtent ?? [0, 0, 1, 1],
-            });
-        }
-        else {
-            source = new ImageWMS({ url: config.source.url, params: config.source.params });
-        }
-        const layer = new ImageLayer({
-            source,
-            visible: config.visible ?? true,
-            opacity: config.opacity ?? 1,
-            zIndex: config.zIndex,
-        });
-        layer.set('id', config.id);
-        map.addLayer(layer);
-        this.layerCache.set(config.id, layer);
-        this.updateLayerState();
-        return { id: config.id };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlLayerService, decorators: [{
             type: Injectable
         }] });
 
+class OlClusterComponent {
+    distance = input(40, ...(ngDevMode ? [{ debugName: "distance" }] : /* istanbul ignore next */ []));
+    minDistance = input(20, ...(ngDevMode ? [{ debugName: "minDistance" }] : /* istanbul ignore next */ []));
+    showCount = input(true, ...(ngDevMode ? [{ debugName: "showCount" }] : /* istanbul ignore next */ []));
+    featureStyle = input(...(ngDevMode ? [undefined, { debugName: "featureStyle" }] : /* istanbul ignore next */ []));
+    spiderfyOnSelect = input(false, ...(ngDevMode ? [{ debugName: "spiderfyOnSelect" }] : /* istanbul ignore next */ []));
+    spiderfyClick = output();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlClusterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlClusterComponent, isStandalone: true, selector: "ol-cluster", inputs: { distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null }, minDistance: { classPropertyName: "minDistance", publicName: "minDistance", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, featureStyle: { classPropertyName: "featureStyle", publicName: "featureStyle", isSignal: true, isRequired: false, transformFunction: null }, spiderfyOnSelect: { classPropertyName: "spiderfyOnSelect", publicName: "spiderfyOnSelect", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { spiderfyClick: "spiderfyClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlClusterComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-cluster',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { distance: [{ type: i0.Input, args: [{ isSignal: true, alias: "distance", required: false }] }], minDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDistance", required: false }] }], showCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCount", required: false }] }], featureStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "featureStyle", required: false }] }], spiderfyOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "spiderfyOnSelect", required: false }] }], spiderfyClick: [{ type: i0.Output, args: ["spiderfyClick"] }] } });
+
 // OlVectorLayerComponent
 class OlVectorLayerComponent {
     layerService = inject(OlLayerService);
     destroyRef = inject(DestroyRef);
     id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
     features = input([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
+    format = input(...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
     zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
     opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
     visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : /* istanbul ignore next */ []));
     cluster = input(...(ngDevMode ? [undefined, { debugName: "cluster" }] : /* istanbul ignore next */ []));
+    clusterComponent = contentChild(OlClusterComponent, ...(ngDevMode ? [{ debugName: "clusterComponent" }] : /* istanbul ignore next */ []));
     constructor() {
         // Initialize layer after DOM is ready
         afterNextRender(() => {
+            const clusterCmp = this.clusterComponent();
+            const resolvedClusterConfig = this.cluster() ??
+                (clusterCmp
+                    ? {
+                        enabled: true,
+                        distance: clusterCmp.distance(),
+                        minDistance: clusterCmp.minDistance(),
+                        showCount: clusterCmp.showCount(),
+                        featureStyle: clusterCmp.featureStyle(),
+                        spiderfyOnSelect: clusterCmp.spiderfyOnSelect(),
+                        onSpiderfyClick: (f) => clusterCmp.spiderfyClick.emit(f),
+                    }
+                    : undefined);
             this.layerService.addLayer({
                 id: this.id(),
                 type: 'vector',
                 features: this.features(),
+                url: this.url(),
+                format: this.format(),
                 zIndex: this.zIndex(),
                 opacity: this.opacity(),
                 visible: this.visible(),
                 style: this.style(),
-                cluster: this.cluster(),
+                cluster: resolvedClusterConfig,
             });
         });
         // Effect to sync features when input changes
@@ -486,22 +711,42 @@ class OlVectorLayerComponent {
                 this.layerService.updateFeatures(this.id(), currentFeatures);
             }
         });
+        effect(() => {
+            this.layerService.setOpacity(this.id(), this.opacity());
+        });
+        effect(() => {
+            this.layerService.setVisibility(this.id(), this.visible());
+        });
+        effect(() => {
+            this.layerService.setZIndex(this.id(), this.zIndex());
+        });
+        // Reactive cluster distance updates
+        effect(() => {
+            const clusterCmp = this.clusterComponent();
+            if (clusterCmp) {
+                const dist = clusterCmp.distance();
+                const minDst = clusterCmp.minDistance();
+                // Since we are inside effect, these will trigger when distance changes
+                this.layerService.setClusterDistance(this.id(), dist);
+                this.layerService.setClusterMinDistance(this.id(), minDst);
+            }
+        });
         // Cleanup when component is destroyed
         this.destroyRef.onDestroy(() => {
             this.layerService.removeLayer(this.id());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlVectorLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: OlVectorLayerComponent, isStandalone: true, selector: "ol-vector-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, cluster: { classPropertyName: "cluster", publicName: "cluster", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlVectorLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: OlVectorLayerComponent, isStandalone: true, selector: "ol-vector-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, cluster: { classPropertyName: "cluster", publicName: "cluster", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "clusterComponent", first: true, predicate: OlClusterComponent, descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlVectorLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlVectorLayerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol-vector-layer',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], cluster: [{ type: i0.Input, args: [{ isSignal: true, alias: "cluster", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], cluster: [{ type: i0.Input, args: [{ isSignal: true, alias: "cluster", required: false }] }], clusterComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => OlClusterComponent), { isSignal: true }] }] } });
 
 // OlTileLayerComponent
 class OlTileLayerComponent {
@@ -532,15 +777,24 @@ class OlTileLayerComponent {
                 visible: this.visible(),
             });
         });
+        effect(() => {
+            this.layerService.setOpacity(this.id(), this.opacity());
+        });
+        effect(() => {
+            this.layerService.setVisibility(this.id(), this.visible());
+        });
+        effect(() => {
+            this.layerService.setZIndex(this.id(), this.zIndex());
+        });
         // Cleanup when component is destroyed
         this.destroyRef.onDestroy(() => {
             this.layerService.removeLayer(this.id());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: OlTileLayerComponent, isStandalone: true, selector: "ol-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlTileLayerComponent, isStandalone: true, selector: "ol-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlTileLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTileLayerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol-tile-layer',
@@ -583,10 +837,10 @@ class OlImageLayerComponent {
             this.layerService.removeLayer(this.id());
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlImageLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: OlImageLayerComponent, isStandalone: true, selector: "ol-image-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, sourceType: { classPropertyName: "sourceType", publicName: "sourceType", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, imageExtent: { classPropertyName: "imageExtent", publicName: "imageExtent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlImageLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlImageLayerComponent, isStandalone: true, selector: "ol-image-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, sourceType: { classPropertyName: "sourceType", publicName: "sourceType", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: true, transformFunction: null }, params: { classPropertyName: "params", publicName: "params", isSignal: true, isRequired: false, transformFunction: null }, imageExtent: { classPropertyName: "imageExtent", publicName: "imageExtent", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlImageLayerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlImageLayerComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ol-image-layer',
@@ -595,6 +849,388 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], sourceType: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceType", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: true }] }], params: [{ type: i0.Input, args: [{ isSignal: true, alias: "params", required: false }] }], imageExtent: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageExtent", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }] } });
 
+class OlHeatmapLayerComponent {
+    layerService = inject(OlLayerService);
+    mapService = inject(OlMapService);
+    destroyRef = inject(DestroyRef);
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    features = input([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    blur = input(15, ...(ngDevMode ? [{ debugName: "blur" }] : /* istanbul ignore next */ []));
+    radius = input(8, ...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
+    /** Unit for radius and blur: 'pixels' (default) or 'meters' */
+    radiusUnit = input('pixels', ...(ngDevMode ? [{ debugName: "radiusUnit" }] : /* istanbul ignore next */ []));
+    weight = input(...(ngDevMode ? [undefined, { debugName: "weight" }] : /* istanbul ignore next */ []));
+    /** Computed radius in pixels based on current resolution if unit is 'meters' */
+    scaledRadius = computed(() => {
+        const r = this.radius();
+        if (this.radiusUnit() === 'pixels')
+            return r;
+        return r / this.mapService.resolution();
+    }, ...(ngDevMode ? [{ debugName: "scaledRadius" }] : /* istanbul ignore next */ []));
+    /** Computed blur in pixels based on current resolution if unit is 'meters' */
+    scaledBlur = computed(() => {
+        const b = this.blur();
+        if (this.radiusUnit() === 'pixels')
+            return b;
+        return b / this.mapService.resolution();
+    }, ...(ngDevMode ? [{ debugName: "scaledBlur" }] : /* istanbul ignore next */ []));
+    constructor() {
+        afterNextRender(() => {
+            this.layerService.addLayer({
+                id: this.id(),
+                type: 'heatmap',
+                features: this.features(),
+                zIndex: this.zIndex(),
+                opacity: this.opacity(),
+                visible: this.visible(),
+                blur: this.scaledBlur(),
+                radius: this.scaledRadius(),
+                weight: this.weight(),
+            });
+        });
+        effect(() => {
+            const currentFeatures = this.features();
+            if (this.layerService.getLayer(this.id())) {
+                this.layerService.updateFeatures(this.id(), currentFeatures);
+            }
+        });
+        effect(() => {
+            this.layerService.setOpacity(this.id(), this.opacity());
+        });
+        effect(() => {
+            this.layerService.setVisibility(this.id(), this.visible());
+        });
+        effect(() => {
+            this.layerService.setZIndex(this.id(), this.zIndex());
+        });
+        effect(() => {
+            this.layerService.setHeatmapProperties(this.id(), {
+                blur: this.scaledBlur(),
+                radius: this.scaledRadius(),
+                weight: this.weight(),
+            });
+        });
+        this.destroyRef.onDestroy(() => {
+            this.layerService.removeLayer(this.id());
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlHeatmapLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlHeatmapLayerComponent, isStandalone: true, selector: "ol-heatmap-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, blur: { classPropertyName: "blur", publicName: "blur", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, radiusUnit: { classPropertyName: "radiusUnit", publicName: "radiusUnit", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlHeatmapLayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-heatmap-layer',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], blur: [{ type: i0.Input, args: [{ isSignal: true, alias: "blur", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], radiusUnit: [{ type: i0.Input, args: [{ isSignal: true, alias: "radiusUnit", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }] } });
+
+// OlWebGLVectorLayerComponent
+// GPU-accelerated vector layer for large datasets (10k+ features).
+// Uses FlatStyleLike instead of ol/style/Style. Must be manually disposed.
+/**
+ * GPU-accelerated vector layer for rendering large datasets.
+ *
+ * Important: Uses WebGL 2 for rendering. Styles must be provided as
+ * `FlatStyleLike` objects (not `ol/style/Style` instances).
+ * Hit detection is disabled by default for performance.
+ *
+ * @usageNotes
+ * ```html
+ * <ol-webgl-vector-layer
+ *   id="big-dataset"
+ *   [features]="largeDataset()"
+ *   [flatStyle]="{
+ *     'circle-radius': 6,
+ *     'circle-fill-color': ['match', ['get', 'type'], 'alert', 'red', 'blue'],
+ *     'stroke-color': '#333',
+ *     'stroke-width': 1
+ *   }"
+ *   [disableHitDetection]="true">
+ * </ol-webgl-vector-layer>
+ * ```
+ */
+class OlWebGLVectorLayerComponent {
+    mapService = inject(OlMapService);
+    destroyRef = inject(DestroyRef);
+    /** Unique layer identifier */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Features to render */
+    features = input([], ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
+    /** WebGL flat style (required — no default provided) */
+    flatStyle = input.required(...(ngDevMode ? [{ debugName: "flatStyle" }] : /* istanbul ignore next */ []));
+    /** Z-index for layer ordering */
+    zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** Opacity (0–1) */
+    opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    /** Layer visibility */
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** Disable hit detection for better performance (default: true) */
+    disableHitDetection = input(true, ...(ngDevMode ? [{ debugName: "disableHitDetection" }] : /* istanbul ignore next */ []));
+    /** Style variables for dynamic expressions (e.g. `['var', 'threshold']`) */
+    variables = input(...(ngDevMode ? [undefined, { debugName: "variables" }] : /* istanbul ignore next */ []));
+    layer = null;
+    vectorSource = new VectorSource();
+    constructor() {
+        afterNextRender(() => {
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            this.syncFeatures(this.features());
+            try {
+                this.layer = new WebGLVectorLayer({
+                    source: this.vectorSource,
+                    style: this.flatStyle(),
+                    visible: this.visible(),
+                    opacity: this.opacity(),
+                    zIndex: this.zIndex(),
+                    disableHitDetection: this.disableHitDetection(),
+                    ...(this.variables() ? { variables: this.variables() } : {}),
+                });
+                this.layer.set('id', this.id());
+                map.addLayer(this.layer);
+            }
+            catch (err) {
+                // WebGL Vector Layer failed to initialize (e.g., not supported by browser)
+            }
+        });
+        // Reactive feature sync
+        effect(() => {
+            const currentFeatures = this.features();
+            if (this.layer) {
+                this.syncFeatures(currentFeatures);
+            }
+        });
+        // Reactive style updates
+        effect(() => {
+            this.layer?.setStyle(this.flatStyle());
+        });
+        effect(() => {
+            this.layer?.setOpacity(this.opacity());
+        });
+        effect(() => {
+            this.layer?.setVisible(this.visible());
+        });
+        effect(() => {
+            this.layer?.setZIndex(this.zIndex());
+        });
+        effect(() => {
+            const vars = this.variables();
+            if (vars && this.layer) {
+                this.layer.updateStyleVariables(vars);
+            }
+        });
+        // CRITICAL: WebGL layers must be manually disposed
+        this.destroyRef.onDestroy(() => {
+            const map = this.mapService.getMap();
+            if (map && this.layer) {
+                map.removeLayer(this.layer);
+                try {
+                    this.layer.dispose();
+                }
+                catch {
+                    // Ignore WebGL layer disposal errors (e.g., reading 'deleteBuffer' if renderer not fully initialized)
+                }
+            }
+        });
+    }
+    /**
+     * Imperatively update style variables without triggering Angular change detection.
+     * Ideal for 60FPS animations (e.g., linked to OlTimeService) where you don't want
+     * to use the declarative [variables] input.
+     */
+    updateVariables(vars) {
+        if (this.layer) {
+            this.layer.updateStyleVariables(vars);
+        }
+    }
+    syncFeatures(features) {
+        this.vectorSource.clear();
+        if (!features?.length)
+            return;
+        const olFeatures = features.map((feature) => {
+            const geom = feature.geometry;
+            let geometry;
+            if (!geom.coordinates) {
+                geometry = new Point([0, 0]);
+            }
+            else if (geom.type === 'Point') {
+                geometry = new Point(fromLonLat(geom.coordinates));
+            }
+            else if (geom.type === 'LineString') {
+                geometry = new LineString(geom.coordinates.map((c) => fromLonLat(c)));
+            }
+            else if (geom.type === 'Polygon') {
+                geometry = new Polygon(geom.coordinates.map((ring) => ring.map((c) => fromLonLat(c))));
+            }
+            else if (geom.type === 'Circle') {
+                const center = fromLonLat(geom.coordinates);
+                geometry = new Circle$1(center, geom.radius ?? 1000);
+            }
+            else {
+                geometry = new Point([0, 0]);
+            }
+            const olFeature = new OLFeature({
+                geometry,
+                ...feature.properties,
+            });
+            olFeature.setId(feature.id);
+            return olFeature;
+        });
+        this.vectorSource.addFeatures(olFeatures);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLVectorLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlWebGLVectorLayerComponent, isStandalone: true, selector: "ol-webgl-vector-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, features: { classPropertyName: "features", publicName: "features", isSignal: true, isRequired: false, transformFunction: null }, flatStyle: { classPropertyName: "flatStyle", publicName: "flatStyle", isSignal: true, isRequired: true, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, disableHitDetection: { classPropertyName: "disableHitDetection", publicName: "disableHitDetection", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLVectorLayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-webgl-vector-layer',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], features: [{ type: i0.Input, args: [{ isSignal: true, alias: "features", required: false }] }], flatStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "flatStyle", required: true }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], disableHitDetection: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableHitDetection", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }] } });
+
+// OlWebGLTileLayerComponent
+// GPU-accelerated tile layer with style expressions for color manipulation.
+/**
+ * GPU-accelerated tile layer with color/brightness/contrast expressions.
+ *
+ * Supports the same tile sources as `ol-tile-layer` but renders via WebGL,
+ * enabling GPU-powered color manipulation (brightness, contrast, saturation, gamma).
+ *
+ * @usageNotes
+ * ```html
+ * <ol-webgl-tile-layer
+ *   id="satellite-webgl"
+ *   source="xyz"
+ *   [url]="'https://server.arcgisonline.com/.../{z}/{y}/{x}'"
+ *   [tileStyle]="{ brightness: 0.1, contrast: 0.2 }">
+ * </ol-webgl-tile-layer>
+ * ```
+ */
+class OlWebGLTileLayerComponent {
+    mapService = inject(OlMapService);
+    destroyRef = inject(DestroyRef);
+    /** Unique layer identifier */
+    id = input.required(...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Tile source type */
+    source = input.required(...(ngDevMode ? [{ debugName: "source" }] : /* istanbul ignore next */ []));
+    /** Tile URL template (required for 'xyz' and 'mvt') */
+    url = input(...(ngDevMode ? [undefined, { debugName: "url" }] : /* istanbul ignore next */ []));
+    /** Attribution text */
+    attributions = input(...(ngDevMode ? [undefined, { debugName: "attributions" }] : /* istanbul ignore next */ []));
+    /** WebGL tile style (raster expressions) or flat style (MVT) */
+    tileStyle = input(...(ngDevMode ? [undefined, { debugName: "tileStyle" }] : /* istanbul ignore next */ []));
+    /** Z-index for layer ordering */
+    zIndex = input(0, ...(ngDevMode ? [{ debugName: "zIndex" }] : /* istanbul ignore next */ []));
+    /** Opacity (0–1) */
+    opacity = input(1, ...(ngDevMode ? [{ debugName: "opacity" }] : /* istanbul ignore next */ []));
+    /** Layer visibility */
+    visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+    /** Preload low-res tiles up to this many zoom levels */
+    preload = input(0, ...(ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []));
+    layer = null;
+    constructor() {
+        afterNextRender(() => {
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            let tileSource;
+            switch (this.source()) {
+                case 'mvt':
+                    tileSource = new VectorTileSource({
+                        format: new MVT(),
+                        url: this.url(),
+                        attributions: this.attributions(),
+                    });
+                    this.layer = new WebGLVectorTileLayer({
+                        source: tileSource,
+                        visible: this.visible(),
+                        opacity: this.opacity(),
+                        zIndex: this.zIndex(),
+                        style: this.tileStyle() || {},
+                    });
+                    break;
+                case 'xyz':
+                    tileSource = new XYZ({
+                        url: this.url(),
+                        attributions: this.attributions(),
+                    });
+                    this.layer = new WebGLTileLayer({
+                        source: tileSource,
+                        visible: this.visible(),
+                        opacity: this.opacity(),
+                        zIndex: this.zIndex(),
+                        preload: this.preload(),
+                        ...(this.tileStyle() ? { style: this.tileStyle() } : {}),
+                    });
+                    break;
+                case 'osm':
+                default:
+                    tileSource = new OSM({
+                        attributions: this.attributions(),
+                    });
+                    this.layer = new WebGLTileLayer({
+                        source: tileSource,
+                        visible: this.visible(),
+                        opacity: this.opacity(),
+                        zIndex: this.zIndex(),
+                        preload: this.preload(),
+                        ...(this.tileStyle() ? { style: this.tileStyle() } : {}),
+                    });
+                    break;
+            }
+            if (this.layer) {
+                this.layer.set('id', this.id());
+                map.addLayer(this.layer);
+            }
+        });
+        effect(() => {
+            this.layer?.setOpacity(this.opacity());
+        });
+        effect(() => {
+            this.layer?.setVisible(this.visible());
+        });
+        effect(() => {
+            this.layer?.setZIndex(this.zIndex());
+        });
+        effect(() => {
+            const style = this.tileStyle();
+            if (style && this.layer) {
+                if (this.source() === 'mvt') {
+                    this.layer.setStyle(style);
+                }
+                else {
+                    this.layer.setStyle(style);
+                }
+            }
+        });
+        // WebGL tile layers also need manual dispose
+        this.destroyRef.onDestroy(() => {
+            const map = this.mapService.getMap();
+            if (map && this.layer) {
+                map.removeLayer(this.layer);
+                this.layer.dispose();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.13", type: OlWebGLTileLayerComponent, isStandalone: true, selector: "ol-webgl-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, tileStyle: { classPropertyName: "tileStyle", publicName: "tileStyle", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlWebGLTileLayerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-webgl-tile-layer',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], attributions: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributions", required: false }] }], tileStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tileStyle", required: false }] }], zIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIndex", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }] } });
+
 // Provider functions
 function withLayers() {
     return { kind: 'layers', providers: [OlLayerService] };
@@ -609,4 +1245,4 @@ function provideLayers() {
  * Generated bundle index. Do not edit.
  */
 
-export { OlImageLayerComponent, OlLayerService, OlTileLayerComponent, OlVectorLayerComponent, provideLayers, withLayers };
+export { OlClusterComponent, OlHeatmapLayerComponent, OlImageLayerComponent, OlLayerService, OlTileLayerComponent, OlVectorLayerComponent, OlWebGLTileLayerComponent, OlWebGLVectorLayerComponent, provideLayers, withLayers };