You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
- Role Based Authorization With Firestore and Angular
- Angular Component Test Driven Development (TDD) Starter Guide
- Angular PWA Performance Optimization and Analysis
- Angular 5 Service Worker - Hacker News PWA Tutorial
- SendGrid V3 Transactional Email Cloud Function
- AngularFire2 State Changes With NgRx
- CSV Exports From Firestore Database With Cloud Functions
- Multi-Step Signup With Firebase Email Auth and Angular Reactive Forms
- Angular SEO Part 2 - Firebase Cloud Functions Middleware for Rendertron
- Angular SEO Part 1 - Full Search Engine Optimization Solution for PWAs
Build Realtime Maps in Angular With Mapbox GLEpisode 33 by Jeff Delaney
UPDATE October 2017: This lesson uses AngularFire Version 4. The API has since been updated to version 5 with breaking changes. Firebase also released the new Firestore document database with many awesome features. Please read the V5 Firestore Upgrade Guide to learn how to use the latest and greatest technologies with this tutorial.
In this lesson, I am going to cover the basics of building realtime map features with Angular4, Firebase, and MapBox. Here’s a highlight of what is covered in the code below.
- How to obtain a user’s current location
- How to connect Firebase data with Mapbox
- How to format GeoJSON data.
- How to quickly customize map styles.
Start by signing up for a free Mapbox account, then installing mapbox-gl in your Angular project.
Then you will need to add the Mapbox CSS library to the index.html file.
Lastly, add your Mapox API token to the
If you want to build a custom map quickly, check out Cartogram. Simply upload a picture with color scheme you like and most of the customization work is done for you. Mapbox also has an easy to use console for customizing specific map elements, but I’m not going to cover that in this lesson.
GeoJSON must always adhere to a specific format, so we will use TypeScript give our code some structure. The interfaces defined below will ensure that our data is formatted properly when being shared in realtime with Mapbox. When converted to JSON, it must follow this format:
Here’s how this format is constrained with TypeScript.
Our map service will (1) initialize map box with the access token, then (2) handle the retrieval of data from Firebase. All of this is just basic AngularFire2 data updating and retrieval.
Most of the action will be happening in the component. Here is a breakdown of what’s happening.
initalizeMap(): Determines the user’s physical browser location if possible, then triggers the map building process.
buildMap(): Configures a new map, registers event listeners, and configures the realtime data source.
After the map is loaded, we register a data source for the map named
firebase. We then subscribe to the markers in the database, updating the data source each time new data is emitted.
For each data point in the geoJSON
FeatureCollection, a layer will be added that is defined by its corresponding metadata. There are tons of options in the Mapbox layers API to customize the style of each marker. You can interpolate data from the GeoJSON properties object with single curly braces, which is how to show the content of the
In the HTML, we need a div where
id='map', which is where the map will be rendered. We also loop over the markers giving the user to “fly” to any given location.
If you building for native mobile on Ionic 3, you can obtain the location data with the Geolocation Service.
That’s it for realtime maps in Angular4. This is just barely scratching the surface of map-driven realtime user experiences. Let me know what you think in the comments.