GitHub - workletjs/workletjs: 📦 A modern map component library built with Angular and OpenLayers

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.

🚀 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)