@angular-helpers/openlayers 0.2.0 → 0.4.0

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

@@ -1,22 +1,453 @@
 import * as i0 from '@angular/core';
-import { Injectable } 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.
+/**
+ * Declarative map popup that projects arbitrary Angular content via `<ng-content>`.
+ *
+ * The component's host element is used directly as the `ol/Overlay`'s element, so
+ * projected children stay inside Angular's component tree and benefit from change
+ * detection without any extra plumbing.
+ *
+ * @example
+ * ```html
+ * <ol-popup
+ *   [position]="selectedCoord()"
+ *   [closeButton]="true"
+ *   [autoPan]="true"
+ *   (closed)="clearSelection()"
+ * >
+ *   <h3>{{ selected()?.name }}</h3>
+ *   <p>{{ selected()?.description }}</p>
+ * </ol-popup>
+ * ```
+ */
+class OlPopupComponent {
+    elementRef = inject(ElementRef);
+    mapService = inject(OlMapService);
+    zoneHelper = inject(OlZoneHelper);
+    /** Map coordinate where the popup is anchored. `null` hides the popup. */
+    position = input(null, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Pixel offset relative to `position`. */
+    offset = input([0, 0], ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+    /** Anchor of the popup element relative to `position`. */
+    positioning = input('bottom-center', ...(ngDevMode ? [{ debugName: "positioning" }] : /* istanbul ignore next */ []));
+    /** Whether the map auto-pans to keep the popup in view. */
+    autoPan = input(false, ...(ngDevMode ? [{ debugName: "autoPan" }] : /* istanbul ignore next */ []));
+    /** Whether to render the default close button. */
+    closeButton = input(false, ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
+    /** Emitted when the popup transitions from visible to hidden (close button or `position` set to null). */
+    closed = output();
+    overlay = null;
+    currentMap = null;
+    wasVisible = false;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.dispose());
+        // Create the overlay lazily when the map becomes ready, then keep it in sync
+        // with the inputs. The overlay's element is THIS component's host element so
+        // projected content lives inside Angular's view tree.
+        this.mapService.onReady((map) => {
+            this.currentMap = map;
+            this.zoneHelper.runOutsideAngular(() => {
+                this.overlay = new Overlay({
+                    element: this.elementRef.nativeElement,
+                    stopEvent: true,
+                });
+            });
+            this.applyState();
+        });
+        effect(() => {
+            // Read every signal so the effect re-runs on any change.
+            this.position();
+            this.offset();
+            this.positioning();
+            this.autoPan();
+            this.applyState();
+        });
+    }
+    /** @internal */
+    onCloseClick() {
+        this.zoneHelper.runInsideAngular(() => this.closed.emit());
+    }
+    applyState() {
+        const overlay = this.overlay;
+        const map = this.currentMap;
+        if (!overlay || !map)
+            return;
+        const position = this.position();
+        this.zoneHelper.runOutsideAngular(() => {
+            overlay.setOffset(this.offset());
+            overlay.setPositioning(this.positioning());
+            const wantsAutoPan = this.autoPan();
+            overlay.set('autoPan', wantsAutoPan);
+            const visible = position !== null;
+            if (visible && !this.wasVisible) {
+                map.addOverlay(overlay);
+            }
+            overlay.setPosition(visible ? position : undefined);
+            if (!visible && this.wasVisible) {
+                map.removeOverlay(overlay);
+                this.zoneHelper.runInsideAngular(() => this.closed.emit());
+            }
+            this.wasVisible = visible;
+        });
+    }
+    dispose() {
+        if (!this.overlay || !this.currentMap)
+            return;
+        const overlay = this.overlay;
+        const map = this.currentMap;
+        this.zoneHelper.runOutsideAngular(() => {
+            if (this.wasVisible)
+                map.removeOverlay(overlay);
+        });
+        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: `
+    @if (closeButton()) {
+      <button type="button" class="ol-popup-close" aria-label="Close" (click)="onCloseClick()">
+        ×
+      </button>
+    }
+    <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: [{
+            type: Component,
+            args: [{ selector: 'ol-popup', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (closeButton()) {
+      <button type="button" class="ol-popup-close" aria-label="Close" (click)="onCloseClick()">
+        ×
+      </button>
+    }
+    <ng-content />
+  `, host: {
+                        role: 'dialog',
+                    }, 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"] }]
+        }], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], positioning: [{ type: i0.Input, args: [{ isSignal: true, alias: "positioning", required: false }] }], autoPan: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoPan", required: false }] }], closeButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButton", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+// OlTooltipDirective — feature hover tooltip on a vector layer.
+/**
+ * Shows a floating tooltip whose text is read from a feature property when the
+ * pointer hovers over it. The tooltip element is appended to the map viewport
+ * and styled minimally; consumers can override via the `.ol-tooltip` CSS hook.
+ *
+ * @example
+ * ```html
+ * <ol-vector-layer
+ *   id="cities"
+ *   [features]="cities()"
+ *   [olTooltip]="'name'"
+ * />
+ * ```
+ *
+ * Apply `[olTooltipLayer]` to limit detection to a single layer (matches the
+ * value of the layer's `id` property). Without it the tooltip reacts to any
+ * feature found at the cursor.
+ */
+class OlTooltipDirective {
+    mapService = inject(OlMapService);
+    zoneHelper = inject(OlZoneHelper);
+    /** Property key to read from the hovered feature. */
+    olTooltip = input.required(...(ngDevMode ? [{ debugName: "olTooltip" }] : /* istanbul ignore next */ []));
+    /** Optional layer id; when set, only features on that layer trigger the tooltip. */
+    olTooltipLayer = input(null, ...(ngDevMode ? [{ debugName: "olTooltipLayer" }] : /* istanbul ignore next */ []));
+    element = null;
+    listener = null;
+    currentMap = null;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.dispose());
+        this.mapService.onReady((map) => {
+            this.currentMap = map;
+            this.zoneHelper.runOutsideAngular(() => {
+                const viewport = map.getViewport();
+                const tooltip = document.createElement('div');
+                tooltip.setAttribute('role', 'tooltip');
+                tooltip.className = 'ol-tooltip';
+                Object.assign(tooltip.style, {
+                    position: 'absolute',
+                    pointerEvents: 'none',
+                    padding: '4px 8px',
+                    background: 'rgba(0, 0, 0, 0.75)',
+                    color: '#fff',
+                    fontSize: '12px',
+                    borderRadius: '4px',
+                    display: 'none',
+                    whiteSpace: 'nowrap',
+                    zIndex: '1000',
+                });
+                viewport.appendChild(tooltip);
+                this.element = tooltip;
+                const handler = (event) => {
+                    this.handlePointerMove(event, map);
+                };
+                map.on('pointermove', handler);
+                this.listener = handler;
+            });
+        });
+    }
+    handlePointerMove(event, map) {
+        const tooltip = this.element;
+        if (!tooltip)
+            return;
+        const layerId = this.olTooltipLayer();
+        const propKey = this.olTooltip();
+        let matched = null;
+        map.forEachFeatureAtPixel(event.pixel, (feature) => {
+            matched = feature;
+            return true;
+        }, {
+            layerFilter: layerId ? (layer) => layer.get('id') === layerId : undefined,
+        });
+        if (!matched) {
+            tooltip.style.display = 'none';
+            return;
+        }
+        const value = matched.get(propKey);
+        if (value === undefined || value === null) {
+            tooltip.style.display = 'none';
+            return;
+        }
+        tooltip.textContent = String(value);
+        tooltip.style.display = 'block';
+        const [x, y] = event.pixel;
+        tooltip.style.left = `${x + 12}px`;
+        tooltip.style.top = `${y + 12}px`;
+    }
+    dispose() {
+        const map = this.currentMap;
+        const listener = this.listener;
+        if (map && listener) {
+            this.zoneHelper.runOutsideAngular(() => map.un('pointermove', listener));
+        }
+        if (this.element?.parentNode) {
+            this.element.parentNode.removeChild(this.element);
+        }
+        this.element = null;
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[olTooltip]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { olTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "olTooltip", required: true }] }], olTooltipLayer: [{ type: i0.Input, args: [{ isSignal: true, alias: "olTooltipLayer", required: false }] }] } });
 
 // OlPopupService
