Skip to content
Angular binding of mapbox-gl-js
TypeScript JavaScript HTML CSS Shell
Branch: master
Clone or download


Build Status npm version

Angular wrapper for mapbox-gl-js. Expose a bunch of component meant to be simple to use for Angular.

v1.X : Angular 5 & 6 (rxjs 5)

v2.X : Angular 6 & 7 (rxjs 6)

v3.X : Angular 7.2

Include the following components:

How to start

npm install ngx-mapbox-gl mapbox-gl@0.54.0 --save

If using typescript add mapbox-gl types

npm install @types/mapbox-gl@0.51.10 --save-dev

Load the css of mapbox-gl (and mapbox-gl-geocoder if mglGeocoder is used)

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

"styles": [

Or in global css (called styles.css for example in angular-cli)

@import "~mapbox-gl/dist/mapbox-gl.css";
@import "~@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css";

Add this in your polyfill.ts file (

(window as any).global = window;

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

import { NgxMapboxGLModule } from 'ngx-mapbox-gl';

  imports: [
      accessToken: 'TOKEN', // Optionnal, can also be set per map (accessToken input of mgl-map)
      geocoderAccessToken: 'TOKEN' // Optionnal, specify if different from the map access token, can also be set per mgl-geocoder (accessToken input of mgl-geocoder)
export class AppModule {}

How to get a mapbox token:

Note: mapbox-gl can works without token, if you have your own source, example:

You can use to serve vector tiles

Display a map

import { Component } from '@angular/core';

  template: `
    [center]="[-74.50, 40]"
  styles: [`
    mgl-map {
      height: 100%;
      width: 100%;
export class DisplayMapComponent { }
You can’t perform that action at this time.