Workletjs is a modern map component library built with Angular and OpenLayers, 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
npm install @workletjs/ngx-openlayers --save
// or
yarn add @workletjs/ngx-openlayersImport 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)
