` near the pointer. Use the `.ol-tooltip` class to override the default look. ### `OlPopupService` — programmatic popups Three content modes from a service: ```typescript const popups = inject(OlPopupService); // 1) Plain text / HTMLElement popups.open({ id: 'simple', position: [2.17, 41.38], content: 'Hello map', positioning: 'bottom-center', autoPan: true, }); // 2) Dynamic Angular component (createComponent + hostElement) const handle = popups.openComponent({ id: 'city-popup', position: [2.17, 41.38], component: CityCardComponent, bindings: [ inputBinding('city', () => selected()), outputBinding('closed', () => handle.close()), ], }); ``` `open` is idempotent by `id` and updates the existing overlay in place. `openComponent` always recreates the `ComponentRef` on a repeated id and disposes the previous one (`appRef.detachView` + `ref.destroy`) to avoid CD leaks. Calls made before the map is ready are queued and replayed on `OlMapService.onReady`. ## WebGL Layers — GPU-accelerated rendering Available since `0.3.0` from `@angular-helpers/openlayers/layers`. WebGL layers render directly on the GPU, making them perfect for extremely heavy tile configurations (with real-time styling expressions) and massive coordinate datasets (10,000+ vector points). ### `` — Raster style manipulation Renders tile layers (OSM, XYZ, MVT) via WebGL. Supports the dynamic application of WebGL tile styles (raster expressions) for dynamic, GPU-powered adjustments like brightness, contrast, saturation, and gamma. ```html ``` ### `` — Smooth massive datasets (10k+ features) Renders points, lines, and polygons using WebGL 2. For peak performance, hit detection is disabled by default, and styling must be declared using `FlatStyleLike` expressions rather than standard `ol/style/Style` instances. ```html ``` Rigorous cleanup guarantees that WebGL contexts, framebuffers, and active buffers are fully released on destroy (`layer.dispose()`), preventing GPU leaks. ## Time-Series Animation & Playback Available since `0.5.0` from `@angular-helpers/openlayers/core` and `@angular-helpers/openlayers/controls`. Provides high-performance, GPU-friendly reactive animation controls for time-series geospatial visualization (e.g. weather radar, vehicle tracking, historical paths). ### 1. `OlTimeService` — 60FPS Animation Loop The core service coordinates playback timing. It runs its timing ticks entirely outside the Angular zone (using `requestAnimationFrame`) to prevent triggering global Angular change detection cycles at 60FPS, while exposing reactive signals for component consumption. ```typescript import { inject, Component } from '@angular/core'; import { OlTimeService } from '@angular-helpers/openlayers/core'; @Component({ template: `

Current Time: {{ timeSvc.currentTime() }}

`, }) export class MapAnimation { protected timeSvc = inject(OlTimeService); constructor() { // Start animation loop this.timeSvc.play(); } } ``` ### 2. `` — Premium Playback UI Control A sleek, glassmorphic UI overlay component displaying a timeline scrubber, play/pause toggle, and playback speed multiplier. ```html

