Ngx-mapbox-gl-patch NPM

ngx-mapbox-gl

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

Play with ngx-mapbox-gl on stackblitz: https://stackblitz.com/edit/ngx-mapbox-gl

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
mgl-marker
mgl-popup
mgl-marker-cluster

How to start

npm install ngx-mapbox-gl mapbox-gl --save

Also add mapbox-gl types if using typescript

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

Load the css of mapbox-gl

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

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

Or in global css

@import "../node_modules/mapbox-gl/dist/mapbox-gl.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.forRoot({
      accessToken: 'TOKEN' // accessToken can also be set per map (accessToken input of mgl-map)
    })
  ]
})
export class AppModule {}

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 { }