@angular-helpers/openlayers 0.5.1 → 0.6.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`.

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.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

@@ -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 {