@angular-helpers/openlayers 0.3.0 → 0.5.0

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

@@ -1,29 +1,346 @@
 import * as i0 from '@angular/core';
-import { Injectable } from '@angular/core';
+import { inject, resource, Injectable } from '@angular/core';
+import { OlGeometryService } from '@angular-helpers/openlayers/core';
+import { Style, Icon, Stroke, RegularShape, Fill } from 'ol/style';
+import { LineString, Point } from 'ol/geom';
 
-// OlMilitaryService
+/**
+ * Service exposing geometry helpers and MIL-STD-2525 symbology rendering.
+ *
+ * - `createEllipse`, `createSector`, `createDonut` are **pure math** and
+ *   delegate to {@link OlGeometryService} in core.
+ * - `createMilSymbol` uses the milsymbol library via Angular resource loading.
+ */
 class OlMilitaryService {
+    idCounter = 0;
+    geometryService = inject(OlGeometryService);
+    /**
+     * Resource managing the lazy-loading of the milsymbol library.
+     * Angular resource provides native signals for value, loading state, and errors.
+     */
+    msResource = resource({ ...(ngDevMode ? { debugName: "msResource" } : /* istanbul ignore next */ {}), loader: () => import('milsymbol') });
+    /** Signal indicating if the milsymbol library is currently being loaded. */
+    isLoading = this.msResource.isLoading;
+    constructor() { }
+    // ---------------------------------------------------------------------------
+    // Geometry helpers (delegated to core)
+    // ---------------------------------------------------------------------------
+    /**
+     * Build a `Feature<Polygon>` approximating an ellipse centered at
+     * `config.center`. See {@link EllipseConfig} for parameter semantics.
+     */
     createEllipse(config) {
-        return { id: 'ellipse-1', geometry: { type: 'Polygon', coordinates: [] } };
+        return this.geometryService.createEllipse(config);
     }
+    /**
+     * Build a `Feature<Polygon>` for a circular sector (pie slice).
+     * See {@link SectorConfig} for parameter semantics.
+     */
     createSector(config) {
-        return { id: 'sector-1', geometry: { type: 'Polygon', coordinates: [] } };
+        return this.geometryService.createSector(config);
+    }
+    /**
+     * Build a `Feature<Polygon>` for a donut (annular ring).
+     */
+    createDonut(config) {
+        return this.geometryService.createDonut(config);
+    }
+    // ---------------------------------------------------------------------------
+    // MIL-STD-2525 symbology (lazy `milsymbol` load)
+    // ---------------------------------------------------------------------------
+    /**
+     * Pre-load the optional `milsymbol` peer dependency.
+     * Since resource() starts loading immediately, this simply returns a promise
+     * that resolves when the resource is ready.
+     */
+    async preloadMilsymbol() {
+        this.assertBrowser();
+        // We can just await the dynamic import again; the browser/bundler will
+        // return the same module instantly if already loaded by the resource.
+        await import('milsymbol');
+    }
+    /**
+     * Build a MIL-STD-2525 symbol feature asynchronously.
+     * Waits for the milsymbol resource to resolve.
+     */
+    async createMilSymbol(config) {
+        this.assertBrowser();
+        this.assertSidc(config.sidc);
+        // Dynamic import ensures we have the module reference even if called
+        // before the resource signal has propagated.
+        const msModule = await import('milsymbol');
+        return this.buildSymbolFeature(config, msModule);
+    }
+    /**
+     * Build a MIL-STD-2525 symbol feature synchronously.
+     * Throws if `milsymbol` resource is not ready.
+     */
+    createMilSymbolSync(config) {
+        this.assertBrowser();
+        this.assertSidc(config.sidc);
+        const msModule = this.msResource.value();
+        if (!msModule) {
+            throw new Error('milsymbol is not loaded yet. Call preloadMilsymbol() or use the async createMilSymbol().');
+        }
+        return this.buildSymbolFeature(config, msModule);
+    }
+    // ---------------------------------------------------------------------------
+    // Internals
+    // ---------------------------------------------------------------------------
+    nextId(kind) {
+        return `${kind}-${++this.idCounter}`;
+    }
+    buildSymbolFeature(config, msModule) {
+        const { sidc, position, properties, quantity, ...rest } = config;
+        const milOptions = {
+            ...rest,
+            ...(quantity !== undefined ? { quantity: String(quantity) } : {}),
+        };
+        const ms = msModule;
+        const SymbolClass = ms.default?.Symbol || ms.Symbol;
+        const symbol = new SymbolClass(sidc, milOptions);
+        const style = this.symbolToStyleResult(symbol);
+        const mergedProperties = { sidc, ...milOptions, ...properties };
+        return {
+            id: this.nextId('symbol'),
+            geometry: { type: 'Point', coordinates: position },
+            properties: mergedProperties,
+            style: { icon: { src: style.src, size: style.size, anchor: style.anchor } },
+        };
+    }
+    symbolToStyleResult(symbol) {
+        const svg = symbol.asSVG();
+        const { width, height } = symbol.getSize();
+        const { x: ax, y: ay } = symbol.getAnchor();
+        return {
+            src: `data:image/svg+xml;base64,${this.encodeBase64Utf8(svg)}`,
+            size: [width, height],
+            anchor: [ax / width, ay / height],
+        };
+    }
+    encodeBase64Utf8(input) {
+        return btoa(unescape(encodeURIComponent(input)));
+    }
+    /**
+     * Generates a canvas and anchor for a MIL-STD-2525 symbol.
+     * Requires milsymbol to be loaded (synchronous).
+     */
+    createUnitStyle(sidc, selected = false, size = 30) {
+        const msModule = this.msResource.value();
+        if (!msModule)
+            return null;
+        const ms = msModule;
+        const SymbolClass = ms.default?.Symbol || ms.Symbol;
+        const symbol = new SymbolClass(sidc, {
+            size,
+            strokeWidth: selected ? 6 : 4,
+        });
+        const canvas = symbol.asCanvas();
+        const anchor = symbol.getAnchor();
+        return {
+            image: {
+                img: canvas,
+                size: [canvas.width, canvas.height],
+                anchor: [anchor.x / canvas.width, anchor.y / canvas.height],
+            },
+            zIndex: selected ? 100 : 10,
+        };
+    }
+    assertSidc(sidc) {
+        if (typeof sidc !== 'string' || sidc.length < 10) {
+            throw new TypeError('sidc must be a non-empty MIL-STD-2525 SIDC string');
+        }
+    }
+    assertBrowser() {
+        if (typeof window === 'undefined') {
+            throw new Error('createMilSymbol requires a browser environment');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMilitaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMilitaryService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlMilitaryService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+// Tactical Graphics Service — investigation and prototype for military line drawing
+/**
+ * Service providing styles and geometry generators for military tactical graphics
+ * such as battle fronts, axes of attack, and boundaries.
+ *
+ * NOTE: For point symbols (units), it delegates to {@link OlMilitaryService}
+ * for lazy-loading `milsymbol`.
+ */
+class OlTacticalGraphicsService {
+    idCounter = 0;
+    militaryService = inject(OlMilitaryService);
+    /**
+     * Creates a LineString feature representing a battle front.
+     */
+    createFrontLine(coordinates, direction = 'friendly') {
+        return {
+            id: this.nextId('front-line'),
+            geometry: { type: 'LineString', coordinates },
+            properties: { tacticalType: 'front-line', direction },
+        };
     }
-    addMilSymbol(config) {
+    /**
+     * Creates a LineString feature representing an attack arrow.
+     */
+    createAttackArrow(coordinates, direction = 'friendly') {
         return {
-            id: `symbol-${config.sidc}`,
-            geometry: { type: 'Point', coordinates: config.position },
+            id: this.nextId('attack-arrow'),
+            geometry: { type: 'LineString', coordinates },
+            properties: { tacticalType: 'attack-arrow', direction },
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMilitaryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMilitaryService });
+    /**
+     * Creates a Polygon feature representing a control zone.
+     */
+    createControlZone(coordinates, direction = 'friendly') {
+        return {
+            id: this.nextId('control-zone'),
+            geometry: { type: 'Polygon', coordinates },
+            properties: { tacticalType: 'control-zone', direction },
+        };
+    }
+    /**
+     * Creates a Point feature representing a military unit.
+     * @param sidc - Symbol Identification Code (MIL-STD-2525 / APP-6)
+     */
+    createUnit(coordinate, sidc, name) {
+        return {
+            id: this.nextId('unit'),
+            geometry: { type: 'Point', coordinates: coordinate },
+            properties: { tacticalType: 'unit', sidc, name },
+        };
+    }
+    nextId(kind) {
+        return `${kind}-${++this.idCounter}`;
+    }
+    /**
+     * Style for Troop Units using milsymbol.
+     * NOTE: Requires milsymbol to be pre-loaded via OlMilitaryService.
+     */
+    createUnitStyle(sidc, selected = false) {
+        // We delegate the style calculation to militaryService which handles the lazy-load state.
+        const styleProperties = this.militaryService.createUnitStyle(sidc, selected);
+        if (!styleProperties)
+            return null;
+        return new Style({
+            image: new Icon({
+                img: styleProperties.image.img,
+                size: styleProperties.image.size,
+                anchor: styleProperties.image.anchor,
+            }),
+            zIndex: styleProperties.zIndex,
+        });
+    }
+    /**
+     * Style for Battle Fronts (Complex LineString with teeth).
+     */
+    createFrontLineStyle(color, direction = 'friendly') {
+        return (feature, resolution) => {
+            const geometry = feature.getGeometry();
+            if (!(geometry instanceof LineString))
+                return [];
+            const styles = [
+                new Style({
+                    stroke: new Stroke({
+                        color,
+                        width: 3,
+                        lineDash: direction === 'hostile' ? [10, 10] : undefined,
+                    }),
+                }),
+            ];
+            const coords = geometry.getCoordinates();
+            const stride = 40 * resolution; // Spacing between markers
+            let distSoFar = 0;
+            for (let i = 0; i < coords.length - 1; i++) {
+                const p1 = coords[i];
+                const p2 = coords[i + 1];
+                const dx = p2[0] - p1[0];
+                const dy = p2[1] - p1[1];
+                const len = Math.sqrt(dx * dx + dy * dy);
+                const angle = Math.atan2(dy, dx);
+                while (distSoFar < len) {
+                    const ratio = distSoFar / len;
+                    const pos = [p1[0] + dx * ratio, p1[1] + dy * ratio];
+                    // Add "teeth" or spikes along the line
+                    styles.push(new Style({
+                        geometry: new Point(pos),
+                        image: new RegularShape({
+                            fill: new Fill({ color }),
+                            points: direction === 'friendly' ? 20 : 3, // Semicircle vs Triangle
+                            radius: 6,
+                            rotation: -angle + (direction === 'friendly' ? 0 : Math.PI / 2),
+                            angle: direction === 'friendly' ? angle + Math.PI / 2 : 0,
+                        }),
+                    }));
+                    distSoFar += stride;
+                }
+                distSoFar -= len;
+            }
+            return styles;
+        };
+    }
+    /**
+     * Style for Troop Movements (Arrows).
+     */
+    createAttackArrowStyle(color) {
+        return (feature) => {
+            const geometry = feature.getGeometry();
+            if (!(geometry instanceof LineString))
+                return [];
+            const coords = geometry.getCoordinates();
+            if (coords.length < 2)
+                return [];
+            const last = coords[coords.length - 1];
+            const prev = coords[coords.length - 2];
+            const angle = Math.atan2(last[1] - prev[1], last[0] - prev[0]);
+            return [
+                new Style({
+                    stroke: new Stroke({ color, width: 4, lineDash: [8, 4] }),
+                }),
+                new Style({
+                    geometry: new Point(last),
+                    image: new RegularShape({
+                        fill: new Fill({ color }),
+                        points: 3,
+                        radius: 14,
+                        rotation: -angle + Math.PI / 2,
+                    }),
+                }),
+            ];
+        };
+    }
+    /**
+     * Style for Control Zones (Polygons).
+     */
+    createZoneStyle(color, opacity = 0.2) {
+        return new Style({
+            fill: new Fill({ color: this.hexToRgba(color, opacity) }),
+            stroke: new Stroke({ color, width: 2 }),
+        });
+    }
+    hexToRgba(hex, alpha) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTacticalGraphicsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTacticalGraphicsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlMilitaryService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTacticalGraphicsService, decorators: [{
             type: Injectable
         }] });
 
 function withMilitary() {
-    return { kind: 'military', providers: [OlMilitaryService] };
+    return {
+        kind: 'military',
+        providers: [OlMilitaryService, OlTacticalGraphicsService],
+    };
 }
 function provideMilitary() {
     return withMilitary();
@@ -35,4 +352,4 @@ function provideMilitary() {
  * Generated bundle index. Do not edit.
  */
 
-export { OlMilitaryService, provideMilitary, withMilitary };
+export { OlMilitaryService, OlTacticalGraphicsService, provideMilitary, withMilitary };

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

@@ -2,6 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, ElementRef, input, output, DestroyRef, effect, ChangeDetectionStrategy, Component, Directive, EnvironmentInjector, ApplicationRef, createComponent, Injectable } from '@angular/core';
 import Overlay from 'ol/Overlay';
 import { OlMapService, OlZoneHelper } from '@angular-helpers/openlayers/core';
+import { OlLayerService } from '@angular-helpers/openlayers/layers';
 
 // OlPopupComponent — declarative popup with content projection.
 /**
@@ -106,8 +107,8 @@ class OlPopupComponent {
         this.overlay = null;
         this.currentMap = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: OlPopupComponent, isStandalone: true, selector: "ol-popup", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, positioning: { classPropertyName: "positioning", publicName: "positioning", isSignal: true, isRequired: false, transformFunction: null }, autoPan: { classPropertyName: "autoPan", publicName: "autoPan", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { attributes: { "role": "dialog" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: OlPopupComponent, isStandalone: true, selector: "ol-popup", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, positioning: { classPropertyName: "positioning", publicName: "positioning", isSignal: true, isRequired: false, transformFunction: null }, autoPan: { classPropertyName: "autoPan", publicName: "autoPan", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { attributes: { "role": "dialog" } }, ngImport: i0, template: `
     @if (closeButton()) {
       <button type="button" class="ol-popup-close" aria-label="Close" (click)="onCloseClick()">
         ×
@@ -116,7 +117,7 @@ class OlPopupComponent {
     <ng-content />
   `, isInline: true, styles: [":host{display:block;position:relative}.ol-popup-close{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:0;border:none;background:transparent;font-size:16px;line-height:1;cursor:pointer;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlPopupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ol-popup', changeDetection: ChangeDetectionStrategy.OnPush, template: `
     @if (closeButton()) {
@@ -231,10 +232,10 @@ class OlTooltipDirective {
         this.listener = null;
         this.currentMap = null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: OlTooltipDirective, isStandalone: true, selector: "[olTooltip]", inputs: { olTooltip: { classPropertyName: "olTooltip", publicName: "olTooltip", isSignal: true, isRequired: true, transformFunction: null }, olTooltipLayer: { classPropertyName: "olTooltipLayer", publicName: "olTooltipLayer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: OlTooltipDirective, isStandalone: true, selector: "[olTooltip]", inputs: { olTooltip: { classPropertyName: "olTooltip", publicName: "olTooltip", isSignal: true, isRequired: true, transformFunction: null }, olTooltipLayer: { classPropertyName: "olTooltipLayer", publicName: "olTooltipLayer", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[olTooltip]',
@@ -409,10 +410,10 @@ class OlPopupService {
             this.popups.set(id, { id, overlay, componentRef: ref, dispose });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlPopupService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlPopupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlPopupService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlPopupService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: OlPopupService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 // -----------------------------------------------------------------------------
@@ -446,7 +447,7 @@ function applyOverlayConfig(overlay, config) {
 }
 
 function withOverlays() {
-    return { kind: 'overlays', providers: [OlPopupService] };
+    return { kind: 'overlays', providers: [OlLayerService, OlPopupService] };
 }
 function provideOverlays() {
     return withOverlays();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-helpers/openlayers",
-  "version": "0.3.0",
+  "version": "0.5.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": {
@@ -32,9 +32,13 @@
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
+    "milsymbol": "^3.0.0",
     "ol": "^10.0.0"
   },
   "peerDependenciesMeta": {
+    "milsymbol": {
+      "optional": true
+    },
     "ol": {
       "optional": false
     }
@@ -78,4 +82,4 @@
   "dependencies": {
     "tslib": "^2.3.0"
   }
-}
+}

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, OnInit, ElementRef } from '@angular/core';
 import OLMap from 'ol/Map';
 import { OlFeature } from '@angular-helpers/openlayers/core';
 
@@ -87,7 +87,7 @@ interface LayerSwitcherItem {
     /** Display name for the layer */
     name: string;
     /** Type of the layer */
-    type: 'vector' | 'tile' | 'image';
+    type: 'vector' | 'tile' | 'image' | 'heatmap';
     /** Whether the layer is currently visible */
     visible: boolean;
     /** Opacity of the layer (0-1) */
@@ -114,7 +114,7 @@ type LayerSwitcherPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-
  * </ol-layer-switcher>
  * ```
  */
-declare class OlLayerSwitcherComponent {
+declare class OlLayerSwitcherComponent implements OnInit {
     position: _angular_core.InputSignal<"top-left" | "top-right" | "bottom-left" | "bottom-right">;
     layers: _angular_core.InputSignal<LayerSwitcherItem[]>;
     collapsible: _angular_core.InputSignal<boolean>;
@@ -129,6 +129,7 @@ declare class OlLayerSwitcherComponent {
         opacity: number;
     }>;
     protected isCollapsed: _angular_core.WritableSignal<boolean>;
+    ngOnInit(): void;
     toggleCollapsed(): void;
     toggleLayer(id: string): void;
     setOpacity(id: string, event: Event): void;
@@ -197,6 +198,25 @@ interface ControlConfig {
     className?: string;
 }
 
+declare class OlGeolocationControlComponent {
+    private mapService;
+    private zoneHelper;
+    private destroyRef;
+    position: _angular_core.InputSignal<ControlPosition>;
+    trackingChange: _angular_core.OutputEmitterRef<boolean>;
+    controlElement: ElementRef<HTMLElement>;
+    protected tracking: _angular_core.WritableSignal<boolean>;
+    private control?;
+    private geolocation?;
+    private positionFeature?;
+    private accuracyFeature?;
+    private layer?;
+    constructor();
+    toggleTracking(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<OlGeolocationControlComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlGeolocationControlComponent, "ol-geolocation-control", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, { "trackingChange": "trackingChange"; }, never, never, true, never>;
+}
+
 declare class OlControlService {
     addCustomControl(element: HTMLElement, position: ControlPosition): void;
     removeCustomControl(element: HTMLElement): void;
@@ -211,5 +231,5 @@ declare class OlControlService {
 declare function withControls(): OlFeature<'controls'>;
 declare function provideControls(): OlFeature<'controls'>;
 
-export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };
+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 };