+/**
+ * Manages OpenLayers popup overlays anchored to map coordinates.
+ *
+ * Three content modes:
+ *  - `open()`           — string text or `HTMLElement`
+ *  - `openComponent()`  — dynamic Angular component via `createComponent + hostElement`
+ *  - The `<ol-popup>` component delegates `open()` internally for declarative usage.
+ *
+ * All calls are idempotent by `id`. Calls made before the underlying `ol/Map` is ready
+ * are queued and replayed in order once `OlMapService.onReady` fires.
+ */
 class OlPopupService {
-    showPopup(options) {
-        return 'popup-id';
+    mapService = inject(OlMapService);
+    zoneHelper = inject(OlZoneHelper);
+    envInjector = inject(EnvironmentInjector);
+    appRef = inject(ApplicationRef);
+    popups = new Map();
+    pending = [];
+    flushSubscribed = false;
+    constructor() {
+        inject(DestroyRef).onDestroy(() => this.closeAll());
+    }
+    /**
+     * Open a popup with `string` or `HTMLElement` content.
+     *
+     * Idempotent by `id`: a second call with the same id updates `position` and
+     * `content` of the existing popup instead of creating a duplicate.
+     */
+    open(options) {
+        const id = options.id ?? generateId('popup');
+        const map = this.mapService.getMap();
+        if (!map) {
+            this.queue({ kind: 'open', options: { ...options, id } });
+            return { id, close: () => this.close(id) };
+        }
+        this.createOrUpdate(id, options, map);
+        return { id, close: () => this.close(id) };
+    }
+    /**
+     * Open a popup whose content is a dynamically-instantiated Angular component.
+     *
+     * Uses `createComponent({ environmentInjector, hostElement, bindings, directives })`
+     * (Angular 16.2+) and attaches the host view to `ApplicationRef` so change detection
+     * reaches the rendered component.
+     *
+     * Idempotent by `id`: a previous `ComponentRef` registered under the same id is
+     * destroyed before the new one is created.
+     */
+    openComponent(options) {
+        const id = options.id ?? generateId('popup');
+        const map = this.mapService.getMap();
+        if (!map) {
+            this.queue({
+                kind: 'openComponent',
+                options: { ...options, id },
+            });
+            return { id, close: () => this.close(id) };
+        }
+        this.createOrUpdateComponent(id, options, map);
+        return { id, close: () => this.close(id) };
+    }
+    /** Close and dispose a single popup by id. No-op when the id is unknown. */
+    close(id) {
+        const managed = this.popups.get(id);
+        if (!managed)
+            return;
+        managed.dispose();
+        this.popups.delete(id);
+    }
+    /** Close every managed popup. */
+    closeAll() {
+        const ids = [...this.popups.keys()];
+        for (const id of ids) {
+            this.close(id);
+        }
+        this.pending.length = 0;
+    }
+    // ---------------------------------------------------------------------------
+    // Internals
+    // ---------------------------------------------------------------------------
+    queue(call) {
+        this.pending.push(call);
+        if (this.flushSubscribed)
+            return;
+        this.flushSubscribed = true;
+        this.mapService.onReady((map) => this.flushPending(map));
+    }
+    flushPending(map) {
+        const pending = this.pending.splice(0);
+        for (const call of pending) {
+            if (call.kind === 'open') {
+                this.createOrUpdate(call.options.id, call.options, map);
+            }
+            else {
+                this.createOrUpdateComponent(call.options.id, call.options, map);
+            }
+        }
+    }
+    createOrUpdate(id, options, map) {
+        const existing = this.popups.get(id);
+        if (existing && !existing.componentRef) {
+            // Update position / element of an existing string/HTMLElement popup in place.
+            this.zoneHelper.runOutsideAngular(() => {
+                existing.overlay.setPosition(options.position);
+                replaceElementContent(existing.overlay.getElement(), options.content);
+                applyOverlayConfig(existing.overlay, options);
+            });
+            return;
+        }
+        if (existing) {
+            // Type changed (was a component popup) — dispose and recreate.
+            this.close(id);
+        }
+        this.zoneHelper.runOutsideAngular(() => {
+            const element = buildContentElement(options.content, options.className);
+            const overlay = new Overlay({
+                element,
+                position: options.position,
+                positioning: options.positioning ?? 'bottom-center',
+                offset: options.offset ?? [0, 0],
+                autoPan: options.autoPan ?? false,
+            });
+            map.addOverlay(overlay);
+            const dispose = () => {
+                this.zoneHelper.runOutsideAngular(() => {
+                    map.removeOverlay(overlay);
+                });
+            };
+            this.popups.set(id, { id, overlay, dispose });
+        });
+    }
+    createOrUpdateComponent(id, options, map) {
+        // Always recreate component popups on a second call — simpler and safer than
+        // trying to re-bind inputs on an already-created ref.
+        if (this.popups.has(id)) {
+            this.close(id);
+        }
+        this.zoneHelper.runOutsideAngular(() => {
+            const hostElement = document.createElement('div');
+            if (options.className)
+                hostElement.className = options.className;
+            const ref = createComponent(options.component, {
+                environmentInjector: this.envInjector,
+                elementInjector: options.injector,
+                hostElement,
+                bindings: options.bindings,
+                directives: options.directives?.map((d) => typeof d === 'function' ? d : { type: d.type, bindings: d.bindings ?? [] }),
+            });
+            this.appRef.attachView(ref.hostView);
+            const overlay = new Overlay({
+                element: hostElement,
+                position: options.position,
+                positioning: options.positioning ?? 'bottom-center',
+                offset: options.offset ?? [0, 0],
+                autoPan: options.autoPan ?? false,
+            });
+            map.addOverlay(overlay);
+            const dispose = () => {
+                this.zoneHelper.runOutsideAngular(() => {
+                    map.removeOverlay(overlay);
+                    this.appRef.detachView(ref.hostView);
+                    ref.destroy();
+                });
+            };
+            this.popups.set(id, { id, overlay, componentRef: ref, dispose });
+        });
     }
-    hidePopup(id) { }
-    hideAllPopups() { }
     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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlPopupService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
+// -----------------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------------
+function generateId(prefix) {
+    return `${prefix}-${Math.random().toString(36).slice(2, 10)}`;
+}
+function buildContentElement(content, className) {
+    const wrapper = document.createElement('div');
+    if (className)
+        wrapper.className = className;
+    replaceElementContent(wrapper, content);
+    return wrapper;
+}
+function replaceElementContent(element, content) {
+    while (element.firstChild)
+        element.removeChild(element.firstChild);
+    if (typeof content === 'string') {
+        element.textContent = content;
+    }
+    else {
+        element.appendChild(content);
+    }
+}
+function applyOverlayConfig(overlay, config) {
+    if (config.positioning)
+        overlay.setPositioning(config.positioning);
+    if (config.offset)
+        overlay.setOffset(config.offset);
+}
 
 function withOverlays() {
-    return { kind: 'overlays', providers: [OlPopupService] };
+    return { kind: 'overlays', providers: [OlLayerService, OlPopupService] };
 }
 function provideOverlays() {
     return withOverlays();
@@ -28,4 +459,4 @@ function provideOverlays() {
  * Generated bundle index. Do not edit.
  */
 
-export { OlPopupService, provideOverlays, withOverlays };
+export { OlPopupComponent, OlPopupService, OlTooltipDirective, provideOverlays, withOverlays };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-helpers/openlayers",
-  "version": "0.2.0",
+  "version": "0.4.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": {
@@ -30,11 +30,15 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@angular/core": "^21.0.0",
     "@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
     }

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

@@ -36,6 +36,22 @@ interface Style {
             width?: number;
         };
     };
+    /**
+     * Icon style for Point features. When set, renderers should produce an
+     * `ol/style/Icon` with the given source. Used by the military symbology
+     * helpers to embed `milsymbol`-generated SVGs as data URLs.
+     */
+    icon?: {
+        /** Image source — typically a `data:image/svg+xml;base64,...` URL */
+        src: string;
+        /** Pixel size `[width, height]` */
+        size?: [number, number];
+        /**
+         * Anchor in fractional coordinates `[x, y]` where `0..1` is the icon
+         * extent. `[0.5, 0.5]` centers the icon on the feature.
+         */
+        anchor?: [number, number];
+    };
     text?: {
         text?: string;
         font?: string;
@@ -83,6 +99,7 @@ declare class OlMapComponent {
     mapDblClick: _angular_core.OutputEmitterRef<MapClickEvent>;
     mapContainerRef: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     private map?;
+    private resizeObserver?;
     constructor();
     private initMap;
     private destroyMap;

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

@@ -11,6 +11,12 @@ import { Feature as Feature$1 } from 'ol';
 type InteractionType = 'select' | 'draw' | 'modify' | 'dragAndDrop';
 interface InteractionConfig {
     active?: boolean;
+    /**
+     * If true, enabling this interaction will automatically disable other active exclusive interactions.
+     * Useful for mutually exclusive tools like Draw and Modify.
+     * @default true
+     */
+    exclusive?: boolean;
 }
 interface SelectConfig extends InteractionConfig {
     layers?: string[];
@@ -178,6 +184,7 @@ declare class InteractionStateService {
     readonly modify$: rxjs.Observable<ModifyEvent>;
     /**
      * Adds a managed interaction to the state.
+     * If the interaction is marked as exclusive, it disables other exclusive interactions.
      * @param interaction - The interaction to add
      */
     addInteraction(interaction: ManagedInteraction): void;

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

@@ -1,7 +1,52 @@
 import * as _angular_core from '@angular/core';
-import { Feature, Style, Layer, Extent, OlFeature } from '@angular-helpers/openlayers/core';
+import { Layer, Extent, Feature, Style, OlFeature } from '@angular-helpers/openlayers/core';
 import BaseLayer from 'ol/layer/Base';
 
+interface LayerConfig extends Layer {
+    type: 'vector' | 'tile' | 'image';
+    extent?: Extent;
+    minResolution?: number;
+    maxResolution?: number;
+}
+interface ClusterConfig {
+    /** Enable clustering (default: false) */
+    enabled: boolean;
+    /** Distance in pixels within which features will be clustered (default: 40) */
+    distance?: number;
+    /** Minimum distance between clusters (default: 20) */
+    minDistance?: number;
+    /** Show count badge on cluster (default: true) */
+    showCount?: boolean;
+    /** Style for individual features when clustering */
+    featureStyle?: Style;
+}
+interface VectorLayerConfig extends LayerConfig {
+    type: 'vector';
+    features?: Feature[];
+    style?: Style | ((feature: Feature) => Style);
+    cluster?: ClusterConfig;
+}
+interface TileLayerConfig extends LayerConfig {
+    type: 'tile';
+    source: SourceConfig;
+}
+interface ImageLayerConfig extends LayerConfig {
+    type: 'image';
+    source: ImageSourceConfig;
+}
+interface SourceConfig {
+    type: 'osm' | 'xyz' | 'wms' | 'wmts';
+    url?: string;
+    attributions?: string | string[];
+    params?: Record<string, unknown>;
+}
+interface ImageSourceConfig {
+    type: 'wms' | 'static';
+    url: string;
+    params?: Record<string, unknown>;
+    imageExtent?: Extent;
+}
+
 declare class OlVectorLayerComponent {
     private layerService;
     private destroyRef;
@@ -11,9 +56,10 @@ declare class OlVectorLayerComponent {
     opacity: _angular_core.InputSignal<number>;
     visible: _angular_core.InputSignal<boolean>;
     style: _angular_core.InputSignal<Style | ((feature: Feature) => Style)>;
+    cluster: _angular_core.InputSignal<ClusterConfig>;
     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; }; "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; }; }, {}, never, 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; }; "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; }; }, {}, never, never, true, never>;
 }
 
 declare class OlTileLayerComponent {
@@ -48,38 +94,6 @@ declare class OlImageLayerComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<OlImageLayerComponent, "ol-image-layer", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "sourceType": { "alias": "sourceType"; "required": true; "isSignal": true; }; "url": { "alias": "url"; "required": true; "isSignal": true; }; "params": { "alias": "params"; "required": false; "isSignal": true; }; "imageExtent": { "alias": "imageExtent"; "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; }; }, {}, never, never, true, never>;
 }
 
-interface LayerConfig extends Layer {
-    type: 'vector' | 'tile' | 'image';
-    extent?: Extent;
-    minResolution?: number;
-    maxResolution?: number;
-}
-interface VectorLayerConfig extends LayerConfig {
-    type: 'vector';
-    features?: Feature[];
-    style?: Style | ((feature: Feature) => Style);
-}
-interface TileLayerConfig extends LayerConfig {
-    type: 'tile';
-    source: SourceConfig;
-}
-interface ImageLayerConfig extends LayerConfig {
-    type: 'image';
-    source: ImageSourceConfig;
-}
-interface SourceConfig {
-    type: 'osm' | 'xyz' | 'wms' | 'wmts';
-    url?: string;
-    attributions?: string | string[];
-    params?: Record<string, unknown>;
-}
-interface ImageSourceConfig {
-    type: 'wms' | 'static';
-    url: string;
-    params?: Record<string, unknown>;
-    imageExtent?: Extent;
-}
-
 interface LayerInfo {
     id: string;
     type: 'vector' | 'tile' | 'image';