openlayers — Angular Helpers

TypeScriptmain.ts

import { OlMapComponent, OlTileLayerComponent } from '@angular-helpers/openlayers';
  
  @Component({
    imports: [OlMapComponent, OlTileLayerComponent],
    template: `
      <ol-map [center]="[0, 0]" [zoom]="2">
        <ol-tile-layer source="osm" />
      </ol-map>
    `,
  })
  export class MapComponent {}

🗺️
Core

OlMapComponent

Root component for OpenLayers maps. Manages the map instance, view state, and provides dependency injection context for all child components.

Explore API→

OlGeometryService

Service providing geodesic precision mathematical helpers to build approximated polygons (ellipses, circular sectors, donuts) using true geodesic calculations.

OlTimeService

Service providing a high-performance, off-zone animation timing loop (60FPS) using requestAnimationFrame. Essential for running smooth WebGL map animations without triggering global change detection.

📐
Layers

OlTileLayerComponent

Component for tile-based map layers. Supports various tile sources like OSM, XYZ, WMTS, and WMS.

OlVectorLayerComponent

Component for vector layers with reactive feature management. Supports GeoJSON, drawing, and selection.

OlHeatmapLayerComponent

Component for GPU-accelerated heatmap rendering of vector points. Features zoom-aware radius and blur scaling.

OlClusterComponent

Sub-component for clustering vector features under a vector layer. Aggregates nearby points into styled cluster markers.

OlWebGLTileLayerComponent

GPU-accelerated tile layer supporting standard XYZ, OSM, and MVT sources with dynamic style expressions for real-time color manipulation.

OlWebGLVectorLayerComponent

GPU-accelerated vector layer engineered to display massive datasets (10,000+ features) smoothly using WebGL 2.

📍
Overlays

OlPopupComponent

Declarative popup overlay component displaying custom Angular templates projected over specific coordinates on the map.

OlTooltipDirective

Declarative hover directive displaying floating text tooltips when the cursor points to vector layer features.

🎮
Controls

OlZoomControlComponent

Zoom in/out control component with customizable styling and delta values.

OlAttributionControlComponent

Attribution control that displays layer source attributions. Collapsible by default.

OlScaleLineControlComponent

Scale line control that displays the current map scale. Supports metric, imperial, nautical, and US units.

OlFullscreenControlComponent

Fullscreen control that toggles the map to fullscreen mode. Supports custom labels and tooltips.

OlLayerSwitcherComponent

Interactive overlay control allowing users to dynamically toggle the visibility and adjust the opacity of active layers.

OlBasemapSwitcherComponent

Interactive basemap switcher control allowing users to switch between different base tile providers dynamically.

OlTimelineComponent

A visual playback and scrubbing control for time-series maps. Sleek glassmorphic theme designed specifically to orchestrate animations reactively through OlTimeService.

🎖️
Military

OlMilitaryService

Service providing dynamic military symbology (MIL-STD-2525 / APP-6) rendering utilizing the OpenLayers framework and the milsymbol library.

Explore API→

OlTacticalGraphicsService

Service providing styling engines and geometry builders for military tactical graphics (frontlines, attack vectors, control zones).