@angular-helpers/openlayers 0.5.0 → 0.6.0

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

@@ -1,44 +1,358 @@
 import * as i0 from '@angular/core';
-import { inject, signal, computed, Injectable, input, ChangeDetectionStrategy, Component, DestroyRef, contentChild, afterNextRender, effect } 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 GeoJSON from 'ol/format/GeoJSON';
-import TopoJSON from 'ol/format/TopoJSON';
-import KML from 'ol/format/KML';
-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';
 
-// 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`.
- */
+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);
+    layer.set('coordinate-projection', config.coordinateProjection);
+    return layer;
+}
+function buildHeatmapLayer(config) {
+    const vectorSource = new VectorSource();
+    if (config.features && config.features.length > 0) {
+        const olFeatures = config.features.map((f) => featureToOlFeature(f));
+        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);
+    }
+}
+
 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 */ []));
@@ -64,18 +378,81 @@ class OlLayerService {
         }
     }
     createLayer(config, map) {
+        let layer;
         switch (config.type) {
-            case 'vector':
-                return this.createVectorLayer(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);
+                const targetProj = (typeof map.getView === 'function'
+                    ? map.getView()?.getProjection()?.getCode()
+                    : undefined) ?? 'EPSG:3857';
+                const sourceProj = vConfig.coordinateProjection ?? 'EPSG:4326';
+                if (vConfig.features && vConfig.features.length > 0) {
+                    const olFeatures = vConfig.features.map((f) => {
+                        const olf = featureToOlFeature(f, {
+                            sourceProjection: sourceProj,
+                            targetProjection: targetProj,
+                        });
+                        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':
-                return this.createHeatmapLayer(config, map);
-            case 'tile':
-                return this.createTileLayer(config, map);
-            case 'image':
-                return this.createImageLayer(config, map);
+                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);
@@ -84,7 +461,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);
@@ -94,6 +470,29 @@ class OlLayerService {
         const layer = this.layerCache.get(id);
         if (map && layer) {
             map.removeLayer(layer);
+            // Explicitly dispose sources to prevent memory leaks
+            if ('getSource' in layer) {
+                const source = layer.getSource();
+                if (source) {
+                    // If it's a ClusterSource, dispose the underlying source first
+                    if ('getSource' in source && typeof source.getSource === 'function') {
+                        const underlyingSource = source.getSource();
+                        if (underlyingSource && typeof underlyingSource.dispose === 'function') {
+                            if (typeof underlyingSource.clear === 'function') {
+                                underlyingSource.clear(true);
+                            }
+                            underlyingSource.dispose();
+                        }
+                    }
+                    if (typeof source.dispose === 'function') {
+                        if (typeof source.clear === 'function') {
+                            source.clear(true);
+                        }
+                        source.dispose();
+                    }
+                }
+            }
+            layer.dispose();
             this.layerCache.delete(id);
             this.updateLayerState();
         }
@@ -106,9 +505,8 @@ class OlLayerService {
         }
         else {
             const pending = this.pendingConfigs.find((c) => c.id === id);
-            if (pending) {
+            if (pending)
                 pending.visible = visible;
-            }
         }
     }
     toggleVisibility(id) {
@@ -129,9 +527,8 @@ class OlLayerService {
         }
         else {
             const pending = this.pendingConfigs.find((c) => c.id === id);
-            if (pending) {
+            if (pending)
                 pending.opacity = opacity;
-            }
         }
     }
     setZIndex(id, zIndex) {
@@ -142,8 +539,25 @@ class OlLayerService {
         }
         else {
             const pending = this.pendingConfigs.find((c) => c.id === id);
-            if (pending) {
+            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);
             }
         }
     }
@@ -179,11 +593,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))
@@ -191,85 +600,53 @@ 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))
             return;
+        const sourceProj = layer.get('coordinate-projection') ?? 'EPSG:4326';
+        const map = this.mapService.getMap();
+        const targetProj = (map && typeof map.getView === 'function'
+            ? map.getView()?.getProjection()?.getCode()
+            : undefined) ?? 'EPSG:3857';
         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;
