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.
Other platforms are on SDKs.
Used by 2 products
Mapeak
Navigation app for hiking, biking, and running, formerly Israel Hiking Map, with offline maps updated daily and online maps refreshed three times a day. Users can upload images to Wikimedia and contribute to OpenStreetMap.
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.