@angular-helpers/openlayers 22.0.1 → 22.1.0

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

@@ -341,17 +341,29 @@ class OlGeometryService {
         if (segments < 8) {
             throw new RangeError('segments must be >= 8');
         }
-        const cosR = Math.cos(rotation);
-        const sinR = Math.sin(rotation);
+        const rRadius = 6371008.8; // Standard Earth radius used by OpenLayers
+        const alpha = semiMajor / rRadius;
+        const beta = semiMinor / rRadius;
+        // Failsafe for strategic-scale inputs exceeding spherical boundaries (quarter of Earth)
+        if (alpha >= Math.PI / 2 || beta >= Math.PI / 2) {
+            throw new RangeError('semiMajor and semiMinor must be less than quarter of Earth circumference');
+        }
+        const tanAlpha = Math.tan(alpha);
+        const tanBeta = Math.tan(beta);
+        const tanAlphaSq = tanAlpha * tanAlpha;
+        const tanBetaSq = tanBeta * tanBeta;
         const ring = [];
         for (let i = 0; i < segments; i++) {
             const theta = (i / segments) * Math.PI * 2;
-            // Ellipse in local axis-aligned frame, then rotated by `rotation`.
-            const ax = Math.cos(theta) * semiMajor;
-            const ay = Math.sin(theta) * semiMinor;
-            const dx = ax * cosR - ay * sinR;
-            const dy = ax * sinR + ay * cosR;
-            ring.push(this.offsetMetersToLonLat(center, dx, dy));
+            const cosT = Math.cos(theta);
+            // Spherical ellipse polar equation:
+            // tan^2(rho) = tan^2(beta) / (1 - cos^2(theta) * (1 - tan^2(beta) / tan^2(alpha)))
+            const denom = 1 - cosT * cosT * (1 - tanBetaSq / tanAlphaSq);
+            const tanSqRho = tanBetaSq / denom;
+            const rho = Math.atan(Math.sqrt(tanSqRho));
+            const distance = rho * rRadius;
+            const bearing = Math.PI / 2 - (rotation + theta);
+            ring.push(offset(center, distance, bearing));
         }
         ring.push(ring[0]); // close the ring
         return {
@@ -382,9 +394,8 @@ class OlGeometryService {
         const span = endAngle - startAngle;
         for (let i = 0; i <= segments; i++) {
             const theta = startAngle + (i / segments) * span;
-            const dx = Math.cos(theta) * radius;
-            const dy = Math.sin(theta) * radius;
-            ring.push(this.offsetMetersToLonLat(center, dx, dy));
+            const bearing = Math.PI / 2 - theta;
+            ring.push(offset(center, radius, bearing));
         }
         ring.push(center); // close back to apex
         return {
@@ -413,13 +424,9 @@ class OlGeometryService {
         const inner = [];
         for (let i = 0; i < segments; i++) {
             const theta = (i / segments) * Math.PI * 2;
-            const cosT = Math.cos(theta);
-            const sinT = Math.sin(theta);
-            // Outer ring: CCW (theta increasing)
-            outer.push(this.offsetMetersToLonLat(center, cosT * outerRadius, sinT * outerRadius));
-            // Inner ring: CW — sample the SAME thetas but we'll reverse the
-            // accumulator below so the ring is traversed in the opposite sense.
-            inner.push(this.offsetMetersToLonLat(center, cosT * innerRadius, sinT * innerRadius));
+            const bearing = Math.PI / 2 - theta;
+            outer.push(offset(center, outerRadius, bearing));
+            inner.push(offset(center, innerRadius, bearing));
         }
         inner.reverse();
         outer.push(outer[0]);

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

@@ -1279,6 +1279,9 @@ class OlWebGLTileLayerComponent {
     /** Preload low-res tiles up to this many zoom levels */
     preload = input(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "preload" }] : /* istanbul ignore next */ []));
+    /** Style variables for dynamic expressions (e.g. `['var', 'brightness']`) */
+    variables = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "variables" }] : /* istanbul ignore next */ []));
     layer = null;
     constructor() {
         afterNextRender(() => {
@@ -1299,6 +1302,7 @@ class OlWebGLTileLayerComponent {
                         opacity: this.opacity(),
                         zIndex: this.zIndex(),
                         style: this.tileStyle() || {},
+                        ...(this.variables() ? { variables: this.variables() } : {}),
                     });
                     break;
                 case 'xyz':
@@ -1313,6 +1317,7 @@ class OlWebGLTileLayerComponent {
                         zIndex: this.zIndex(),
                         preload: this.preload(),
                         ...(this.tileStyle() ? { style: this.tileStyle() } : {}),
+                        ...(this.variables() ? { variables: this.variables() } : {}),
                     });
                     break;
                 case 'osm':
@@ -1327,6 +1332,7 @@ class OlWebGLTileLayerComponent {
                         zIndex: this.zIndex(),
                         preload: this.preload(),
                         ...(this.tileStyle() ? { style: this.tileStyle() } : {}),
+                        ...(this.variables() ? { variables: this.variables() } : {}),
                     });
                     break;
             }
