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,

 

https://account.mapbox.com/auth/signin/  

 

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

https://account.mapbox.com/auth/signup/

 

 

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  & environment.prod.ts file

 

environment.ts

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.

 

mapbox-account

 

 

token-mapbox

 

 

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';

 

@Injectable({

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.

 

this.map.on('load', (event) => {

// add the real time map data

});

 

First, register the map source using the following code

 

this.map.addSource('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

    };

this.map.getSource('customMarker').setData(data);

 

Create A Real Time Map 

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

 

    this.map.addLayer({

      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

 

.map{

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