wuenping / ngx-mapbox-gl

Angular binding of mapbox-gl-js

ngx-mapbox-gl

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:

• mgl-map
• mgl-layer
• mgl-geojson-source
• mgl-canvas-source
• mgl-image-source
• mgl-raster-source
• mgl-vector-source
• mgl-video-source
• mgl-image
• mgl-control with builtin control:
  • mglScale
  • mglFullscren
  • mglAttribution
  • mglGeolocate
  • mglNavigation
  • mglGeocoder (see '@mapbox/mapbox-gl-geocoder')
• mgl-marker
• mgl-popup
• mgl-marker-cluster

How to start

npm install ngx-mapbox-gl [email protected] --save

If using typescript add mapbox-gl types

npm install @types/[email protected] --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-cli.json

"styles": [
        ...
        "../node_modules/mapbox-gl/dist/mapbox-gl.css",
        "../node_modules/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css"
      ],

Or in global css

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

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

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

@NgModule({
  imports: [
    ...
    NgxMapboxGLModule.withConfig({
      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: https://www.mapbox.com/help/how-access-tokens-work/

Note: mapbox-gl can works without token, if you have your own source, example: https://stackblitz.com/edit/ngx-mapbox-gl-without-token

You can use https://github.com/klokantech/tileserver-gl to serve vector tiles

Display a map

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

@Component({
  template: `
  <mgl-map
    [style]="'mapbox://styles/mapbox/streets-v9'"
    [zoom]="[9]"
    [center]="[-74.50, 40]"
  >
  </mgl-map>
  `,
  styles: [`
    mgl-map {
      height: 100%;
      width: 100%;
    }
  `]
})
export class DisplayMapComponent { }