ngx-maplibre-gl offers Angular developers a seamless way to integrate MapLibre GL JS maps into their applications with Angular directives, services, and TypeScript support.
Quick start
npm install @maplibre/ngx-maplibre-gl maplibre-gl// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideMaplibreWorker } from '@maplibre/ngx-maplibre-gl/config';
export const appConfig: ApplicationConfig = {
providers: [provideMaplibreWorker('maplibre-gl-worker.mjs')],
};
// app.component.ts
import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';
@Component({
selector: 'app-root',
imports: [MapComponent],
template: `
<mgl-map
[mapStyle]="'https://tiles.openfreemap.org/styles/liberty'"
[center]="[0, 20]"
[zoom]="2"
/>
`,
styles: [`mgl-map { height: 400px; }`],
})
export class AppComponent {}›Setup noteschecked with v22.1.0
@maplibre/ngx-maplibre-gl 22.1.0 needs Angular 22+ (@angular/core >=22) and maplibre-gl >=6. MapComponent is standalone. Import NgxMapLibreGLModule instead if you use many components. In this version [zoom], [pitch], [bearing] and [roll] take plain numbers; older versions used [zoom]="[9]". Two setup steps are required for MapLibre v6, or the worker 404s and no tiles render. (1) In angular.json, under the build target's assets, add two entries with input "node_modules/maplibre-gl/dist" and output "/": one with glob "maplibre-gl-worker.mjs" and one with glob "maplibre-gl-shared.mjs". (2) Add provideMaplibreWorker('maplibre-gl-worker.mjs') to your application providers, next to the ones you already have. Load the CSS: add "./node_modules/maplibre-gl/dist/maplibre-gl.css" to angular.json styles, or put @import 'maplibre-gl/dist/maplibre-gl.css'; in styles.css. The README says you may also need "skipLibCheck": true (and "strictNullChecks": false) in tsconfig.json.
More platforms on Get started.
Used by 2 products
Mapeak
Mapeak, formerly Israel Hiking Map, is a navigation app for hiking, biking, and running with offline maps updated daily and online maps refreshed three times a day. It supports open data by enabling users to upload images to Wikimedia and contribute to OpenStreetMap.
GL JS + Native · Web, iOS, Android
Paddling Spots
Crowdsourced directory of kayaking, canoeing and SUP spots with an interactive map for discovering launch points, rental shops and access info across Europe and Canada.
GL JS · Web