Realtime Maps with Mapbox + Firebase + Angular

realtime map features are part of some of the most successful apps in the world such as Uber ways and Pokémon go in this episode I'm going to show you how to start building your own real-time map features using the mapbox API with angular 4 on the front end and Firebase on the back end the demo you're looking at here allows users to post messages on the map that are associated with specific GPS coordinates then the user can click on the message and fly to wherever those GPS coordinates happen to be the important thing to notice here is that the data in Firebase and the map are staying in sync in real time so any user observing this map will have access to the latest data as soon as it's saved to the Firebase database before we get into the code I want to share a helpful tutorial from West Doyle he spends a full hour building a RunKeeper inspired angular 4 app which is a great resource if you're working with mapbox you can find the link in the description below the first step is to sign up for a free mapbox account and then retrieve your API access token during the initial setup mapbox should give you a link to the CSS that you can include in the index.html file and then you'll want to add your access token to your environment file then you can run npm install mapbox DGL mapbox has some good default Maps out of the box but you can customize them to an infinite number of combinations in this case I'm using the cogram app to mimic the color pattern in an image then you can use the mapbox editor to customize all the finer details Within in the map one thing that's really important when working with any geolocation data is to make sure it follows a consistent format in this example we're going to create a typescript interface to ensure that it follows the geojson spec geolocation data is often shared between multiple platforms so we want to make sure our app is following the same spec that every other API is going to follow the most important aspect here is the geometry which is just the GPS coordinates of a given location we're also going to create a feature collection class which is is part of the geojson spec and it's essentially just an array of geojson data now we can start building the service the service is going to serve two purposes first it will initialize the map with the API key and it will also handle all the data retrieval and updating with Firebase so we import the angular fire database as well as our geojson class and the mapbox GL library then we can add the access token from our environment to mapbox and the Constructor the get markers method will just return a Firebase list observable and then when we create a marker it'll have our gojon format and it will go to the markers list and lastly we add a method to remove a marker now we can build the component there's going to be a lot going on here so I recommend pausing the video or checking out the full lesson on angular firebase.com to really get a full grasp of everything after importing the mapbox library and our map service we defined a variable for the map itself then add some default values for the map style and the latitude and longitude The Source variable will be the live connection with mapbox and the markers will supply the data that updates that Source we inject the service in the Constructor and then retrieve the markers from Firebase during NG on a knit then we'll initialize the map but first let's check out the HTML we have a div with an ID of map this div will be replaced with the contents the map itself then we Loop over all the markers in the database when the user clicks on a marker it'll fly to that location on the map and they also have the option to remove a marker and the last thing we'll do is add a text input for the user to enter the message they want placed on the map this will just be bound to the message variable with NG model so the end result is the user types in a message clicks the map and that appears on the message as well as being saved to Firebase then any user observing this data can click it and it'll fly to that exact location so now back in the typescript when we ini initialize a map we want to figure out the user's location if possible and center the map on their exact location if we can we do that by calling Navigator geolocation and that'll give us a promise and when that promise returns it should have the coordinates of that user then we can use the fly to Method from mapbox to fly to that location to define the map variable we call the map class and pass some configuration options to it the container corresponds to the div with an ID of map in the HTML mapbox also has a bunch of optional parameters you can pass here so check those out in the documentation you can also add additional features to the app here we add some additional navigation controls in addition to that you can register event listeners here we listen for the click event which will return the GPS coordinates of wherever that user clicked so we can then use that to update the Firebase database first we convert it to geojson format and then we add an optional message parameter that's the message the user enters in the form and then we send that to the Firebase database so at this point we just need to connect this real-time data stream with the map itself when it's finished loading it'll trigger the load event and then we can start connecting that stream so we call add Source on the map with the name of Firebase and just pass it in empty geojson feature collection then we can set the source as a variable on the component itself to start feeding data to the source we subscribe to the markers observable then we convert the data to a future collection and call set data on the source that will push the latest data to the end user viewing the map at this point we just need to Define some styling for the markers themselves mapbox has a very large API for defining all these Styles so you can pretty much customize them to look any way you want you can also interpolate any data that was added to the properties field of the geojson itself which we're doing here with the message with single curly braces and now just to wrap this up we'll add a couple of helper methods to remove markers as well as fly to various locations on the map now we should be able to type in the text and then add it to the map by clicking on whatever location we want and have everything updated in real time that's it for realtime maps with mapbox if this video helped you please like And subscribe and if you want to support the channel consider becoming a pro subscriber at angular firebase.com you can talk to me directly on our slack team and I'll help you figure out whatever custom map integration you're going for thanks for watching and I'll see you next [Music] time