Need help with ngx-mapbox-gl?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

280 Stars 99 Forks MIT License 475 Commits 26 Opened issues


Angular binding of mapbox-gl-js

Services available


Need anything else?

Contributors list


Build Status npm version

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

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

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

v3.X : Angular 7.2

v4.X : Angular 8 - 10 (rxjs >= 6.5)

v5.X - 6.X : Angular 9 - 11 (rxjs >= 6.5)

v7.X : Angular 12 (rxjs >= 6.6)

Include the following components:

How to start

npm install ngx-mapbox-gl mapbox-gl
yarn add ngx-mapbox-gl mapbox-gl

If using typescript add mapbox-gl types

npm install @types/mapbox-gl --save-dev
yarn add @types/mapbox-gl --dev

Load the CSS of

is used)

For example, with angular-cli add this in

"styles": [

Or in the global CSS file (called

for example in angular-cli):
@import '~mapbox-gl/dist/mapbox-gl.css';
@import '[email protected]/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

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

@NgModule({ imports: [ ... NgxMapboxGLModule.withConfig({ accessToken: 'TOKEN', // Optional, can also be set per map (accessToken input of mgl-map) geocoderAccessToken: 'TOKEN' // Optional, 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:


cannot work without a token anymore. If you want to keep using their services then make a free account, generate a new token for your application and use it inside your project.

You can use to serve vector tiles.

Display a map:

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

@Component({ template: <mgl-map> </mgl-map> , styles: [ mgl-map { height: 100%; width: 100%; } , ], }) export class DisplayMapComponent {}

Angular libraries

If you want to build a library using this module, you will most likely face this error when building for production:

ERROR: Error during template compile of 'YourLibraryModule'
  Function calls are not supported in decorators, but 'NgxMapboxGLModule' was called.

An unhandled exception occurred: Error during template compile of 'YourLibraryModule' Function calls are not supported in decorators, but 'NgxMapboxGLModule' was called.

This error is generated due to the AOT compilation that occurs in prod mode. The part that will generate the error will be this one:

  imports: [
      accessToken: 'TOKEN',
      geocoderAccessToken: 'TOKEN'

So the error is pretty clear:

Function calls are not supported in decorators but 'NgxMapboxGLModule' was called


To solve this problem, we simply need to provide the accessToken via module configuration rather than how you would normally do:

import {
  MAPBOX_API_KEY, // ngx-mapbox-gl uses this injection token to provide the accessToken
} from 'ngx-mapbox-gl';

export interface IMyLibMapModuleConfig { mapboxToken: string; }

@NgModule({ declarations: [], exports: [], imports: [CommonModule, NgxMapboxGLModule], }) export class MyLibMapModule { static forRoot( config: IMyLibMapModuleConfig ): ModuleWithProviders { return { ngModule: MyLibMapModule, providers: [ { provide: MAPBOX_API_KEY, useValue: config.mapboxToken, }, ], }; } }

We basically create a

static function in the library module, that will accept a configuration object as a parameter. This configuration will provide the actual token to the
module via providers by providing the value from the configuration to the
injection token.

Finally, in the application that will use your

, you will import the module in this way:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module';

import { MyLibMapModule } from 'my-lib';

@NgModule({ declarations: [AppComponent], imports: [ CommonModule, AppRoutingModule,

  mapboxToken: environment.mapboxToken,

], }) export class AppModule {}

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.