@angular-helpers/openlayers 0.5.1 → 0.7.0

package/README.md

@@ -45,7 +45,7 @@ export const appConfig: ApplicationConfig = {
 
 ### 2. Use in your component
 
-```typescript
+````typescript
 // map.component.ts
 import { Component, inject, signal } from '@angular/core';
 import { OlMapComponent } from '@angular-helpers/openlayers/core';
@@ -103,8 +103,57 @@ export class MapComponent {
     this.mapService.animateView({ center: [2.2945, 48.8584], zoom: 15, duration: 1000 });
   }
 }
+## Custom Projections & Coordinate Systems
+
+Available since `0.4.1` in `@angular-helpers/openlayers/core` and `@angular-helpers/openlayers/layers`.
+
+When working with local reference systems (like UTM zones), you can register custom projections globally and pass coordinates in those reference systems directly to `[center]` or `[features]` without manual transforms:
+
+### 1. Register custom projections globally
+
+```typescript
+// app.config.ts
+import { provideOpenLayers } from '@angular-helpers/openlayers/core';
+import { withProjections } from '@angular-helpers/openlayers/core';
+import proj4 from 'proj4';
+
+export const appConfig = {
+  providers: [
+    provideOpenLayers(
+      withProjections(proj4, [
+        {
+          code: 'EPSG:25830', // UTM Zone 30N
+          def: '+proj=utm +zone=30 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
+          extent: [0, 0, 1000000, 10000000],
+        },
+      ]),
+    ),
+  ],
+};
+````
+
+### 2. Pass local coordinates natively to the map
+
+By setting `[coordinateProjection]` to match the custom projection, the component automatically bypasses longitude/latitude conversion, feeding UTM coordinates directly into OpenLayers:
+
+```html
+<ol-map
+  [projection]="'EPSG:25830'"
+  [coordinateProjection]="'EPSG:25830'"
+  [center]="[440291, 4474255]" <!-- Madrid UTM Zone 30 coordinates -->
+  [zoom]="12"
+  (viewChange)="onViewChange($event)"
+>
+  <ol-vector-layer
+    id="shapes"
+    [features]="utmFeatures()"
+    [coordinateProjection]="'EPSG:25830'"
+  />
+</ol-map>
 ```
 
+---
+
 ## Overlays — popups and tooltips
 
 Available since `0.3.0` from `@angular-helpers/openlayers/overlays`.
@@ -227,6 +276,68 @@ Renders points, lines, and polygons using WebGL 2. For peak performance, hit det
 
 Rigorous cleanup guarantees that WebGL contexts, framebuffers, and active buffers are fully released on destroy (`layer.dispose()`), preventing GPU leaks.
 
+## Time-Series Animation & Playback
+
+Available since `0.5.0` from `@angular-helpers/openlayers/core` and `@angular-helpers/openlayers/controls`.
+
+Provides high-performance, GPU-friendly reactive animation controls for time-series geospatial visualization (e.g. weather radar, vehicle tracking, historical paths).
+
+### 1. `OlTimeService` — 60FPS Animation Loop
+
+The core service coordinates playback timing. It runs its timing ticks entirely outside the Angular zone (using `requestAnimationFrame`) to prevent triggering global Angular change detection cycles at 60FPS, while exposing reactive signals for component consumption.
+
+```typescript
+import { inject, Component } from '@angular/core';
+import { OlTimeService } from '@angular-helpers/openlayers/core';
+
+@Component({
+  template: `<p>Current Time: {{ timeSvc.currentTime() }}</p>`,
+})
+export class MapAnimation {
+  protected timeSvc = inject(OlTimeService);
+
+  constructor() {
+    // Start animation loop
+    this.timeSvc.play();
+  }
+}
+```
+
+### 2. `<ol-timeline>` — Premium Playback UI Control
+
+A sleek, glassmorphic UI overlay component displaying a timeline scrubber, play/pause toggle, and playback speed multiplier.
+
+```html
+<ol-map [center]="[2.17, 41.38]" [zoom]="12">
+  <ol-tile-layer source="osm" />
+
+  <ol-timeline
+    [startTime]="1700000000000"
+    [endTime]="1700086400000"
+    [playSpeed]="60"
+    [loop]="true"
+    position="bottom-center"
+    (timeChange)="onTimeChange($event)"
+  />
+</ol-map>
+```
+
+| Input         | Type                       | Default                        | Description                                                                                               |
+| ------------- | -------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `startTime`   | `number`                   | _Required_                     | Start bounds of the time-series (Epoch ms)                                                                |
+| `endTime`     | `number`                   | _Required_                     | End bounds of the time-series (Epoch ms)                                                                  |
+| `playSpeed`   | `number`                   | `1`                            | Default speed multiplier (e.g. 1, 5, 10, 60, 3600)                                                        |
+| `loop`        | `boolean`                  | `false`                        | Loop playback when reaching `endTime`                                                                     |
+| `position`    | `TimelinePosition`         | `'bottom-center'`              | Control alignment (`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`) |
+| `formatLabel` | `(time: number) => string` | `new Date(t).toLocaleString()` | Custom label formatter for the time display                                                               |
+
+| Output            | Type      | Description                                                                       |
+| ----------------- | --------- | --------------------------------------------------------------------------------- |
+| `timeChange`      | `number`  | Emitted with the current active epoch timestamp when the timeline ticks or scrubs |
+| `playStateChange` | `boolean` | Emitted when playback transitions between playing (`true`) and paused (`false`)   |
+
+---
+
 ## Geodesic Geometry Helpers
 
 Available from `@angular-helpers/openlayers/core` via `OlGeometryService`.

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

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, input, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, output, signal, ViewChild, Injectable } from '@angular/core';
-import { OlMapService, OlZoneHelper } from '@angular-helpers/openlayers/core';
+import { inject, input, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, output, signal, ViewChild, Injectable, computed, effect } from '@angular/core';
+import { OlMapService, OlZoneHelper, OlTimeService } from '@angular-helpers/openlayers/core';
 import Zoom from 'ol/control/Zoom';
 import Attribution from 'ol/control/Attribution';
 import ScaleLine from 'ol/control/ScaleLine';
