- Start Here
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
- Router Transition Animations With Angular 4
- Role-Based User Access Control With Firebase
- Realtime Charts With Plot.ly
- Use TypeScript and WebPack With Firebase Cloud Functions
- Infinite Scroll in Angular With Firebase Data
- Animate a Component Based on Scroll Position Angular 4.2
- Seven Methods for Debugging an Angular 4.x Applications
- Send Push Notifications in Angular With Firebase Cloud Messaging
- Reactive Forms in Angular With the Firebase Database
- Build Realtime Maps in Angular With Mapbox GL
Build Realtime Maps in Angular With Mapbox GLby Jeff Delaney
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.