An image

Corporate Blogs

Build Real Time Maps In Angular With Mapbox GL

E-Commerce Businesses Need a Mobile App

If you’re also obsessed too much with Angular like me & trying to explore a 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 a lot of required to take care of! 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 set up an angular app and create a 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.

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

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

Install Angular CLI

Create New Angular Application

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

Create a 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 the 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

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

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 the environment config is done. Create one service component where we need to add Mapbox services in it.

Create Service Component In Angular

Once the Mapbox-service.ts file got generated and add the below code
Next, open app.component.ts file and add the Mapbox style and default settings using the below code.

Custom Mapbox Style

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

How To Get The Mapbox Style Url

  1. login to the Mapbox account and select the 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.

First, register the map source using the following code

Then, get the realtime geojson data and set the data source

Create A Real-Time Map 

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

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

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

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

mapbox output

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

Turn your vision to magnificent reality With
Our Web and Mobile Solutions
Professional Life of an IT Consultant Interview with Valentin Crettaz
Written by
An ideal Full Stack Developer, having around 5+ years of experience in web development arena, expertise in AngularJS, Nodejs, PHP and also scoring 6 years of experience in Networking & Window servers. A perfect all-rounder has fondness to play diverse role. he always strives to match perfection and likely remains the best in whatever role he takes.

Thoughts on Build Real Time Maps In Angular With Mapbox GL



HI Manigandan,
From the above code reference, I successfully implement a map-box . Many thanks for this. My product is based on logistics. I need to implement or show a line between to layers. Like here I need to show a color(Red) line between Bangalore and Chennai.
Can you please help.

you can add the code in ngOnInit (). Still, your facing issue add the code URL.

hi!
I really appreciate the way the tutorial is done it is very interesting. However, I’m facing an issue about where to put
“this.map.on(‘load’, (event) => {
// add the real time map data
}”
I need help on this issue

Leave a Comment


You have an Idea. We have the Solution.

We help business evolve with lates technologies and infrastructures tailored to their needs and market trends.