@@ -857,10 +857,240 @@ function provideControls() {
     return withControls();
 }
 
+/**
+ * A premium, reactive visual timeline component for OpenLayers.
+ * Orchestrates time-series animations by binding directly to OlTimeService.
+ *
+ * Uses native controls, CSS grid/flex layouts, and a sleek glassmorphic theme.
+ * Completely free of CommonModule or FormsModule dependencies for maximum performance.
+ *
+ * @usageNotes
+ * ```html
+ * <ol-timeline
+ *   [startTime]="1700000000000"
+ *   [endTime]="1700086400000"
+ *   [playSpeed]="60"
+ *   [loop]="true"
+ *   position="bottom-center">
+ * </ol-timeline>
+ * ```
+ */
+class OlTimelineComponent {
+    timeService = inject(OlTimeService);
+    /** Start bounds of time-series (Epoch ms) */
+    startTime = input.required(...(ngDevMode ? [{ debugName: "startTime" }] : /* istanbul ignore next */ []));
+    /** End bounds of time-series (Epoch ms) */
+    endTime = input.required(...(ngDevMode ? [{ debugName: "endTime" }] : /* istanbul ignore next */ []));
+    /** Default speed multiplier (e.g. 1, 5, 10, 60, 3600) */
+    playSpeed = input(1, ...(ngDevMode ? [{ debugName: "playSpeed" }] : /* istanbul ignore next */ []));
+    /** Loop playback when reaching endTime */
+    loop = input(false, ...(ngDevMode ? [{ debugName: "loop" }] : /* istanbul ignore next */ []));
+    /** Position overlay alignment */
+    position = input('bottom-center', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Custom label formatter */
+    formatLabel = input((t) => new Date(t).toLocaleString(), ...(ngDevMode ? [{ debugName: "formatLabel" }] : /* istanbul ignore next */ []));
+    /** Outputs */
+    timeChange = output();
+    playStateChange = output();
+    /** Computeds binding directly to OlTimeService */
+    currentTime = computed(() => this.timeService.currentTime(), ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
+    isPlaying = computed(() => this.timeService.isPlaying(), ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
+    speed = computed(() => this.timeService.speed(), ...(ngDevMode ? [{ debugName: "speed" }] : /* istanbul ignore next */ []));
+    formattedTime = computed(() => this.formatLabel()(this.currentTime()), ...(ngDevMode ? [{ debugName: "formattedTime" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync default configuration settings when the inputs initialize
+        effect(() => {
+            this.timeService.setSpeed(this.playSpeed());
+        });
+        // Make sure initial time starts at the startTime bounds
+        effect(() => {
+            this.timeService.setTime(this.startTime());
+        });
+        // Reactive time-based loop boundaries check
+        effect(() => {
+            const current = this.currentTime();
+            const end = this.endTime();
+            const isAnimPlaying = this.isPlaying();
+            if (current >= end && isAnimPlaying) {
+                if (this.loop()) {
+                    this.timeService.setTime(this.startTime());
+                }
+                else {
+                    this.timeService.pause();
+                    this.timeService.setTime(end);
+                    this.playStateChange.emit(false);
+                }
+            }
+        });
+        // Emit reactive output when current time advances
+        effect(() => {
+            this.timeChange.emit(this.currentTime());
+        });
+    }
+    togglePlay() {
+        if (this.isPlaying()) {
+            this.timeService.pause();
+            this.playStateChange.emit(false);
+        }
+        else {
+            // If we are at the end, reset to start before playing
+            if (this.currentTime() >= this.endTime()) {
+                this.timeService.setTime(this.startTime());
+            }
+            this.timeService.play();
+            this.playStateChange.emit(true);
+        }
+    }
+    onScrub(event) {
+        const target = event.target;
+        const value = Number(target.value);
+        this.timeService.setTime(value);
+    }
+    onSpeedChange(event) {
+        const target = event.target;
+        const value = Number(target.value);
+        this.timeService.setSpeed(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: OlTimelineComponent, isStandalone: true, selector: "ol-timeline", inputs: { startTime: { classPropertyName: "startTime", publicName: "startTime", isSignal: true, isRequired: true, transformFunction: null }, endTime: { classPropertyName: "endTime", publicName: "endTime", isSignal: true, isRequired: true, transformFunction: null }, playSpeed: { classPropertyName: "playSpeed", publicName: "playSpeed", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, formatLabel: { classPropertyName: "formatLabel", publicName: "formatLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange", playStateChange: "playStateChange" }, ngImport: i0, template: `
+    <div
+      class="ol-timeline"
+      [class.ol-timeline--top-left]="position() === 'top-left'"
+      [class.ol-timeline--top-center]="position() === 'top-center'"
+      [class.ol-timeline--top-right]="position() === 'top-right'"
+      [class.ol-timeline--bottom-left]="position() === 'bottom-left'"
+      [class.ol-timeline--bottom-center]="position() === 'bottom-center'"
+      [class.ol-timeline--bottom-right]="position() === 'bottom-right'"
+    >
+      <div class="ol-timeline__controls">
+        <button
+          type="button"
+          class="ol-timeline__btn ol-timeline__btn--play"
+          (click)="togglePlay()"
+          [attr.aria-label]="isPlaying() ? 'Pause animation' : 'Play animation'"
+        >
+          @if (isPlaying()) {
+            <!-- Pause Icon -->
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+            </svg>
+          } @else {
+            <!-- Play Icon -->
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          }
+        </button>
+
+        <span class="ol-timeline__time-display" aria-live="polite">
+          {{ formattedTime() }}
+        </span>
+      </div>
+
+      <div class="ol-timeline__slider-container">
+        <input
+          type="range"
+          class="ol-timeline__slider"
+          [min]="startTime()"
+          [max]="endTime()"
+          [value]="currentTime()"
+          (input)="onScrub($event)"
+          aria-label="Timeline progress slider"
+        />
+      </div>
+
+      <div class="ol-timeline__settings">
+        <select
+          class="ol-timeline__speed-select"
+          [value]="speed()"
+          (change)="onSpeedChange($event)"
+          aria-label="Playback speed multiplier"
+        >
+          <option [value]="1">1x (Real)</option>
+          <option [value]="5">5x</option>
+          <option [value]="10">10x</option>
+          <option [value]="30">30x</option>
+          <option [value]="60">60x (1m/s)</option>
+          <option [value]="300">300x (5m/s)</option>
+          <option [value]="3600">3600x (1h/s)</option>
+        </select>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.ol-timeline{position:absolute;display:flex;align-items:center;gap:16px;padding:8px 16px;background:#1e1e1ebf;backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 8px 32px #0000004d;color:#f3f3f3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;z-index:10;width:calc(100% - 32px);max-width:600px;box-sizing:border-box}.ol-timeline--top-left{top:12px;left:12px}.ol-timeline--top-center{top:12px;left:50%;transform:translate(-50%)}.ol-timeline--top-right{top:12px;right:12px}.ol-timeline--bottom-left{bottom:12px;left:12px}.ol-timeline--bottom-center{bottom:24px;left:50%;transform:translate(-50%)}.ol-timeline--bottom-right{bottom:12px;right:12px}.ol-timeline__controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.ol-timeline__btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__btn:hover{background:#fff3;transform:scale(1.05)}.ol-timeline__btn:active{transform:scale(.95)}.ol-timeline__time-display{font-variant-numeric:tabular-nums;font-weight:500;color:#e0e0e0;min-width:140px;text-align:center}.ol-timeline__slider-container{flex-grow:1;display:flex;align-items:center}.ol-timeline__slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#fff3;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-webkit-slider-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__slider::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-moz-range-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__settings{flex-shrink:0}.ol-timeline__speed-select{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:4px 8px;font-size:11px;font-weight:500;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__speed-select:hover{background:#ffffff26}.ol-timeline__speed-select option{background:#1e1e1e;color:#fff}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTimelineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-timeline', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="ol-timeline"
+      [class.ol-timeline--top-left]="position() === 'top-left'"
+      [class.ol-timeline--top-center]="position() === 'top-center'"
+      [class.ol-timeline--top-right]="position() === 'top-right'"
+      [class.ol-timeline--bottom-left]="position() === 'bottom-left'"
+      [class.ol-timeline--bottom-center]="position() === 'bottom-center'"
+      [class.ol-timeline--bottom-right]="position() === 'bottom-right'"
+    >
+      <div class="ol-timeline__controls">
+        <button
+          type="button"
+          class="ol-timeline__btn ol-timeline__btn--play"
+          (click)="togglePlay()"
+          [attr.aria-label]="isPlaying() ? 'Pause animation' : 'Play animation'"
+        >
+          @if (isPlaying()) {
+            <!-- Pause Icon -->
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+            </svg>
+          } @else {
+            <!-- Play Icon -->
+            <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          }
+        </button>
+
+        <span class="ol-timeline__time-display" aria-live="polite">
+          {{ formattedTime() }}
+        </span>
+      </div>
+
+      <div class="ol-timeline__slider-container">
+        <input
+          type="range"
+          class="ol-timeline__slider"
+          [min]="startTime()"
+          [max]="endTime()"
+          [value]="currentTime()"
+          (input)="onScrub($event)"
+          aria-label="Timeline progress slider"
+        />
+      </div>
+
+      <div class="ol-timeline__settings">
+        <select
+          class="ol-timeline__speed-select"
+          [value]="speed()"
+          (change)="onSpeedChange($event)"
+          aria-label="Playback speed multiplier"
+        >
+          <option [value]="1">1x (Real)</option>
+          <option [value]="5">5x</option>
+          <option [value]="10">10x</option>
+          <option [value]="30">30x</option>
+          <option [value]="60">60x (1m/s)</option>
+          <option [value]="300">300x (5m/s)</option>
+          <option [value]="3600">3600x (1h/s)</option>
+        </select>
+      </div>
+    </div>
+  `, styles: [":host{display:block}.ol-timeline{position:absolute;display:flex;align-items:center;gap:16px;padding:8px 16px;background:#1e1e1ebf;backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border:1px solid rgba(255,255,255,.08);border-radius:24px;box-shadow:0 8px 32px #0000004d;color:#f3f3f3;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;z-index:10;width:calc(100% - 32px);max-width:600px;box-sizing:border-box}.ol-timeline--top-left{top:12px;left:12px}.ol-timeline--top-center{top:12px;left:50%;transform:translate(-50%)}.ol-timeline--top-right{top:12px;right:12px}.ol-timeline--bottom-left{bottom:12px;left:12px}.ol-timeline--bottom-center{bottom:24px;left:50%;transform:translate(-50%)}.ol-timeline--bottom-right{bottom:12px;right:12px}.ol-timeline__controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.ol-timeline__btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__btn:hover{background:#fff3;transform:scale(1.05)}.ol-timeline__btn:active{transform:scale(.95)}.ol-timeline__time-display{font-variant-numeric:tabular-nums;font-weight:500;color:#e0e0e0;min-width:140px;text-align:center}.ol-timeline__slider-container{flex-grow:1;display:flex;align-items:center}.ol-timeline__slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#fff3;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-webkit-slider-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__slider::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:#1a73e8;box-shadow:0 1px 4px #0006;cursor:pointer;transition:background .15s ease,transform .15s ease}.ol-timeline__slider::-moz-range-thumb:hover{background:#2b84f0;transform:scale(1.15)}.ol-timeline__settings{flex-shrink:0}.ol-timeline__speed-select{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:4px 8px;font-size:11px;font-weight:500;outline:none;cursor:pointer;transition:background .15s ease}.ol-timeline__speed-select:hover{background:#ffffff26}.ol-timeline__speed-select option{background:#1e1e1e;color:#fff}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { startTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "startTime", required: true }] }], endTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "endTime", required: true }] }], playSpeed: [{ type: i0.Input, args: [{ isSignal: true, alias: "playSpeed", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], formatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatLabel", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], playStateChange: [{ type: i0.Output, args: ["playStateChange"] }] } });
+
 // @angular-helpers/openlayers/controls
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlGeolocationControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };
+export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlGeolocationControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlTimelineComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };

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

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, NgZone, Injectable, signal, DestroyRef, input, output, viewChild, afterNextRender, effect, ChangeDetectionStrategy, Component, computed, resource, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import OLMap from 'ol/Map';
 import View from 'ol/View';
-import { fromLonLat, toLonLat, get } from 'ol/proj';
+import { transform, get } from 'ol/proj';
 import { offset } from 'ol/sphere';
 import GeoJSON from 'ol/format/GeoJSON';
 import FeatureClass from 'ol/Feature';
@@ -164,6 +164,7 @@ class OlMapComponent {
     zoom = input(0, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
     rotation = input(0, ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
     projection = input('EPSG:3857', ...(ngDevMode ? [{ debugName: "projection" }] : /* istanbul ignore next */ []));
+    coordinateProjection = input('EPSG:4326', ...(ngDevMode ? [{ debugName: "coordinateProjection" }] : /* istanbul ignore next */ [])); // Dynamic input for coordinate systems
     viewChange = output();
     mapClick = output();
     mapDblClick = output();
@@ -190,11 +191,25 @@ class OlMapComponent {
         // Cleanup when component is destroyed
         this.destroyRef.onDestroy(() => this.destroyMap());
     }
+    getProjectedCoordinate(coord) {
+        const coordProj = this.coordinateProjection();
+        const mapProj = this.projection();
+        if (coordProj === mapProj)
+            return coord;
+        return transform(coord, coordProj, mapProj);
+    }
+    getExternalCoordinate(coord) {
+        const coordProj = this.coordinateProjection();
+        const mapProj = this.projection();
+        if (coordProj === mapProj)
+            return coord;
+        return transform(coord, mapProj, coordProj);
+    }
     initMap() {
         const container = this.mapContainerRef().nativeElement;
         this.zoneHelper.runOutsideAngular(() => {
             const view = new View({
-                center: fromLonLat(this.center(), this.projection()),
+                center: this.getProjectedCoordinate(this.center()),
                 zoom: this.zoom(),
                 rotation: this.rotation(),
                 projection: this.projection(),
@@ -222,11 +237,11 @@ class OlMapComponent {
                 });
             });
             this.map.on('click', (e) => this.zoneHelper.runInsideAngular(() => this.mapClick.emit({
-                coordinate: toLonLat(e.coordinate, this.projection()),
+                coordinate: this.getExternalCoordinate(e.coordinate),
                 pixel: e.pixel,
             })));
             this.map.on('dblclick', (e) => this.zoneHelper.runInsideAngular(() => this.mapDblClick.emit({
-                coordinate: toLonLat(e.coordinate, this.projection()),
+                coordinate: this.getExternalCoordinate(e.coordinate),
                 pixel: e.pixel,
             })));
         });
@@ -250,7 +265,7 @@ class OlMapComponent {
         if (!this.map)
             return;
         const view = this.map.getView();
-        const projectedCenter = fromLonLat(center, this.projection());
+        const projectedCenter = this.getProjectedCoordinate(center);
         const currentCenter = view.getCenter();
         // Only update if center is significantly different (prevents interfering with animations)
         if (!currentCenter ||
@@ -283,23 +298,23 @@ class OlMapComponent {
         const view = this.map?.getView();
         if (view) {
             const projectedCenter = view.getCenter() ?? [0, 0];
-            const lonLatCenter = toLonLat(projectedCenter, this.projection());
+            const externalCenter = this.getExternalCoordinate(projectedCenter);
             this.viewChange.emit({
-                center: lonLatCenter,
+                center: externalCenter,
                 zoom: view.getZoom() ?? 0,
                 rotation: view.getRotation() ?? 0,
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: OlMapComponent, isStandalone: true, selector: "ol-map", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null }, projection: { classPropertyName: "projection", publicName: "projection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChange: "viewChange", mapClick: "mapClick", mapDblClick: "mapDblClick" }, viewQueries: [{ propertyName: "mapContainerRef", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="ol-map-container" #mapContainer></div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.13", type: OlMapComponent, isStandalone: true, selector: "ol-map", inputs: { center: { classPropertyName: "center", publicName: "center", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null }, projection: { classPropertyName: "projection", publicName: "projection", isSignal: true, isRequired: false, transformFunction: null }, coordinateProjection: { classPropertyName: "coordinateProjection", publicName: "coordinateProjection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewChange: "viewChange", mapClick: "mapClick", mapDblClick: "mapDblClick" }, viewQueries: [{ propertyName: "mapContainerRef", first: true, predicate: ["mapContainer"], descendants: true, isSignal: true }], ngImport: i0, template: `<div class="ol-map-container" #mapContainer></div>
     <ng-content />`, isInline: true, styles: [":host{display:block;width:100%;height:100%;position:relative}.ol-map-container{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMapComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ol-map', template: `<div class="ol-map-container" #mapContainer></div>
     <ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;height:100%;position:relative}.ol-map-container{width:100%;height:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }], projection: [{ type: i0.Input, args: [{ isSignal: true, alias: "projection", required: false }] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], mapClick: [{ type: i0.Output, args: ["mapClick"] }], mapDblClick: [{ type: i0.Output, args: ["mapDblClick"] }], mapContainerRef: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { center: [{ type: i0.Input, args: [{ isSignal: true, alias: "center", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }], projection: [{ type: i0.Input, args: [{ isSignal: true, alias: "projection", required: false }] }], coordinateProjection: [{ type: i0.Input, args: [{ isSignal: true, alias: "coordinateProjection", required: false }] }], viewChange: [{ type: i0.Output, args: ["viewChange"] }], mapClick: [{ type: i0.Output, args: ["mapClick"] }], mapDblClick: [{ type: i0.Output, args: ["mapDblClick"] }], mapContainerRef: [{ type: i0.ViewChild, args: ['mapContainer', { isSignal: true }] }] } });
 
 // OlGeometryService — general purpose geometry helpers
 /**
@@ -511,44 +526,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
         }] });
 
 // Feature conversion utilities for OpenLayers interactions
+function transformCoords(coords, sourceProj, targetProj) {
+    if (!sourceProj || !targetProj || sourceProj === targetProj)
+        return coords;
+    if (!Array.isArray(coords))
+        return coords;
+    if (typeof coords[0] === 'number') {
+        return transform(coords, sourceProj, targetProj);
+    }
+    return coords.map((c) => transformCoords(c, sourceProj, targetProj));
+}
 /**
  * Converts an OpenLayers feature to the internal Feature format.
- * Handles coordinate extraction and geometry type mapping.
+ * 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
  */
-function olFeatureToFeature(olFeature) {
+function olFeatureToFeature(olFeature, options) {
     // Unwrap spider features
     const spiderFeature = olFeature.get('spider-feature');
     if (spiderFeature) {
-        return olFeatureToFeature(spiderFeature);
+        return olFeatureToFeature(spiderFeature, options);
     }
     // Unwrap single-item clusters
     const clusterFeatures = olFeature.get('features');
     if (Array.isArray(clusterFeatures) && clusterFeatures.length === 1) {
-        return olFeatureToFeature(clusterFeatures[0]);
+        return olFeatureToFeature(clusterFeatures[0], options);
     }
     const geometry = olFeature.getGeometry();
     const geomType = geometry?.getType() ?? 'Point';
+    const sourceProj = options?.targetProjection;
+    const targetProj = options?.sourceProjection;
     // Convert coordinates based on geometry type
     let coordinates;
     if (geomType === 'Circle') {
         // ol/geom/Circle has no getCoordinates() — use getCenter() instead
         const circle = geometry;
-        coordinates = circle.getCenter();
+        coordinates = transformCoords(circle.getCenter(), sourceProj, targetProj);
     }
     else {
         // oxlint-disable-next-line no-explicit-any
         const olCoords = geometry.getCoordinates();
-        if (Array.isArray(olCoords) && Array.isArray(olCoords[0])) {
-            // Multi-coordinate structures (LineString, Polygon, etc.)
-            coordinates = olCoords;
-        }
-        else {
-            // Single point
-            coordinates = olCoords;
-        }
+        coordinates = transformCoords(olCoords, sourceProj, targetProj);
     }
     return {
         id: olFeature.getId()?.toString() ?? `feature-${Math.random().toString(36).slice(2)}`,
@@ -562,7 +583,9 @@ function olFeatureToFeature(olFeature) {
 /**
  * Converts an internal Feature to an OpenLayers feature.
  */
-function featureToOlFeature(feature) {
+function featureToOlFeature(feature, options) {
+    const sourceProj = options?.sourceProjection ?? 'EPSG:4326';
+    const targetProj = options?.targetProjection ?? 'EPSG:3857';
     const geom = feature.geometry;
     let geometry;
     if (!geom.coordinates) {
@@ -570,14 +593,14 @@ function featureToOlFeature(feature) {
     }
     else if (geom.type === 'Point') {
         const coords = geom.coordinates;
-        geometry = new Point(fromLonLat(coords));
+        geometry = new Point(transformCoords(coords, sourceProj, targetProj));
     }
     else if (geom.type === 'LineString') {
-        const coords = geom.coordinates.map((c) => fromLonLat(c));
+        const coords = transformCoords(geom.coordinates, sourceProj, targetProj);
         geometry = new LineString(coords);
     }
     else if (geom.type === 'Polygon') {
-        const rings = geom.coordinates.map((ring) => ring.map((c) => fromLonLat(c)));
+        const rings = transformCoords(geom.coordinates, sourceProj, targetProj);
         geometry = new Polygon(rings);
     }
     else {

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

@@ -166,12 +166,13 @@ function buildVectorLayer(config, source) {
     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(featureToOlFeature);
+        const olFeatures = config.features.map((f) => featureToOlFeature(f));
         vectorSource.addFeatures(olFeatures);
     }
     const layer = new HeatmapLayer({
@@ -392,9 +393,16 @@ class OlLayerService {
                         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);
+                        const olf = featureToOlFeature(f, {
+                            sourceProjection: sourceProj,
+                            targetProjection: targetProj,
+                        });
                         if (f.style)
                             olf.set(STYLE_PROP, f.style);
                         return olf;
@@ -462,6 +470,28 @@ 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();
@@ -580,6 +610,11 @@ class OlLayerService {
         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;
@@ -605,7 +640,10 @@ class OlLayerService {
             const featuresToAdd = features.filter((f) => !existingIds.has(f.id));
             if (featuresToAdd.length > 0) {
                 const olFeatures = featuresToAdd.map((f) => {
-                    const olf = featureToOlFeature(f);
+                    const olf = featureToOlFeature(f, {
+                        sourceProjection: sourceProj,
+                        targetProjection: targetProj,
+                    });
                     if (f.style)
                         olf.set(STYLE_PROP, f.style);
                     return olf;
@@ -674,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(() => {
@@ -701,6 +740,7 @@ class OlVectorLayerComponent {
                 visible: this.visible(),
                 style: this.style(),
                 cluster: resolvedClusterConfig,
+                coordinateProjection: this.coordinateProjection(),
             });
         });
         // Effect to sync features when input changes
@@ -737,7 +777,7 @@ class OlVectorLayerComponent {
         });
     }
     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,
@@ -746,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 {

package/package.json

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

@@ -231,5 +231,55 @@ declare class OlControlService {
 declare function withControls(): OlFeature<'controls'>;
 declare function provideControls(): OlFeature<'controls'>;
 
-export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlGeolocationControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };
-export type { BasemapConfig, BasemapSwitcherPosition, ControlConfig, ControlPosition, LayerSwitcherItem, LayerSwitcherPosition, RotateControlMapService };
+type TimelinePosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+/**
+ * A premium, reactive visual timeline component for OpenLayers.
+ * Orchestrates time-series animations by binding directly to OlTimeService.
+ *
+ * Uses native controls, CSS grid/flex layouts, and a sleek glassmorphic theme.
+ * Completely free of CommonModule or FormsModule dependencies for maximum performance.
+ *
+ * @usageNotes
+ * ```html
+ * <ol-timeline
+ *   [startTime]="1700000000000"
+ *   [endTime]="1700086400000"
+ *   [playSpeed]="60"
+ *   [loop]="true"
+ *   position="bottom-center">
+ * </ol-timeline>
+ * ```
+ */
+declare class OlTimelineComponent {
+    private timeService;
+    /** Start bounds of time-series (Epoch ms) */
+    startTime: _angular_core.InputSignal<number>;
+    /** End bounds of time-series (Epoch ms) */
+    endTime: _angular_core.InputSignal<number>;
+    /** Default speed multiplier (e.g. 1, 5, 10, 60, 3600) */
+    playSpeed: _angular_core.InputSignal<number>;
+    /** Loop playback when reaching endTime */
+    loop: _angular_core.InputSignal<boolean>;
+    /** Position overlay alignment */
+    position: _angular_core.InputSignal<TimelinePosition>;
+    /** Custom label formatter */
+    formatLabel: _angular_core.InputSignal<(time: number) => string>;
+    /** Outputs */
+    timeChange: _angular_core.OutputEmitterRef<number>;
+    playStateChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Computeds binding directly to OlTimeService */
+    currentTime: _angular_core.Signal<number>;
+    isPlaying: _angular_core.Signal<boolean>;
+    speed: _angular_core.Signal<number>;
+    formattedTime: _angular_core.Signal<string>;
+    constructor();
+    togglePlay(): void;
+    onScrub(event: Event): void;
+    onSpeedChange(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlTimelineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlTimelineComponent, "ol-timeline", never, { "startTime": { "alias": "startTime"; "required": true; "isSignal": true; }; "endTime": { "alias": "endTime"; "required": true; "isSignal": true; }; "playSpeed": { "alias": "playSpeed"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "formatLabel": { "alias": "formatLabel"; "required": false; "isSignal": true; }; }, { "timeChange": "timeChange"; "playStateChange": "playStateChange"; }, never, never, true, never>;
+}
+
+export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlGeolocationControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlTimelineComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };
+export type { BasemapConfig, BasemapSwitcherPosition, ControlConfig, ControlPosition, LayerSwitcherItem, LayerSwitcherPosition, RotateControlMapService, TimelinePosition };

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

@@ -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>;
 }
 
 /**
@@ -379,18 +382,23 @@ interface VectorResourceOptions {
  */
 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.
+ * 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): Feature;
+declare function olFeatureToFeature(olFeature: Feature$1, options?: ProjectionOptions): Feature;
 /**
  * Converts an internal Feature to an OpenLayers feature.
  */
-declare function featureToOlFeature(feature: Feature): Feature$1;
+declare function featureToOlFeature(feature: Feature, options?: ProjectionOptions): Feature$1;
 
 type OlFeatureKind = 'layers' | 'controls' | 'interactions' | 'overlays' | 'military' | 'projections';
 interface OlFeature<Kind extends OlFeatureKind> {

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

@@ -33,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';
@@ -87,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 {