Workletjs - Angular Map Component Library

Workletjs is a modern map component library built with Angular and OpenLayers, developed under the Nx monorepo architecture and documented using NgDoc.

🚀 Features

• 📌 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

🛠 Prerequisites

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.

📦 Installation

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

🔨 Usage

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"
  ]
}

✨ Example

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 {}

📖 Naming Conventions

• Component selector prefix: wol-*

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

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

☀️ License