Build Real Time Maps In Angular With Mapbox GL


If you’re also obsessed too much with Angular like me & trying to explore user friendly guide to build real time maps in angular with Mapbox GL then this guide is for you! This time I don’t want you to bore you with too many explanations since we got to cover lot of required to take care for! In this blog, I am covering the basics and step by steps guide to build real-time map features with Angular & MapBox GL.


Here’s a highlight of what is covered below to build the Real Time map :-

  1. How to setup angular app and create new angular application
  2. How to create Mapbox Account
  3. How to install MapboxGL, add and access the Mapbox API in angular application
  4. How to customize map styles and get the Mapbox style URL
  5. How to format GeoJSON data
  6. Finally, Build the Live Real Time Map


Setup Angular App

Angular app pre requires node & angular CLI package installed globally using the following code.

Install Nodejs And Npm

Follow the below command and get done your Node.js & NPM installation.


sudo apt install nodejs npm


After installation, you can also verify version of Node.js installed using this,


nodejs --version

npm --version


Once we done with the nodejs & npm package installation.  We must also install angular CLI package so follow the below command.


Install Angular CLI


npm install -g @angular/cli


Create New Angular Application


ng new  mapbox-app


Now, the new angular application is created, next  we will create a mapbox account.


Create Mapbox Account


Mapbox is used to create custom applications that solve problems with maps, data, and spatial analysis.


If you already have an account login the mapbox account then you can directly login using the following link,  


If you don’t have an account then you can signup using the below link here,



signin- Mapbox


Once mapbox account is created then we need to integrate or install a mapbox in angular application.



Install Mapbox GL In Angular Application


You can install the mapbox-gl package using the following code


npm install mapbox-gl --save


Once mapbox-gl  got installed you will need to add the Mapbox CSS library to the index.html file as shown in below fig. You can also get the link for Mapbox CSS library here


mapbox style


Add Mapbox API


Next, add your Mapbox API token to the environment.ts  & file



export const environment = {

production: false,

mapbox: {

  accessToken: 'YOUR_API_TOKEN'




Access Mapbox API Token


How to get YOUR_API_TOKEN. Login the mapbox account go to account options as shown in the following fig.








Once environment config done. Create one service component  where we need to add Mapbox services in it.


Create Service Component In Angular


ng  generate  service mapbox


Once the mapbox-service.ts file got generated and add the below code


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

import { environment } from '../environments/environment';

import * as mapboxgl from 'mapbox-gl';



providedIn: 'root'


export class MapboxService {


constructor() {

  mapboxgl.accessToken = environment.mapbox.accessToken;



getMarkers() {

  const geoJson = [{

    'type': 'Feature',

    'geometry': {

      'type': 'Point',

      'coordinates': ['80.20929129999999', '13.0569951']


    'properties': {

      'message': 'Chennai'


  }, {

    'type': 'Feature',

    'geometry': {

      'type': 'Point',

      'coordinates': ['77.350048', '12.953847' ]


    'properties': {

      'message': 'bangulare'



  return geoJson;




Next, open app.component.ts file and add the mapbox style and default settings using below code.


Custom Mapbox Style


map: mapboxgl.Map;

style = ‘YOUR-STYLE-LINK’;

lat = 13.0569951;

lng = 80.20929129999999;

message = 'Hello World!';


Also Read: How To Build Login Page Using Angular Material Design Clearly Explained


How To Get The Mapbox Style Url


  1. login the mapbox account and select account option.
  2. Then select to Design in Mapbox Studio and you will get the list of added styles.


If you have already added the style select menu icon and code for style as shown in fig. Then you will get the mapbox style and you have to use this style link in app.component.ts file.



mapbox-style (1)



How to add geojson marker in Angular


Here we must build the real time geojson marker using angular service and mapbox objects.'load', (event) => {

// add the real time map data



First, register the map source using the following code'customMarker', {

      type: 'geojson',

      data: {

        type: 'FeatureCollection',

        features: []




Then, get the realtime geojson data and set data source


const markers = this.mapboxService.getMarkers();

    const data = {

      type: 'FeatureCollection',

      features: markers



Create A Real Time Map 

Finally, we have to create map layers with real-time data using following code{

      id: 'customMarketid',

      source: 'customMarker',

      type: 'symbol',

      layout: {

        'text-field': '{message}',

        'text-size': 24,

        'text-transform': 'uppercase',

        'icon-image': 'marker-15',

        'text-offset': [0, 1.5]


      paint: {

        'text-color': '#f16624',

        'text-halo-color': '#fff',

        'text-halo-width': 2




Add the html code as follows in app.component.ts


<div class="map" id="map"></div>


Add the style code as follows in app.component.css or less



width: 100%;

height: 100vh;



Now run the angular application using following command & you can see it in http://localhost:4200


ng serve



mapbox output


Great. We did it guys! give it a try & let us know your experience & difficulties in solving it in comments below.

Contact form 7 Mailchimp extension by Renzo Johnson - Web Developer