``` | Input | Type | Default | Description | | ------------- | -------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------- | | `startTime` | `number` | _Required_ | Start bounds of the time-series (Epoch ms) | | `endTime` | `number` | _Required_ | End bounds of the time-series (Epoch ms) | | `playSpeed` | `number` | `1` | Default speed multiplier (e.g. 1, 5, 10, 60, 3600) | | `loop` | `boolean` | `false` | Loop playback when reaching `endTime` | | `position` | `TimelinePosition` | `'bottom-center'` | Control alignment (`top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`) | | `formatLabel` | `(time: number) => string` | `new Date(t).toLocaleString()` | Custom label formatter for the time display | | Output | Type | Description | | ----------------- | --------- | --------------------------------------------------------------------------------- | | `timeChange` | `number` | Emitted with the current active epoch timestamp when the timeline ticks or scrubs | | `playStateChange` | `boolean` | Emitted when playback transitions between playing (`true`) and paused (`false`) | --- ## Geodesic Geometry Helpers Available from `@angular-helpers/openlayers/core` via `OlGeometryService`. Approximates standard shapes in metric space using true geodesic calculations (`Vincenty`'s formulae via `ol/sphere`). This means your shapes remain mathematically accurate and visually consistent (without map projection scale distortion) across massive global distances. ```typescript import { inject, Component, signal } from '@angular/core'; import { OlGeometryService } from '@angular-helpers/openlayers/core'; import type { Feature } from '@angular-helpers/openlayers/core'; @Component({ imports: [OlMapComponent, OlVectorLayerComponent], template: `

`, }) export class GeodesicDemo { private geomSvc = inject(OlGeometryService); features = signal([]); ngOnInit() { const ellipse = this.geomSvc.createEllipse({ center: [2.17, 41.38], semiMajor: 6_000, semiMinor: 3_000, rotation: Math.PI / 6, }); const sector = this.geomSvc.createSector({ center: [-0.38, 39.47], radius: 8_000, startAngle: Math.PI / 6, endAngle: Math.PI / 2, }); const donut = this.geomSvc.createDonut({ center: [-5.99, 37.39], innerRadius: 5_000, outerRadius: 10_000, }); this.features.set([ellipse, sector, donut]); } } ``` | Method | Output | Notes | | ----------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------- | | `createEllipse(config)` | `Feature` | Optional `rotation` in radians, configurable `segments` (default 64) | | `createSector(config)` | `Feature` | Pie-slice (apex-arc-apex). `startAngle < endAngle ≤ start + 2π` | | `createDonut(config)` | `Feature` | Two rings: outer CCW, inner CW (right-hand rule). Renders as an annular band with the basemap visible through the hole | --- ## Military Symbology & Tactical Graphics Available since `0.4.0` from `@angular-helpers/openlayers/military`. Exposes NATO MIL-STD-2525 symbol rendering backed by the optional [`milsymbol`](https://github.com/spatialillusions/milsymbol) peer dependency, plus tactical military graphic components (frontlines, attack vectors). ### MIL-STD-2525 Point Symbology (`OlMilitaryService`) Lazy-loads the heavy `milsymbol` package dynamically on demand, returning a styled `Feature` so the vector layer renders it natively. ```typescript import { inject, Component, signal } from '@angular/core'; import { OlMilitaryService } from '@angular-helpers/openlayers/military'; import type { Feature } from '@angular-helpers/openlayers/core'; @Component({ imports: [OlMapComponent, OlVectorLayerComponent], providers: [OlMilitaryService], template: `

`, }) export class MilDemo { private milSvc = inject(OlMilitaryService); features = signal([]); async ngOnInit() { const symbol = await this.milSvc.createMilSymbol({ sidc: 'SFGPUCI-----', // Friendly Infantry Unit position: [-3.7, 40.42], size: 36, }); this.features.set([symbol]); } } ``` Install the optional peer dependency if utilizing NATO symbology: ```bash pnpm add milsymbol ``` Three execution strategies: - **`createMilSymbol(config)`** — async; lazy-loads on first call. - **`createMilSymbolSync(config)`** — sync; throws if `milsymbol` is not loaded yet. - **`preloadMilsymbol()`** — fire-and-forget on app init to make the first symbol render synchronous. The service throws clearly on non-browser environments (`createMilSymbol` requires `window`). ### Tactical Graphics (`OlTacticalGraphicsService`) Builds advanced multi-point military tactical graphic features (frontlines with directional teeth, attack arrow coordinates) and provides custom styles. ```typescript import { OlTacticalGraphicsService } from '@angular-helpers/openlayers/military'; const tacticalSvc = inject(OlTacticalGraphicsService); // Create a frontline graphic const frontline = tacticalSvc.createFrontLine( [ [2.1, 41.3], [2.2, 41.4], ], 'friendly', ); // Apply specialized style for frontline teeth const frontlineStyle = tacticalSvc.createFrontLineStyle('#4f46e5', 'friendly'); ``` ## Architecture ### Data vs UI Separation | Use Case | Approach | Example | | ------------------------------------ | --------------------------- | ------------------------------------------------------------- | | **Data** (features, layers, coords) | `@Input()` | `` | | **UI** (buttons, popups, toolbars) | Template/content projection | `` | | **Operations** (animations, queries) | Service via `inject()` | `this.ol.animateView({...})` | ### Sub-Entry Points Import only what you need: ```typescript // Core only (~45KB gzipped) import { OlMapComponent, OlMapService } from '@angular-helpers/openlayers'; // Add layers (~35KB additional) import { OlVectorLayerComponent, withLayers } from '@angular-helpers/openlayers/layers'; // Add controls (~15KB additional) import { OlCustomControlComponent, withControls } from '@angular-helpers/openlayers/controls'; // Add interactions (~40KB additional) import { OlDrawInteractionComponent, withInteractions, } from '@angular-helpers/openlayers/interactions'; // Add military features — pure-math helpers + lazy-loaded milsymbol import { OlMilitaryService, withMilitary } from '@angular-helpers/openlayers/military'; ``` ## API Reference See the [documentation](https://gaspar1992.github.io/angular-helpers/docs/openlayers) for full API reference and examples. ## Comparison with Other Libraries | Feature | ngx-openlayers | ngx-ol-library | IGO2-lib | **This Library** | | --------------------- | -------------- | -------------- | -------- | ------------------------ | | Angular 21+ | ❌ | ✅ | ❌ | ✅ | | Standalone Components | ❌ | ✅ | ❌ | ✅ | | Signals | ❌ | ❌ | ❌ | ✅ | | Modular Loading | ❌ | Partial | ❌ | ✅ | | Programmatic API | ❌ | ❌ | Partial | ✅ | | Military Features | ❌ | ❌ | ❌ | ✅ | | Bundle Size | ~180KB | ~200KB | ~500KB | **~145KB (all modules)** | ## License MIT ## Contributing See the main repository for contribution guidelines.

{{ selected()?.name }}