Angular wrapper for maplibre-gl. It exposes a bunch of components meant to be simple to use with Angular.

npm version

Demo site

Can be found here (based on the generated gh-pages in this repo): https://maplibre.org/ngx-maplibre-gl/


This is a fork of ngx-mapbox-gl and I would like to thank the maintainers there for their amazing work to build this up. It's truly a great piece of software!

API Documentation

The API documentation can be found here.

How to start

npm install @maplibre/ngx-maplibre-gl maplibre-gl
yarn add @maplibre/ngx-maplibre-gl maplibre-gl

There might be a need to add the following configuration to tsconfig.json file

"compilerOptions": {
"strictNullChecks": false,
"skipLibCheck": true,

Load the CSS of maplibre-gl

For example, with angular-cli add this in angular.json:

"styles": [

Or in the global CSS file (called styles.css for example in angular-cli):

@import '~maplibre-gl/dist/maplibre-gl.css';

Then, in your app's main module (or in any other module), import the MapComponent:

import { Component } from '@angular/core';
import { MapComponent } from '@maplibre/ngx-maplibre-gl';

template: `
[center]="[-74.5, 40]"
styles: [
mgl-map {
height: 100%;
width: 100%;
standalone: true,
imports: [MapComponent],
export class AppComponent {}

Generated using TypeDoc