node package manager



Join the chat at

Angular2 components for mapbox-gl. This project is currently in development state. Please do not use this in production.


npm install --save angular2-mapbox

Inside your @NgModule, add the MapBoxModule along with your API key for Mapbox (you can grab one here):

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { MapBoxModule }  from 'angular2-mapbox/core';
  imports: [ 
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
export class AppModule { }

Now added the map for mapbox-gl and angular2-mapbox in your system.config.js

(function (global) {
    paths: {
      'npm:': 'node_modules/'
    map: {
      'mapbox-gl': 'npm:mapbox-gl/dist/mapbox-gl.js',
      'angular2-mapbox/core': 'npm:angular2-mapbox/core/core.umd.js'

Lastly, we need to include the mapbox-gl css file. You can do this via @import or including it as a stylesheet in your HTML.

@import "node_modules/mapbox-gl/dist/mapbox-gl";


<link rel="stylesheet" href="node_modules/mapbox-gl/dist/mapbox-gl.css"/>


Now you can start using the angular2 mapbox components.

mapbox[style, center, zoom, hash, index]

<mapbox [center]="[-5.646973, 52.087483]"></mapbox>
  • style: string, defaultsTo = 'mapbox://styles/mapbox/streets-v9'
  • center: array, defaultsTo = [-5.646973, 52.087483]
  • zoom: number, defaultsTo = 6
  • hash: boolean, defaultsTo = false
  • index: number, defaultsTo = 0 (NOTE: Must be used if multiple maps are displayed)

mapbox-marker[image, width, height, coordinates, click, data, flyTo]

<mapbox [center]="[-5.646973, 52.087483]">
        *ngFor="let marker of map.markers"
  • image: string
  • width: number = defaultsTo = 60
  • height: number = defaultsTo = 60
  • coordinates: array
  • click: function
  • data: [object, string]
  • flyTo: number (If present, when clicked the marker is flown to)