Workletjs is an Angular map component library that provides seamless integration with OpenLayers, enabling developers to create interactive and customizable maps with ease.

This library developed under the Nx monorepo architecture and documented using NgDoc.

• 📌 Built on OpenLayers - high-performance mapping engine
• 🧱 Componentized architecture for interactive map development
• 🧩 Built with Nx for scalable multi-project workspace
• 📘 Component documentation powered by NgDoc
• 🧪 Testable and maintainable design
• 🌐 Ideal for multi-layer visualization, spatial analysis, and geospatial applications

This library depends on the following peer dependencies:

• @angular/cdk: ^20.2.0
• ol: ^10.6.1

Make sure these dependencies are installed in your project.

Install the peerDependencies.

npm install ol @angular/cdk --save  
// or
yarn add ol @angular/cdk
// or
pnpm add ol @angular/cdk

Install this library.

npm install @workletjs/ngx-openlayers --save
// or
yarn add @workletjs/ngx-openlayers
// or 
pnpm add @workletjs/ngx-openlayers

Import the component modules you want to use into your component.

import { WolMapModule } from '@workletjs/ngx-openlayers/map';
import { WolViewModule } from '@workletjs/ngx-openlayers/view';

@Component({
  imports: [WolMapModule, WolViewModule]
})
export class AppComponent {}

And import style file link in angular.json.

{
  "styles": [
+    "node_modules/ol/ol.css"
  ]
}

Here is a simple map with an OSM source.

import { Component } from '@angular/core';
import { WolTileLayerModule } from '@workletjs/ngx-openlayers/layer/tile';
import { WolMapModule } from '@workletjs/ngx-openlayers/map';
import { WolOSMSourceModule } from '@workletjs/ngx-openlayers/source/osm';
import { WolViewModule } from '@workletjs/ngx-openlayers/view';

@Component({
  selector: 'app-root',
  imports: [WolMapModule, WolViewModule, WolTileLayerModule, WolOSMSourceModule],
  template: `
    <wol-map>
      <wol-view [wolCenter]="[0, 0]" [wolZoom]="2" />
      <wol-tile-layer>
        <wol-osm-source />
      </wol-tile-layer>
    </wol-map>
  `,
  styles: `
    :host > wol-map {
      height: 400px;
    }
  `,
})
export class AppComponent {}

• Component selector prefix: wol-*

• Input property prefix: wol* (e.g. wolControls, wolLayers)

• Output event prefix: wol* (e.g. wolClick, wolViewChange)