Workletjs - Angular Map Component Library

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

Use the root workspace scripts for common local tasks.

pnpm start          # Serve the docs app locally
pnpm build          # Build the ngx-openlayers library
pnpm build:docs     # Build the docs app
pnpm lint           # Lint library and docs
pnpm test           # Run script, library, and docs tests
pnpm test:lib       # Run library tests only
pnpm test:docs      # Run docs tests only
pnpm test:scripts   # Run release/publish script tests only

This library depends on the following peer dependencies:

• @angular/core: ~22.0.0
• @angular/cdk: ~22.0.0
• ol: ~10.9.0

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)