https://github.com/workletjs/workletjs
📦 A modern map component library built with Angular and OpenLayers
https://github.com/workletjs/workletjs
angular gis map ngx-openlayers openlayers webgis workletjs
Last synced: 2 days ago
JSON representation
📦 A modern map component library built with Angular and OpenLayers
- Host: GitHub
- URL: https://github.com/workletjs/workletjs
- Owner: workletjs
- License: mit
- Created: 2025-10-16T06:46:08.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-12-19T03:34:27.000Z (about 1 month ago)
- Last Synced: 2025-12-21T10:40:53.752Z (about 1 month ago)
- Topics: angular, gis, map, ngx-openlayers, openlayers, webgis, workletjs
- Language: TypeScript
- Homepage: https://workletjs.github.io
- Size: 4.27 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-angular - workletjs - An Angular map component library that provides seamless integration with OpenLayers, enabling developers to create interactive and customizable maps. (Third Party Components / Maps)
- awesome-angular - workletjs - An Angular map component library that provides seamless integration with OpenLayers, enabling developers to create interactive and customizable maps. (Third Party Components / Maps)
README
# Workletjs - Angular Map Component Library
**Workletjs** is an **[Angular](https://angular.dev/)** map component library that provides seamless integration with **[OpenLayers](https://openlayers.org/)**, enabling developers to create interactive and customizable maps with ease.
This library developed under the **[Nx monorepo](https://nx.dev/docs/getting-started/tutorials/angular-monorepo-tutorial)** architecture and documented using **[NgDoc](https://ng-doc.com/)**.
---
## 🚀 Features
- 📌 Built on [OpenLayers](https://openlayers.org/) - high-performance mapping engine
- 🧱 Componentized architecture for interactive map development
- 🧩 Built with [Nx](https://nx.dev) for scalable multi-project workspace
- 📘 Component documentation powered by [NgDoc](https://ngdoc.io/)
- 🧪 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`](https://material.angular.dev/cdk): ^20.2.0
- [`ol`](https://openlayers.org/): ^10.6.1
Make sure these dependencies are installed in your project.
## 📦 Installation
Install the peerDependencies.
```bash
npm install ol @angular/cdk --save
// or
yarn add ol @angular/cdk
// or
pnpm add ol @angular/cdk
```
Install this library.
```bash
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.
```ts
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.
```diff
{
"styles": [
+ "node_modules/ol/ol.css"
]
}
```
## ✨ Example
Here is a simple map with an OSM source.
```ts
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: `
`,
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
[](https://github.com/workletjs/workletjs/blob/master/LICENSE)