@@ -1355,6 +1361,12 @@ class OlWebGLTileLayerComponent {
                 }
             }
         });
+        effect(() => {
+            const vars = this.variables();
+            if (vars && this.layer) {
+                this.layer.updateStyleVariables(vars);
+            }
+        });
         // WebGL tile layers also need manual dispose
         this.destroyRef.onDestroy(() => {
             const map = this.mapService.getMap();
@@ -1364,8 +1376,17 @@ class OlWebGLTileLayerComponent {
             }
         });
     }
+    /**
+     * Imperatively update style variables without triggering Angular change detection.
+     * Ideal for 60FPS animations where you don't want to use the declarative [variables] input.
+     */
+    updateVariables(vars) {
+        if (this.layer) {
+            this.layer.updateStyleVariables(vars);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlWebGLTileLayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OlWebGLTileLayerComponent, isStandalone: true, selector: "ol-webgl-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, tileStyle: { classPropertyName: "tileStyle", publicName: "tileStyle", 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 }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.0", type: OlWebGLTileLayerComponent, isStandalone: true, selector: "ol-webgl-tile-layer", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, source: { classPropertyName: "source", publicName: "source", isSignal: true, isRequired: true, transformFunction: null }, url: { classPropertyName: "url", publicName: "url", isSignal: true, isRequired: false, transformFunction: null }, attributions: { classPropertyName: "attributions", publicName: "attributions", isSignal: true, isRequired: false, transformFunction: null }, tileStyle: { classPropertyName: "tileStyle", publicName: "tileStyle", 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 }, preload: { classPropertyName: "preload", publicName: "preload", isSignal: true, isRequired: false, transformFunction: null }, variables: { classPropertyName: "variables", publicName: "variables", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: OlWebGLTileLayerComponent, decorators: [{
             type: Component,
@@ -1373,7 +1394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImpor
                     selector: 'ol-webgl-tile-layer',
                     template: '',
                 }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], attributions: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributions", required: false }] }], tileStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tileStyle", 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 }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: true }] }], url: [{ type: i0.Input, args: [{ isSignal: true, alias: "url", required: false }] }], attributions: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributions", required: false }] }], tileStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "tileStyle", 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 }] }], preload: [{ type: i0.Input, args: [{ isSignal: true, alias: "preload", required: false }] }], variables: [{ type: i0.Input, args: [{ isSignal: true, alias: "variables", required: false }] }] } });
 
 // Provider functions
 function withLayers() {

package/package.json

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

@@ -241,10 +241,17 @@ declare class OlWebGLTileLayerComponent {
     visible: _angular_core.InputSignal<boolean>;
     /** Preload low-res tiles up to this many zoom levels */
     preload: _angular_core.InputSignal<number>;
+    /** Style variables for dynamic expressions (e.g. `['var', 'brightness']`) */
+    variables: _angular_core.InputSignal<Record<string, string | number | boolean | number[]> | undefined>;
     private layer;
     constructor();
+    /**
+     * Imperatively update style variables without triggering Angular change detection.
+     * Ideal for 60FPS animations where you don't want to use the declarative [variables] input.
+     */
+    updateVariables(vars: Record<string, string | number | boolean | number[]>): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlWebGLTileLayerComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlWebGLTileLayerComponent, "ol-webgl-tile-layer", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "source": { "alias": "source"; "required": true; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; "attributions": { "alias": "attributions"; "required": false; "isSignal": true; }; "tileStyle": { "alias": "tileStyle"; "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; }; "preload": { "alias": "preload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlWebGLTileLayerComponent, "ol-webgl-tile-layer", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "source": { "alias": "source"; "required": true; "isSignal": true; }; "url": { "alias": "url"; "required": false; "isSignal": true; }; "attributions": { "alias": "attributions"; "required": false; "isSignal": true; }; "tileStyle": { "alias": "tileStyle"; "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; }; "preload": { "alias": "preload"; "required": false; "isSignal": true; }; "variables": { "alias": "variables"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface LayerInfo {