-        // Sync features: remove old ones, update existing ones, add new ones
         if (features) {
             const newFeatureIds = new Set(features.map((f) => f.id));
             const sourceFeatures = vectorSource.getFeatures();
-            // 1. Remove features that are no longer in the input
             sourceFeatures.forEach((f) => {
-                const id = f.getId();
-                if (id !== undefined && !newFeatureIds.has(id)) {
+                const fId = f.getId();
+                if (fId !== undefined && !newFeatureIds.has(fId)) {
                     vectorSource.removeFeature(f);
                 }
             });
-            // 2. Only add features that don't already exist in the source
             const existingIds = new Set(vectorSource
                 .getFeatures()
                 .map((f) => f.getId())
-                .filter((id) => id !== undefined));
+                .filter((fId) => fId !== undefined));
             const featuresToAdd = features.filter((f) => !existingIds.has(f.id));
             if (featuresToAdd.length > 0) {
-                const olFeatures = featuresToAdd.map((feature) => {
-                    const geom = feature.geometry;
-                    let geometry;
-                    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);
-                        geometry = new Circle(center, geom.radius ?? 1000);
-                    }
-                    else {
-                        geometry = new Point([0, 0]);
-                    }
-                    const olFeature = new OLFeature({
-                        geometry,
-                        ...feature.properties,
+                const olFeatures = featuresToAdd.map((f) => {
+                    const olf = featureToOlFeature(f, {
+                        sourceProjection: sourceProj,
+                        targetProjection: targetProj,
                     });
-                    if (feature.style) {
-                        olFeature.set(STYLE_PROP, feature.style);
-                    }
-                    olFeature.setId(feature.id);
-                    return olFeature;
+                    if (f.style)
+                        olf.set(STYLE_PROP, f.style);
+                    return olf;
                 });
                 vectorSource.addFeatures(olFeatures);
             }
@@ -295,285 +672,6 @@ class OlLayerService {
         });
         this.layerState.set(layers.sort((a, b) => a.zIndex - b.zIndex));
     }
-    createVectorLayer(config, map) {
-        const sourceOptions = {};
-        if (config.url && config.format) {
-            sourceOptions.url = config.url;
-            if (config.format === 'geojson')
-                sourceOptions.format = new GeoJSON();
-            else if (config.format === 'topojson')
-                sourceOptions.format = new TopoJSON();
-            else if (config.format === 'kml')
-                sourceOptions.format = new KML();
-        }
-        const vectorSource = new VectorSource(sourceOptions);
-        // 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 }),
-            }),
-        });
-        // Resolved style: priority to stashed metadata, then config-level style, then default.
-        const userStyle = config.style;
-        const styleFn = (olFeature, resolution) => {
-            // 1. Per-feature style metadata (stashed via STYLE_PROP)
-            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;
-            }
-            // 2. Layer-level style from config (supports functions or static styles)
-            if (userStyle) {
-                if (typeof userStyle === 'function') {
-                    // Check if it's already an OL native feature or wrap if needed
-                    // For simplicity in the demo, we pass the feature as-is or mapped
-                    const feature = {
-                        id: String(olFeature.getId() ?? ''),
-                        geometry: {
-                            type: olFeature.getGeometry()?.getType(),
-                            coordinates: [], // coordinates not easily reversible without extra work
-                        },
-                        properties: olFeature.getProperties(),
-                    };
-                    return userStyle(feature, resolution);
-                }
-                return userStyle;
-            }
-            return defaultStyle;
-        };
-        // Cluster style: shows count badge when features are clustered, else delegates to styleFn
-        const clusterStyleFn = (olFeature, resolution) => {
-            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 in cluster: unwrap and call styleFn
-            const originalFeature = features?.[0];
-            if (originalFeature) {
-                // We MUST preserve the original geometry if it's a non-point ( spiderfication etc)
-                const style = styleFn(originalFeature, resolution);
-                if (style instanceof Style) {
-                    const origGeom = originalFeature.getGeometry();
-                    if (origGeom)
-                        style.setGeometry(origGeom);
-                }
-                return style;
-            }
-            return styleFn(olFeature, resolution);
-        };
-        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 };
-    }
-    createHeatmapLayer(config, map) {
-        const vectorSource = new VectorSource();
-        if (config.features && config.features.length > 0) {
-            const olFeatures = config.features.map((feature) => {
-                const geom = feature.geometry;
-                let geometry;
-                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 {
-                    geometry = new Point([0, 0]);
-                }
-                const olFeature = new OLFeature({
-                    geometry,
-                    ...feature.properties,
-                });
-                olFeature.setId(feature.id);
-                return olFeature;
-            });
-            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);
-        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.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 });
 }
@@ -586,8 +684,10 @@ class OlClusterComponent {
     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 } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    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,
@@ -596,7 +696,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     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 }] }] } });
+        }], 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 {
@@ -612,6 +712,7 @@ class OlVectorLayerComponent {
     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 */ []));
+    coordinateProjection = input('EPSG:4326', ...(ngDevMode ? [{ debugName: "coordinateProjection" }] : /* istanbul ignore next */ []));
     constructor() {
         // Initialize layer after DOM is ready
         afterNextRender(() => {
@@ -624,6 +725,8 @@ class OlVectorLayerComponent {
                         minDistance: clusterCmp.minDistance(),
                         showCount: clusterCmp.showCount(),
                         featureStyle: clusterCmp.featureStyle(),
+                        spiderfyOnSelect: clusterCmp.spiderfyOnSelect(),
+                        onSpiderfyClick: (f) => clusterCmp.spiderfyClick.emit(f),
                     }
                     : undefined);
             this.layerService.addLayer({
@@ -637,6 +740,7 @@ class OlVectorLayerComponent {
                 visible: this.visible(),
                 style: this.style(),
                 cluster: resolvedClusterConfig,
+                coordinateProjection: this.coordinateProjection(),
             });
         });
         // Effect to sync features when input changes
@@ -656,13 +760,24 @@ class OlVectorLayerComponent {
         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.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 });
+    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 }, coordinateProjection: { classPropertyName: "coordinateProjection", publicName: "coordinateProjection", 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.13", ngImport: i0, type: OlVectorLayerComponent, decorators: [{
             type: Component,
@@ -671,7 +786,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
                     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 }] }], 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 }] }] } });
+        }], 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 }] }], coordinateProjection: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinateProjection", required: false }] }] } });
 
 // OlTileLayerComponent
 class OlTileLayerComponent {
@@ -963,6 +1078,16 @@ class OlWebGLVectorLayerComponent {
             }
         });
     }
+    /**
+     * 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)
@@ -984,7 +1109,7 @@ class OlWebGLVectorLayerComponent {
             }
             else if (geom.type === 'Circle') {
                 const center = fromLonLat(geom.coordinates);
-                geometry = new Circle(center, geom.radius ?? 1000);
+                geometry = new Circle$1(center, geom.radius ?? 1000);
             }
             else {
                 geometry = new Point([0, 0]);