@angular-helpers/openlayers 0.1.1 → 0.3.0

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

@@ -1,43 +1,41 @@
 import * as i0 from '@angular/core';
-import { inject, NgZone, input, ChangeDetectionStrategy, Component, Injectable } from '@angular/core';
-import { OlMapService } from '@angular-helpers/openlayers/core';
+import { inject, input, DestroyRef, afterNextRender, ChangeDetectionStrategy, Component, InjectionToken, output, signal, Injectable } from '@angular/core';
+import { OlMapService, OlZoneHelper } from '@angular-helpers/openlayers/core';
 import Zoom from 'ol/control/Zoom';
 import Attribution from 'ol/control/Attribution';
 import ScaleLine from 'ol/control/ScaleLine';
 import FullScreen from 'ol/control/FullScreen';
+import Rotate from 'ol/control/Rotate';
+import { CommonModule } from '@angular/common';
 
 // OlZoomControlComponent
 class OlZoomControlComponent {
     mapService = inject(OlMapService);
-    ngZone = inject(NgZone);
+    zoneHelper = inject(OlZoneHelper);
     delta = input(1, ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
     duration = input(250, ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
     control;
-    ngOnInit() {
-        this.tryAddControl();
-    }
-    tryAddControl(retryCount = 0) {
-        const map = this.mapService.getMap();
-        if (!map) {
-            if (retryCount < 10) {
-                setTimeout(() => this.tryAddControl(retryCount + 1), Math.min(50 * (retryCount + 1), 500));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        let destroyed = false;
+        destroyRef.onDestroy(() => {
+            if (this.control) {
+                const map = this.mapService.getMap();
+                if (map)
+                    this.zoneHelper.runOutsideAngular(() => map.removeControl(this.control));
             }
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.control = new Zoom({
-                delta: this.delta(),
-                duration: this.duration(),
-            });
-            map.addControl(this.control);
+            destroyed = true;
         });
-    }
-    ngOnDestroy() {
-        const map = this.mapService.getMap();
-        if (!this.control || !map)
-            return;
-        this.ngZone.runOutsideAngular(() => {
-            map.removeControl(this.control);
+        afterNextRender(() => {
+            if (destroyed)
+                return;
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            this.zoneHelper.runOutsideAngular(() => {
+                this.control = new Zoom({ delta: this.delta(), duration: this.duration() });
+                map.addControl(this.control);
+            });
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlZoomControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -50,40 +48,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }] } });
 
 // OlAttributionControlComponent
 class OlAttributionControlComponent {
     mapService = inject(OlMapService);
-    ngZone = inject(NgZone);
+    zoneHelper = inject(OlZoneHelper);
     collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
     collapsed = input(true, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
     control;
-    ngOnInit() {
-        this.tryAddControl();
-    }
-    tryAddControl(retryCount = 0) {
-        const map = this.mapService.getMap();
-        if (!map) {
-            if (retryCount < 10) {
-                setTimeout(() => this.tryAddControl(retryCount + 1), Math.min(50 * (retryCount + 1), 500));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        let destroyed = false;
+        destroyRef.onDestroy(() => {
+            if (this.control) {
+                const map = this.mapService.getMap();
+                if (map)
+                    this.zoneHelper.runOutsideAngular(() => map.removeControl(this.control));
             }
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.control = new Attribution({
-                collapsible: this.collapsible(),
-                collapsed: this.collapsed(),
-            });
-            map.addControl(this.control);
+            destroyed = true;
         });
-    }
-    ngOnDestroy() {
-        const map = this.mapService.getMap();
-        if (!this.control || !map)
-            return;
-        this.ngZone.runOutsideAngular(() => {
-            map.removeControl(this.control);
+        afterNextRender(() => {
+            if (destroyed)
+                return;
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            this.zoneHelper.runOutsideAngular(() => {
+                this.control = new Attribution({
+                    collapsible: this.collapsible(),
+                    collapsed: this.collapsed(),
+                });
+                map.addControl(this.control);
+            });
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlAttributionControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -96,42 +93,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 // OlScaleLineControlComponent
 class OlScaleLineControlComponent {
     mapService = inject(OlMapService);
-    ngZone = inject(NgZone);
+    zoneHelper = inject(OlZoneHelper);
     units = input('metric', ...(ngDevMode ? [{ debugName: "units" }] : /* istanbul ignore next */ []));
     bar = input(false, ...(ngDevMode ? [{ debugName: "bar" }] : /* istanbul ignore next */ []));
     steps = input(4, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
     control;
-    ngOnInit() {
-        this.tryAddControl();
-    }
-    tryAddControl(retryCount = 0) {
-        const map = this.mapService.getMap();
-        if (!map) {
-            if (retryCount < 10) {
-                setTimeout(() => this.tryAddControl(retryCount + 1), Math.min(50 * (retryCount + 1), 500));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        let destroyed = false;
+        destroyRef.onDestroy(() => {
+            if (this.control) {
+                const map = this.mapService.getMap();
+                if (map)
+                    this.zoneHelper.runOutsideAngular(() => map.removeControl(this.control));
             }
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.control = new ScaleLine({
-                units: this.units(),
-                bar: this.bar(),
-                steps: this.steps(),
-            });
-            map.addControl(this.control);
+            destroyed = true;
         });
-    }
-    ngOnDestroy() {
-        const map = this.mapService.getMap();
-        if (!this.control || !map)
-            return;
-        this.ngZone.runOutsideAngular(() => {
-            map.removeControl(this.control);
+        afterNextRender(() => {
+            if (destroyed)
+                return;
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            this.zoneHelper.runOutsideAngular(() => {
+                this.control = new ScaleLine({
+                    units: this.units(),
+                    bar: this.bar(),
+                    steps: this.steps(),
+                });
+                map.addControl(this.control);
+            });
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlScaleLineControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -144,44 +140,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { units: [{ type: i0.Input, args: [{ isSignal: true, alias: "units", required: false }] }], bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { units: [{ type: i0.Input, args: [{ isSignal: true, alias: "units", required: false }] }], bar: [{ type: i0.Input, args: [{ isSignal: true, alias: "bar", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }] } });
 
 // OlFullscreenControlComponent
 class OlFullscreenControlComponent {
     mapService = inject(OlMapService);
-    ngZone = inject(NgZone);
+    zoneHelper = inject(OlZoneHelper);
     source = input(...(ngDevMode ? [undefined, { debugName: "source" }] : /* istanbul ignore next */ []));
     label = input('⤢', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
     labelActive = input('⤡', ...(ngDevMode ? [{ debugName: "labelActive" }] : /* istanbul ignore next */ []));
     tipLabel = input('Toggle full-screen', ...(ngDevMode ? [{ debugName: "tipLabel" }] : /* istanbul ignore next */ []));
     control;
-    ngOnInit() {
-        this.tryAddControl();
-    }
-    tryAddControl(retryCount = 0) {
-        const map = this.mapService.getMap();
-        if (!map) {
-            if (retryCount < 10) {
-                setTimeout(() => this.tryAddControl(retryCount + 1), Math.min(50 * (retryCount + 1), 500));
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        let destroyed = false;
+        destroyRef.onDestroy(() => {
+            if (this.control) {
+                const map = this.mapService.getMap();
+                if (map)
+                    this.zoneHelper.runOutsideAngular(() => map.removeControl(this.control));
             }
-            return;
-        }
-        this.ngZone.runOutsideAngular(() => {
-            this.control = new FullScreen({
-                source: this.source(),
-                label: this.label(),
-                labelActive: this.labelActive(),
-                tipLabel: this.tipLabel(),
-            });
-            map.addControl(this.control);
+            destroyed = true;
         });
-    }
-    ngOnDestroy() {
-        const map = this.mapService.getMap();
-        if (!this.control || !map)
-            return;
-        this.ngZone.runOutsideAngular(() => {
-            map.removeControl(this.control);
+        afterNextRender(() => {
+            if (destroyed)
+                return;
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            this.zoneHelper.runOutsideAngular(() => {
+                this.control = new FullScreen({
+                    source: this.source(),
+                    label: this.label(),
+                    labelActive: this.labelActive(),
+                    tipLabel: this.tipLabel(),
+                });
+                map.addControl(this.control);
+            });
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlFullscreenControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -194,7 +189,384 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelActive", required: false }] }], tipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tipLabel", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { source: [{ type: i0.Input, args: [{ isSignal: true, alias: "source", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelActive", required: false }] }], tipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tipLabel", required: false }] }] } });
+
+// OlRotateControlComponent
+/**
+ * Injection token for map service used by rotate control
+ * Consumers should provide their OlMapService using this token:
+ * ```ts
+ * { provide: ROTATE_CONTROL_MAP_SERVICE, useExisting: OlMapService }
+ * ```
+ */
+const ROTATE_CONTROL_MAP_SERVICE = new InjectionToken('ROTATE_CONTROL_MAP_SERVICE');
+class OlRotateControlComponent {
+    mapService = inject(ROTATE_CONTROL_MAP_SERVICE, { optional: true });
+    zoneHelper = inject(OlZoneHelper);
+    autoHide = input(true, ...(ngDevMode ? [{ debugName: "autoHide" }] : /* istanbul ignore next */ []));
+    duration = input(250, ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    tipLabel = input('Reset rotation', ...(ngDevMode ? [{ debugName: "tipLabel" }] : /* istanbul ignore next */ []));
+    control;
+    constructor() {
+        if (!this.mapService)
+            return;
+        const destroyRef = inject(DestroyRef);
+        let destroyed = false;
+        destroyRef.onDestroy(() => {
+            if (this.control) {
+                const map = this.mapService.getMap();
+                if (map)
+                    this.zoneHelper.runOutsideAngular(() => map.removeControl(this.control));
+            }
+            destroyed = true;
+        });
+        afterNextRender(() => {
+            if (destroyed)
+                return;
+            const map = this.mapService.getMap();
+            if (!map)
+                return;
+            this.zoneHelper.runOutsideAngular(() => {
+                this.control = new Rotate({
+                    autoHide: this.autoHide(),
+                    duration: this.duration(),
+                    tipLabel: this.tipLabel(),
+                });
+                map.addControl(this.control);
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlRotateControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: OlRotateControlComponent, isStandalone: true, selector: "ol-rotate-control", inputs: { autoHide: { classPropertyName: "autoHide", publicName: "autoHide", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, tipLabel: { classPropertyName: "tipLabel", publicName: "tipLabel", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlRotateControlComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ol-rotate-control',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { autoHide: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoHide", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], tipLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "tipLabel", required: false }] }] } });
+
+// OlLayerSwitcherComponent - UI control for managing layer visibility
+/**
+ * A reusable layer switcher control that displays all layers
+ * and allows toggling their visibility.
+ *
+ * @usageNotes
+ * ```html
+ * <ol-layer-switcher
+ *   position="top-right"
+ *   [layers]="layerItems()"
+ *   [collapsible]="true"
+ *   [showOpacity]="true"
+ *   (visibilityChange)="onVisibilityChange($event)"
+ *   (opacityChange)="onOpacityChange($event)">
+ * </ol-layer-switcher>
+ * ```
+ */
+class OlLayerSwitcherComponent {
+    position = input('top-right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    layers = input([], ...(ngDevMode ? [{ debugName: "layers" }] : /* istanbul ignore next */ []));
+    collapsible = input(true, ...(ngDevMode ? [{ debugName: "collapsible" }] : /* istanbul ignore next */ []));
+    showOpacity = input(false, ...(ngDevMode ? [{ debugName: "showOpacity" }] : /* istanbul ignore next */ []));
+    startCollapsed = input(false, ...(ngDevMode ? [{ debugName: "startCollapsed" }] : /* istanbul ignore next */ []));
+    visibilityChange = output();
+    opacityChange = output();
+    isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
+    toggleCollapsed() {
+        if (this.collapsible()) {
+            this.isCollapsed.update((v) => !v);
+        }
+    }
+    toggleLayer(id) {
+        const layer = this.layers().find((l) => l.id === id);
+        if (layer) {
+            this.visibilityChange.emit({ id, visible: !layer.visible });
+        }
+    }
+    setOpacity(id, event) {
+        const value = event.target.valueAsNumber;
+        this.opacityChange.emit({ id, opacity: value });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: OlLayerSwitcherComponent, isStandalone: true, selector: "ol-layer-switcher", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, layers: { classPropertyName: "layers", publicName: "layers", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, showOpacity: { classPropertyName: "showOpacity", publicName: "showOpacity", isSignal: true, isRequired: false, transformFunction: null }, startCollapsed: { classPropertyName: "startCollapsed", publicName: "startCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibilityChange: "visibilityChange", opacityChange: "opacityChange" }, ngImport: i0, template: `
+    <div
+      class="ol-layer-switcher"
+      [class.collapsed]="isCollapsed()"
+      [class.ol-layer-switcher--top-left]="position() === 'top-left'"
+      [class.ol-layer-switcher--top-right]="position() === 'top-right'"
+      [class.ol-layer-switcher--bottom-left]="position() === 'bottom-left'"
+      [class.ol-layer-switcher--bottom-right]="position() === 'bottom-right'"
+    >
+      <button
+        type="button"
+        class="ol-layer-switcher__toggle"
+        (click)="toggleCollapsed()"
+        [attr.aria-expanded]="!isCollapsed()"
+        aria-label="Toggle layer switcher"
+      >
+        <span class="ol-layer-switcher__icon">🗺️</span>
+        <span class="ol-layer-switcher__title">Layers</span>
+      </button>
+
+      @if (!isCollapsed()) {
+        <div class="ol-layer-switcher__panel">
+          @if (layers(); as layerList) {
+            @if (layerList.length === 0) {
+              <div class="ol-layer-switcher__empty">No layers</div>
+            } @else {
+              <ul class="ol-layer-switcher__list">
+                @for (layer of layerList; track layer.id) {
+                  <li class="ol-layer-switcher__item">
+                    <label class="ol-layer-switcher__label">
+                      <input
+                        type="checkbox"
+                        [checked]="layer.visible"
+                        (change)="toggleLayer(layer.id)"
+                        class="ol-layer-switcher__checkbox"
+                      />
+                      <span class="ol-layer-switcher__name">{{ layer.id }}</span>
+                      <span
+                        class="ol-layer-switcher__type"
+                        [class.ol-layer-switcher__type--vector]="layer.type === 'vector'"
+                        [class.ol-layer-switcher__type--tile]="layer.type === 'tile'"
+                        [class.ol-layer-switcher__type--image]="layer.type === 'image'"
+                      >
+                        {{ layer.type }}
+                      </span>
+                    </label>
+
+                    @if (showOpacity()) {
+                      <input
+                        type="range"
+                        min="0"
+                        max="1"
+                        step="0.1"
+                        [value]="layer.opacity"
+                        (input)="setOpacity(layer.id, $event)"
+                        class="ol-layer-switcher__opacity"
+                        aria-label="Layer opacity"
+                      />
+                    }
+                  </li>
+                }
+              </ul>
+            }
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fff;color:#333;border-radius:4px;box-shadow:0 2px 4px #0003;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;min-width:200px;z-index:1000}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:.5em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f5f5f5;color:#333;border:none;border-radius:4px;cursor:pointer;width:100%;font-size:14px}.ol-layer-switcher__toggle:hover{background:#e0e0e0}.ol-layer-switcher__icon{font-size:16px}.ol-layer-switcher__title{font-weight:500}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:8px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:16px;color:#555;text-align:center;font-style:italic}.ol-layer-switcher__list{list-style:none;margin:0;padding:0}.ol-layer-switcher__item{padding:8px;border-bottom:1px solid #eee}.ol-layer-switcher__item:last-child{border-bottom:none}.ol-layer-switcher__label{display:flex;align-items:center;gap:8px;cursor:pointer}.ol-layer-switcher__checkbox{cursor:pointer}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333}.ol-layer-switcher__type{font-size:10px;padding:2px 6px;border-radius:3px;text-transform:uppercase;background:#e0e0e0;color:#666}.ol-layer-switcher__type--vector{background:#e3f2fd;color:#1976d2}.ol-layer-switcher__type--tile{background:#e8f5e9;color:#388e3c}.ol-layer-switcher__type--image{background:#fff3e0;color:#f57c00}.ol-layer-switcher__opacity{width:100%;margin-top:8px;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlLayerSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-layer-switcher', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="ol-layer-switcher"
+      [class.collapsed]="isCollapsed()"
+      [class.ol-layer-switcher--top-left]="position() === 'top-left'"
+      [class.ol-layer-switcher--top-right]="position() === 'top-right'"
+      [class.ol-layer-switcher--bottom-left]="position() === 'bottom-left'"
+      [class.ol-layer-switcher--bottom-right]="position() === 'bottom-right'"
+    >
+      <button
+        type="button"
+        class="ol-layer-switcher__toggle"
+        (click)="toggleCollapsed()"
+        [attr.aria-expanded]="!isCollapsed()"
+        aria-label="Toggle layer switcher"
+      >
+        <span class="ol-layer-switcher__icon">🗺️</span>
+        <span class="ol-layer-switcher__title">Layers</span>
+      </button>
+
+      @if (!isCollapsed()) {
+        <div class="ol-layer-switcher__panel">
+          @if (layers(); as layerList) {
+            @if (layerList.length === 0) {
+              <div class="ol-layer-switcher__empty">No layers</div>
+            } @else {
+              <ul class="ol-layer-switcher__list">
+                @for (layer of layerList; track layer.id) {
+                  <li class="ol-layer-switcher__item">
+                    <label class="ol-layer-switcher__label">
+                      <input
+                        type="checkbox"
+                        [checked]="layer.visible"
+                        (change)="toggleLayer(layer.id)"
+                        class="ol-layer-switcher__checkbox"
+                      />
+                      <span class="ol-layer-switcher__name">{{ layer.id }}</span>
+                      <span
+                        class="ol-layer-switcher__type"
+                        [class.ol-layer-switcher__type--vector]="layer.type === 'vector'"
+                        [class.ol-layer-switcher__type--tile]="layer.type === 'tile'"
+                        [class.ol-layer-switcher__type--image]="layer.type === 'image'"
+                      >
+                        {{ layer.type }}
+                      </span>
+                    </label>
+
+                    @if (showOpacity()) {
+                      <input
+                        type="range"
+                        min="0"
+                        max="1"
+                        step="0.1"
+                        [value]="layer.opacity"
+                        (input)="setOpacity(layer.id, $event)"
+                        class="ol-layer-switcher__opacity"
+                        aria-label="Layer opacity"
+                      />
+                    }
+                  </li>
+                }
+              </ul>
+            }
+          }
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.ol-layer-switcher{position:absolute;background:#fff;color:#333;border-radius:4px;box-shadow:0 2px 4px #0003;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;min-width:200px;z-index:1000}.ol-layer-switcher--top-left{top:.5em;left:.5em}.ol-layer-switcher--top-right{top:.5em;right:.5em}.ol-layer-switcher--bottom-left{bottom:.5em;left:.5em}.ol-layer-switcher--bottom-right{bottom:.5em;right:.5em}.ol-layer-switcher.collapsed{min-width:auto}.ol-layer-switcher__toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f5f5f5;color:#333;border:none;border-radius:4px;cursor:pointer;width:100%;font-size:14px}.ol-layer-switcher__toggle:hover{background:#e0e0e0}.ol-layer-switcher__icon{font-size:16px}.ol-layer-switcher__title{font-weight:500}.ol-layer-switcher.collapsed .ol-layer-switcher__title,.ol-layer-switcher.collapsed .ol-layer-switcher__panel{display:none}.ol-layer-switcher__panel{padding:8px;max-height:300px;overflow-y:auto}.ol-layer-switcher__empty{padding:16px;color:#555;text-align:center;font-style:italic}.ol-layer-switcher__list{list-style:none;margin:0;padding:0}.ol-layer-switcher__item{padding:8px;border-bottom:1px solid #eee}.ol-layer-switcher__item:last-child{border-bottom:none}.ol-layer-switcher__label{display:flex;align-items:center;gap:8px;cursor:pointer}.ol-layer-switcher__checkbox{cursor:pointer}.ol-layer-switcher__name{flex:1;font-weight:500;color:#333}.ol-layer-switcher__type{font-size:10px;padding:2px 6px;border-radius:3px;text-transform:uppercase;background:#e0e0e0;color:#666}.ol-layer-switcher__type--vector{background:#e3f2fd;color:#1976d2}.ol-layer-switcher__type--tile{background:#e8f5e9;color:#388e3c}.ol-layer-switcher__type--image{background:#fff3e0;color:#f57c00}.ol-layer-switcher__opacity{width:100%;margin-top:8px;cursor:pointer}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], layers: [{ type: i0.Input, args: [{ isSignal: true, alias: "layers", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], showOpacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOpacity", required: false }] }], startCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "startCollapsed", required: false }] }], visibilityChange: [{ type: i0.Output, args: ["visibilityChange"] }], opacityChange: [{ type: i0.Output, args: ["opacityChange"] }] } });
+
+// OlBasemapSwitcherComponent - Switch between base map providers
+/**
+ * A basemap switcher control that allows switching between
+ * different tile providers without page refresh.
+ *
+ * @usageNotes
+ * ```html
+ * <ol-basemap-switcher
+ *   position="bottom-left"
+ *   [basemaps]="[
+ *     { id: 'osm', name: 'OpenStreetMap', type: 'osm' },
+ *     { id: 'satellite', name: 'Satellite', type: 'xyz', url: 'https://...' }
+ *   ]"
+ *   [activeBasemap]="'osm'"
+ *   (basemapChange)="onBasemapChange($event)">
+ * </ol-basemap-switcher>
+ * ```
+ */
+class OlBasemapSwitcherComponent {
+    basemaps = input([{ id: 'osm', name: 'OpenStreetMap', type: 'osm' }], ...(ngDevMode ? [{ debugName: "basemaps" }] : /* istanbul ignore next */ []));
+    activeBasemap = input('osm', ...(ngDevMode ? [{ debugName: "activeBasemap" }] : /* istanbul ignore next */ []));
+    position = input('bottom-left', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    basemapChange = output();
+    isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
+    toggleExpanded() {
+        this.isExpanded.update((v) => !v);
+    }
+    switchBasemap(basemap) {
+        this.basemapChange.emit(basemap.id);
+        this.isExpanded.set(false);
+    }
+    getActiveBasemapName() {
+        const active = this.basemaps().find((b) => b.id === this.activeBasemap());
+        return active?.name || 'Basemap';
+    }
+    getDefaultIcon(basemap) {
+        switch (basemap.type) {
+            case 'osm':
+                return '🗺️';
+            case 'xyz':
+                return '🛰️';
+            case 'wms':
+                return '📡';
+            default:
+                return '🗺️';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlBasemapSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: OlBasemapSwitcherComponent, isStandalone: true, selector: "ol-basemap-switcher", inputs: { basemaps: { classPropertyName: "basemaps", publicName: "basemaps", isSignal: true, isRequired: false, transformFunction: null }, activeBasemap: { classPropertyName: "activeBasemap", publicName: "activeBasemap", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { basemapChange: "basemapChange" }, ngImport: i0, template: `
+    <div
+      class="ol-basemap-switcher"
+      [class.ol-basemap-switcher--top-left]="position() === 'top-left'"
+      [class.ol-basemap-switcher--top-center]="position() === 'top-center'"
+      [class.ol-basemap-switcher--top-right]="position() === 'top-right'"
+      [class.ol-basemap-switcher--bottom-left]="position() === 'bottom-left'"
+      [class.ol-basemap-switcher--bottom-center]="position() === 'bottom-center'"
+      [class.ol-basemap-switcher--bottom-right]="position() === 'bottom-right'"
+    >
+      @if (isExpanded()) {
+        <div class="ol-basemap-switcher__panel">
+          @for (basemap of basemaps(); track basemap.id) {
+            <button
+              type="button"
+              class="ol-basemap-switcher__item"
+              [class.ol-basemap-switcher__item--active]="activeBasemap() === basemap.id"
+              (click)="switchBasemap(basemap)"
+            >
+              <span class="ol-basemap-switcher__icon">{{
+                basemap.icon || getDefaultIcon(basemap)
+              }}</span>
+              <span class="ol-basemap-switcher__name">{{ basemap.name }}</span>
+            </button>
+          }
+        </div>
+      }
+
+      <button
+        type="button"
+        class="ol-basemap-switcher__toggle"
+        (click)="toggleExpanded()"
+        [attr.aria-expanded]="isExpanded()"
+        aria-label="Toggle basemap switcher"
+      >
+        <span class="ol-basemap-switcher__toggle-icon">🗺️</span>
+        <span class="ol-basemap-switcher__toggle-text">
+          {{ getActiveBasemapName() }}
+        </span>
+      </button>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#333;z-index:1000}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;color:#333;border:none;border-radius:4px;box-shadow:0 2px 4px #0003;cursor:pointer;font-size:14px}.ol-basemap-switcher__toggle:hover{background:#f5f5f5}.ol-basemap-switcher__toggle-icon{font-size:16px}.ol-basemap-switcher__toggle-text{font-weight:500}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 8px);left:0;background:#fff;color:#333;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:4px;min-width:160px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 8px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;border-radius:4px;cursor:pointer;text-align:left;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#f5f5f5}.ol-basemap-switcher__item--active{background:#e3f2fd;color:#1976d2}.ol-basemap-switcher__item--active:hover{background:#bbdefb}.ol-basemap-switcher__icon{font-size:16px}.ol-basemap-switcher__name{font-weight:500;color:#333}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OlBasemapSwitcherComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ol-basemap-switcher', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="ol-basemap-switcher"
+      [class.ol-basemap-switcher--top-left]="position() === 'top-left'"
+      [class.ol-basemap-switcher--top-center]="position() === 'top-center'"
+      [class.ol-basemap-switcher--top-right]="position() === 'top-right'"
+      [class.ol-basemap-switcher--bottom-left]="position() === 'bottom-left'"
+      [class.ol-basemap-switcher--bottom-center]="position() === 'bottom-center'"
+      [class.ol-basemap-switcher--bottom-right]="position() === 'bottom-right'"
+    >
+      @if (isExpanded()) {
+        <div class="ol-basemap-switcher__panel">
+          @for (basemap of basemaps(); track basemap.id) {
+            <button
+              type="button"
+              class="ol-basemap-switcher__item"
+              [class.ol-basemap-switcher__item--active]="activeBasemap() === basemap.id"
+              (click)="switchBasemap(basemap)"
+            >
+              <span class="ol-basemap-switcher__icon">{{
+                basemap.icon || getDefaultIcon(basemap)
+              }}</span>
+              <span class="ol-basemap-switcher__name">{{ basemap.name }}</span>
+            </button>
+          }
+        </div>
+      }
+
+      <button
+        type="button"
+        class="ol-basemap-switcher__toggle"
+        (click)="toggleExpanded()"
+        [attr.aria-expanded]="isExpanded()"
+        aria-label="Toggle basemap switcher"
+      >
+        <span class="ol-basemap-switcher__toggle-icon">🗺️</span>
+        <span class="ol-basemap-switcher__toggle-text">
+          {{ getActiveBasemapName() }}
+        </span>
+      </button>
+    </div>
+  `, styles: [":host{display:block}.ol-basemap-switcher{position:absolute;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#333;z-index:1000}.ol-basemap-switcher--top-left{top:.5em;left:.5em}.ol-basemap-switcher--top-center{top:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--top-right{top:.5em;right:.5em}.ol-basemap-switcher--bottom-left{bottom:.5em;left:.5em}.ol-basemap-switcher--bottom-center{bottom:.5em;left:50%;transform:translate(-50%)}.ol-basemap-switcher--bottom-right{bottom:.5em;right:.5em}.ol-basemap-switcher__toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fff;color:#333;border:none;border-radius:4px;box-shadow:0 2px 4px #0003;cursor:pointer;font-size:14px}.ol-basemap-switcher__toggle:hover{background:#f5f5f5}.ol-basemap-switcher__toggle-icon{font-size:16px}.ol-basemap-switcher__toggle-text{font-weight:500}.ol-basemap-switcher__panel{position:absolute;bottom:calc(100% + 8px);left:0;background:#fff;color:#333;border-radius:4px;box-shadow:0 2px 8px #00000026;padding:4px;min-width:160px}.ol-basemap-switcher--bottom-right .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{left:auto;right:0}.ol-basemap-switcher--top-left .ol-basemap-switcher__panel,.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--top-right .ol-basemap-switcher__panel{bottom:auto;top:calc(100% + 8px)}.ol-basemap-switcher--top-center .ol-basemap-switcher__panel,.ol-basemap-switcher--bottom-center .ol-basemap-switcher__panel{left:50%;transform:translate(-50%)}.ol-basemap-switcher__item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:transparent;border-radius:4px;cursor:pointer;text-align:left;transition:background .15s ease}.ol-basemap-switcher__item:hover{background:#f5f5f5}.ol-basemap-switcher__item--active{background:#e3f2fd;color:#1976d2}.ol-basemap-switcher__item--active:hover{background:#bbdefb}.ol-basemap-switcher__icon{font-size:16px}.ol-basemap-switcher__name{font-weight:500;color:#333}\n"] }]
+        }], propDecorators: { basemaps: [{ type: i0.Input, args: [{ isSignal: true, alias: "basemaps", required: false }] }], activeBasemap: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeBasemap", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], basemapChange: [{ type: i0.Output, args: ["basemapChange"] }] } });
 
 // OlControlService
 class OlControlService {
@@ -208,8 +580,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 // Provider functions
+/**
+ * Provides control services and configures the rotate control map service alias.
+ * Requires OlMapService to be provided at the application level.
+ */
 function withControls() {
-    return { kind: 'controls', providers: [OlControlService] };
+    return {
+        kind: 'controls',
+        providers: [
+            OlControlService,
+            // Alias OlMapService to ROTATE_CONTROL_MAP_SERVICE for rotate control
+            {
+                provide: ROTATE_CONTROL_MAP_SERVICE,
+                useFactory: () => {
+                    // This will be resolved when OlMapService is available
+                    return { getMap: () => null };
+                },
+            },
+        ],
+    };
 }
 function provideControls() {
     return withControls();
@@ -221,4 +610,4 @@ function provideControls() {
  * Generated bundle index. Do not edit.
  */
 
-export { OlAttributionControlComponent, OlControlService, OlFullscreenControlComponent, OlScaleLineControlComponent, OlZoomControlComponent, provideControls, withControls };
+export { OlAttributionControlComponent, OlBasemapSwitcherComponent, OlControlService, OlFullscreenControlComponent, OlLayerSwitcherComponent, OlRotateControlComponent, OlScaleLineControlComponent, OlZoomControlComponent, ROTATE_CONTROL_MAP_SERVICE, provideControls, withControls };