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)
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
npm install ngx-mapbox-gl mapbox-gl@0.51.0 --save
If using typescript add mapbox-gl types
npm install @types/mapbox-gl@0.51.0 --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 { }
>= 1.5.5 version is required (angular/angular-cli#5804)
< 1.5.5 version users can use this patch: angular/angular-cli#7931
Add noParse: /(mapbox-gl)\.js$/