@angular-helpers/openlayers 0.8.0 → 21.14.1

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

@@ -377,22 +377,25 @@ class OlLayerService {
             }
         }
     }
+    createVectorSource(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();
+        }
+        return new VectorSource(sourceOptions);
+    }
     createLayer(config, map) {
         let layer;
         switch (config.type) {
             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 vectorSource = this.createVectorSource(vConfig, map);
                 const targetProj = (typeof map.getView === 'function'
                     ? map.getView()?.getProjection()?.getCode()
                     : undefined) ?? 'EPSG:3857';
@@ -497,6 +500,41 @@ class OlLayerService {
             this.updateLayerState();
         }
     }
+    updateVectorLayerConfig(id, config) {
+        const layer = this.layerCache.get(id);
+        if (!(layer instanceof VectorLayer))
+            return;
+        const map = this.mapService.getMap();
+        const nextConfig = {
+            ...(layer.get('cluster-config') ? { cluster: layer.get('cluster-config') } : {}),
+            ...(layer.get('style-fn') !== undefined ? { style: layer.get('style-fn') } : {}),
+            ...config,
+        };
+        const nextSource = this.createVectorSource(nextConfig, map ?? {});
+        const clusterCfg = nextConfig.cluster;
+        if (clusterCfg?.enabled) {
+            const clusterSource = new ClusterSource({
+                source: nextSource,
+                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()));
+                },
+            });
+            layer.setSource(clusterSource);
+        }
+        else {
+            layer.setSource(nextSource);
+        }
+        layer.set('coordinate-projection', nextConfig.coordinateProjection ?? 'EPSG:4326');
+        this.updateFeatures(id, nextConfig.features ?? []);
+        this.updateLayerState();
+    }
     setVisibility(id, visible) {
         const layer = this.layerCache.get(id);
         if (layer) {
@@ -746,11 +784,19 @@ class OlVectorLayerComponent {
         // Effect to sync features when input changes
         effect(() => {
             const currentFeatures = this.features();
-            // Only update if layer already exists (afterNextRender already created it)
             if (this.layerService.getLayer(this.id())) {
                 this.layerService.updateFeatures(this.id(), currentFeatures);
             }
         });
+        effect(() => {
+            if (this.layerService.getLayer(this.id())) {
+                this.layerService.updateVectorLayerConfig(this.id(), {
+                    url: this.url(),
+                    format: this.format(),
+                    coordinateProjection: this.coordinateProjection(),
+                });
+            }
+        });
         effect(() => {
             this.layerService.setOpacity(this.id(), this.opacity());
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-helpers/openlayers",
-  "version": "0.8.0",
+  "version": "21.14.1",
   "description": "Modern Angular wrapper for OpenLayers with modular architecture, standalone components, and hybrid template/programmatic API",
   "homepage": "https://gaspar1992.github.io/angular-helpers/docs/openlayers",
   "repository": {

package/types/angular-helpers-openlayers-layers.d.ts

@@ -268,10 +268,12 @@ declare class OlLayerService {
         id: string;
     };
     private flushPending;
+    private createVectorSource;
     private createLayer;
     getLayer(id: string): BaseLayer | undefined;
     hasLayer(id: string): boolean;
     removeLayer(id: string): void;
+    updateVectorLayerConfig(id: string, config: Partial<VectorLayerConfig>): void;
     setVisibility(id: string, visible: boolean): void;
     toggleVisibility(id: string): boolean;
     setOpacity(id: string, opacity: number): void;