@angular-helpers/openlayers 0.5.0 → 0.6.0

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

@@ -202,13 +202,34 @@ class OlTooltipDirective {
             matched = feature;
             return true;
         }, {
-            layerFilter: layerId ? (layer) => layer.get('id') === layerId : undefined,
+            layerFilter: layerId
+                ? (layer) => layer.get('id') === layerId || !!layer.get('is-spider-layer')
+                : undefined,
         });
         if (!matched) {
             tooltip.style.display = 'none';
             return;
         }
-        const value = matched.get(propKey);
+        let value = matched.get(propKey);
+        if (value === undefined || value === null) {
+            // 1. Check if it's a clustered feature
+            const features = matched.get('features');
+            if (Array.isArray(features) && features.length > 0) {
+                if (features.length === 1) {
+                    value = features[0].get(propKey);
+                }
+                else {
+                    value = `${features.length} elementos`;
+                }
+            }
+            else {
+                // 2. Check if it's a spider feature
+                const spiderFeature = matched.get('spider-feature');
+                if (spiderFeature) {
+                    value = spiderFeature.get(propKey);
+                }
+            }
+        }
         if (value === undefined || value === null) {
             tooltip.style.display = 'none';
             return;
@@ -332,6 +353,7 @@ class OlPopupService {
     }
     flushPending(map) {
         const pending = this.pending.splice(0);
+        this.flushSubscribed = false;
         for (const call of pending) {
             if (call.kind === 'open') {
                 this.createOrUpdate(call.options.id, call.options, map);
@@ -388,6 +410,8 @@ class OlPopupService {
                 environmentInjector: this.envInjector,
                 elementInjector: options.injector,
                 hostElement,
+                // Actually, let's see if createComponent supports bindings. If it does, we pass it.
+                // Wait, the original code passed bindings! I will revert to the exact original code for createComponent options!
                 bindings: options.bindings,
                 directives: options.directives?.map((d) => typeof d === 'function' ? d : { type: d.type, bindings: d.bindings ?? [] }),
             });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-helpers/openlayers",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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-core.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef, Provider, EnvironmentProviders } from '@angular/core';
+import { ElementRef, Signal, Resource, Provider, EnvironmentProviders } from '@angular/core';
 import OLMap from 'ol/Map';
-import { View } from 'ol';
+import { View, Feature as Feature$1 } from 'ol';
 
 type Coordinate = [number, number];
 type Extent = [number, number, number, number];
@@ -94,6 +94,7 @@ declare class OlMapComponent {
     zoom: _angular_core.InputSignal<number>;
     rotation: _angular_core.InputSignal<number>;
     projection: _angular_core.InputSignal<string>;
+    coordinateProjection: _angular_core.InputSignal<string>;
     viewChange: _angular_core.OutputEmitterRef<ViewState>;
     mapClick: _angular_core.OutputEmitterRef<MapClickEvent>;
     mapDblClick: _angular_core.OutputEmitterRef<MapClickEvent>;
@@ -101,6 +102,8 @@ declare class OlMapComponent {
     private map?;
     private resizeObserver?;
     constructor();
+    private getProjectedCoordinate;
+    private getExternalCoordinate;
     private initMap;
     private destroyMap;
     private updateCenter;
@@ -108,7 +111,7 @@ declare class OlMapComponent {
     private updateRotation;
     private emitViewChange;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlMapComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlMapComponent, "ol-map", never, { "center": { "alias": "center"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; "projection": { "alias": "projection"; "required": false; "isSignal": true; }; }, { "viewChange": "viewChange"; "mapClick": "mapClick"; "mapDblClick": "mapDblClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlMapComponent, "ol-map", never, { "center": { "alias": "center"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "rotation": { "alias": "rotation"; "required": false; "isSignal": true; }; "projection": { "alias": "projection"; "required": false; "isSignal": true; }; "coordinateProjection": { "alias": "coordinateProjection"; "required": false; "isSignal": true; }; }, { "viewChange": "viewChange"; "mapClick": "mapClick"; "mapDblClick": "mapDblClick"; }, never, ["*"], true, never>;
 }
 
 /**
@@ -323,6 +326,80 @@ declare class OlGeometryService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<OlGeometryService>;
 }
 
+/**
+ * Service for orchestrating time-series animations in OpenLayers.
+ * Exposes a reactive currentTime signal that updates outside the Angular zone
+ * via requestAnimationFrame, ensuring 60FPS WebGL animations without triggering
+ * global change detection.
+ */
+declare class OlTimeService {
+    private zoneHelper;
+    private timeSignal;
+    private playingSignal;
+    private speedSignal;
+    private animationFrameId;
+    private lastTick;
+    readonly currentTime: _angular_core.Signal<number>;
+    readonly isPlaying: _angular_core.Signal<boolean>;
+    readonly speed: _angular_core.Signal<number>;
+    /**
+     * Sets the current time manually.
+     * @param time Epoch timestamp in milliseconds
+     */
+    setTime(time: number): void;
+    /**
+     * Sets the playback speed multiplier.
+     * @param speed Multiplier (e.g. 1 = real time, 60 = 1 minute per second)
+     */
+    setSpeed(speed: number): void;
+    /**
+     * Starts the time animation loop.
+     */
+    play(): void;
+    /**
+     * Pauses the time animation loop.
+     */
+    pause(): void;
+    /**
+     * Stops the animation and resets to a specific time.
+     */
+    stop(resetTime?: number): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTimeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<OlTimeService>;
+}
+
+interface VectorResourceOptions {
+    /** Optional custom fetch options */
+    fetchOptions?: RequestInit;
+}
+/**
+ * Creates an Angular resource for fetching and decoding GeoJSON into OpenLayers Features.
+ * Must be called in an injection context.
+ *
+ * @param url The URL signal or string to fetch data from
+ * @param options Additional vector resource options
+ * @returns An Angular Resource containing an array of parsed Features
+ */
+declare function createVectorResource(url: Signal<string | undefined>, options?: VectorResourceOptions): Resource<Feature[]>;
+
+interface ProjectionOptions {
+    sourceProjection?: string;
+    targetProjection?: string;
+}
+/**
+ * Converts an OpenLayers feature to the internal Feature format.
+ * Handles coordinate extraction and geometry type mapping with custom projections.
+ *
+ * @param olFeature - The OpenLayers feature to convert
+ * @param options - Projection source and target codes
+ * @returns The converted Feature with normalized structure
+ */
+declare function olFeatureToFeature(olFeature: Feature$1, options?: ProjectionOptions): Feature;
+/**
+ * Converts an internal Feature to an OpenLayers feature.
+ */
+declare function featureToOlFeature(feature: Feature, options?: ProjectionOptions): Feature$1;
+
 type OlFeatureKind = 'layers' | 'controls' | 'interactions' | 'overlays' | 'military' | 'projections';
 interface OlFeature<Kind extends OlFeatureKind> {
     kind: Kind;
@@ -344,5 +421,5 @@ interface Proj4Definition {
  */
 declare function withProjections(proj4: any, definitions: Proj4Definition[]): OlFeature<'projections'>;
 
-export { OlGeometryService, OlMapComponent, OlMapService, OlZoneHelper, provideOpenLayers, withProjections };
-export type { AnimationOptions, Coordinate, DonutConfig, EllipseConfig, Extent, Feature, FitOptions, Geometry, GeometryType, Layer, MapClickEvent, MapConfig, MapViewOptions, OlFeature, OlFeatureKind, Pixel, Proj4Definition, ProjectionCode, SectorConfig, Style, ViewState };
+export { OlGeometryService, OlMapComponent, OlMapService, OlTimeService, OlZoneHelper, createVectorResource, featureToOlFeature, olFeatureToFeature, provideOpenLayers, withProjections };
+export type { AnimationOptions, Coordinate, DonutConfig, EllipseConfig, Extent, Feature, FitOptions, Geometry, GeometryType, Layer, MapClickEvent, MapConfig, MapViewOptions, OlFeature, OlFeatureKind, Pixel, Proj4Definition, ProjectionCode, SectorConfig, Style, VectorResourceOptions, ViewState };

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

@@ -2,11 +2,9 @@ import * as rxjs from 'rxjs';
 import * as _angular_helpers_openlayers_interactions from '@angular-helpers/openlayers/interactions';
 import * as _angular_core from '@angular/core';
 import { Provider } from '@angular/core';
-import * as _angular_helpers_openlayers_core from '@angular-helpers/openlayers/core';
 import { Feature, OlFeature } from '@angular-helpers/openlayers/core';
 import Interaction from 'ol/interaction/Interaction';
 import OLMap from 'ol/Map';
-import { Feature as Feature$1 } from 'ol';
 
 type InteractionType = 'select' | 'draw' | 'modify' | 'dragAndDrop';
 interface InteractionConfig {
@@ -88,7 +86,8 @@ declare class OlInteractionService {
     private selectService;
     private drawService;
     private modifyService;
-    readonly selectedFeatures: _angular_core.Signal<_angular_helpers_openlayers_core.Feature[]>;
+    readonly selectedFeatures: _angular_core.Signal<Feature[]>;
+    readonly hoveredFeature: _angular_core.Signal<Feature>;
     readonly selectionCount: _angular_core.Signal<number>;
     readonly hasSelection: _angular_core.Signal<boolean>;
     readonly activeInteractions: _angular_core.Signal<_angular_helpers_openlayers_interactions.ManagedInteraction[]>;
@@ -178,11 +177,13 @@ interface ManagedInteraction {
 declare class InteractionStateService {
     private interactions;
     private selectedFeaturesInternal;
+    private hoveredFeatureInternal;
     private drawStartSubject;
     private drawEndSubject;
     private modifySubject;
     private selectSubject;
     readonly selectedFeatures: _angular_core.Signal<Feature[]>;
+    readonly hoveredFeature: _angular_core.Signal<Feature>;
     readonly selectionCount: _angular_core.Signal<number>;
     readonly hasSelection: _angular_core.Signal<boolean>;
     readonly activeInteractions: _angular_core.Signal<ManagedInteraction[]>;
@@ -221,6 +222,11 @@ declare class InteractionStateService {
      * Clears the current selection.
      */
     clearSelection(): void;
+    /**
+     * Sets the currently hovered feature.
+     * @param feature - The hovered feature or null
+     */
+    setHoveredFeature(feature: Feature | null): void;
     /**
      * Emits a draw start event.
      * @param event - The draw start event data
@@ -340,15 +346,6 @@ declare class MeasurementInteractionService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<MeasurementInteractionService>;
 }
 
-/**
- * Converts an OpenLayers feature to the internal Feature format.
- * Handles coordinate extraction and geometry type mapping.
- *
- * @param olFeature - The OpenLayers feature to convert
- * @returns The converted Feature with normalized structure
- */
-declare function olFeatureToFeature(olFeature: Feature$1): Feature;
-
 /**
  * Declarative component to configure an OpenLayers Draw Interaction.
  */
@@ -444,5 +441,5 @@ declare function withModifyInteraction(id: string, config?: ModifyConfig): Provi
  */
 declare function withMeasurementInteraction(): Provider;
 
-export { DrawInteractionService, InteractionStateService, MeasurementInteractionService, ModifyInteractionService, OlDrawInteractionComponent, OlInteractionService, OlModifyInteractionComponent, OlSelectInteractionComponent, SelectInteractionService, olFeatureToFeature, provideInteractions, withDrawInteraction, withInteractions, withMeasurementInteraction, withModifyInteraction, withSelectInteraction };
+export { DrawInteractionService, InteractionStateService, MeasurementInteractionService, ModifyInteractionService, OlDrawInteractionComponent, OlInteractionService, OlModifyInteractionComponent, OlSelectInteractionComponent, SelectInteractionService, provideInteractions, withDrawInteraction, withInteractions, withMeasurementInteraction, withModifyInteraction, withSelectInteraction };
 export type { DragAndDropConfig, DrawConfig, DrawEndEvent, DrawStartEvent, InteractionConfig, InteractionState, InteractionType, ManagedInteraction, ModifyConfig, ModifyEvent, SelectConfig, SelectEvent };

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

@@ -21,6 +21,10 @@ interface ClusterConfig {
     showCount?: boolean;
     /** Style for individual features when clustering */
     featureStyle?: Style;
+    /** Automatically spiderfy overlapping points on click (default: false) */
+    spiderfyOnSelect?: boolean;
+    /** Callback when a spider leg feature is clicked */
+    onSpiderfyClick?: (feature: Feature) => void;
 }
 interface VectorLayerConfig extends LayerConfig {
     type: 'vector';
@@ -29,6 +33,7 @@ interface VectorLayerConfig extends LayerConfig {
     format?: 'geojson' | 'topojson' | 'kml';
     style?: Style | ((feature: Feature) => Style);
     cluster?: ClusterConfig;
+    coordinateProjection?: string;
 }
 interface HeatmapLayerConfig extends LayerConfig {
     type: 'heatmap';
@@ -64,8 +69,10 @@ declare class OlClusterComponent {
     minDistance: _angular_core.InputSignal<number>;
     showCount: _angular_core.InputSignal<boolean>;
     featureStyle: _angular_core.InputSignal<Style>;
+    spiderfyOnSelect: _angular_core.InputSignal<boolean>;
+    spiderfyClick: _angular_core.OutputEmitterRef<Feature>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlClusterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlClusterComponent, "ol-cluster", never, { "distance": { "alias": "distance"; "required": false; "isSignal": true; }; "minDistance": { "alias": "minDistance"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "featureStyle": { "alias": "featureStyle"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlClusterComponent, "ol-cluster", never, { "distance": { "alias": "distance"; "required": false; "isSignal": true; }; "minDistance": { "alias": "minDistance"; "required": false; "isSignal": true; }; "showCount": { "alias": "showCount"; "required": false; "isSignal": true; }; "featureStyle": { "alias": "featureStyle"; "required": false; "isSignal": true; }; "spiderfyOnSelect": { "alias": "spiderfyOnSelect"; "required": false; "isSignal": true; }; }, { "spiderfyClick": "spiderfyClick"; }, never, never, true, never>;
 }
 
 declare class OlVectorLayerComponent {
@@ -81,9 +88,10 @@ declare class OlVectorLayerComponent {
     style: _angular_core.InputSignal<any>;
     cluster: _angular_core.InputSignal<ClusterConfig>;
     clusterComponent: _angular_core.Signal<OlClusterComponent>;
+    coordinateProjection: _angular_core.InputSignal<string>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlVectorLayerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlVectorLayerComponent, "ol-vector-layer", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "opacity": { "alias": "opacity"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "cluster": { "alias": "cluster"; "required": false; "isSignal": true; }; }, {}, ["clusterComponent"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlVectorLayerComponent, "ol-vector-layer", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "opacity": { "alias": "opacity"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "cluster": { "alias": "cluster"; "required": false; "isSignal": true; }; "coordinateProjection": { "alias": "coordinateProjection"; "required": false; "isSignal": true; }; }, {}, ["clusterComponent"], never, true, never>;
 }
 
 declare class OlTileLayerComponent {
@@ -185,6 +193,12 @@ declare class OlWebGLVectorLayerComponent {
     private layer;
     private vectorSource;
     constructor();
+    /**
+     * 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: Record<string, string | number | boolean | number[]>): void;
     private syncFeatures;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlWebGLVectorLayerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlWebGLVectorLayerComponent, "ol-webgl-vector-layer", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "features": { "alias": "features"; "required": false; "isSignal": true; }; "flatStyle": { "alias": "flatStyle"; "required": true; "isSignal": true; }; "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "opacity": { "alias": "opacity"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "disableHitDetection": { "alias": "disableHitDetection"; "required": false; "isSignal": true; }; "variables": { "alias": "variables"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
@@ -245,6 +259,7 @@ declare class OlLayerService {
     private layerCache;
     private pendingConfigs;
     private layerState;
+    private spiderManager;
     readonly layers: _angular_core.Signal<LayerInfo[]>;
     readonly visibleLayers: _angular_core.Signal<LayerInfo[]>;
     readonly tileLayers: _angular_core.Signal<LayerInfo[]>;
@@ -261,6 +276,8 @@ declare class OlLayerService {
     toggleVisibility(id: string): boolean;
     setOpacity(id: string, opacity: number): void;
     setZIndex(id: string, zIndex: number): void;
+    setClusterDistance(id: string, distance: number): void;
+    setClusterMinDistance(id: string, minDistance: number): void;
     setHeatmapProperties(id: string, props: {
         blur?: number;
         radius?: number;
@@ -269,24 +286,9 @@ declare class OlLayerService {
     isVisible(id: string): boolean;
     getOpacity(id: string): number;
     getZIndex(id: string): number;
-    /**
-     * Clears all features from a vector layer's source.
-     * Does not remove the layer itself.
-     * @param id - Layer identifier
-     */
     clearFeatures(id: string): void;
-    /**
-     * 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: string, features: VectorLayerConfig['features']): void;
     private updateLayerState;
-    private createVectorLayer;
-    private createHeatmapLayer;
-    private createTileLayer;
-    private createImageLayer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlLayerService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<OlLayerService>;
 }