In this lesson, we connect realtime data from Firebase to Mapbox GL in Angular4. My goal is to give you a starting point for building realtime map features like those found Uber, Waze, and Pokemon GO. 

Checkout Wes Doyle's Angular4 GPS Tutorial: https://youtu.be/EHdSb279Lzg

Full lesson at https://angularfirebase.com/lessons/build-realtime-maps-in-angular-with-mapbox-gl/

Get Mapbox API credentials at https://www.mapbox.com/
2024-02-04T08:18:11.940Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
d16c1e00-ca5c-409b-9e34-61caa4af9963
5235d5532bcaa91f90f1a4ae5305491d1a5701d672650014e3d7b833e1ed2627
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Real time map features are part of some of the most successful apps in the world, such as Uber, Waze, and Pokemon Go.
In this episode, I'm gonna 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 wanted to share a helpful tutorial from Wes 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 dot HTML file, And then you'll want to add your access token to your environment file.
Then you can run npm install mapbox dashgl.
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 cartogram app to mimic the color pattern in an image.
Then you can use the Mapbox editor to customize all the finer details within 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 wanna 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 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 gonna serve 2 purposes.
1st, 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 AngularFire database as well as our GeoJSON class and the Mapbox GL library.
Then we can add the access token from our environment to Mapbox in the constructor.
The get markers method will just return a Firebase list observable.
And then when we create a marker, it'll have our GeoJSON 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 in our map service, we define a variable for the map itself, then add some default values for the map style and the latitude and longitude.
Dude.
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 init.
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 of 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 initialize a map, we wanna 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 an 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 real time maps with Mapbox.
If this video helped you, please like and subscribe.
And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase 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 time.

Speaker 0: Real time map features are part of some of the most successful apps in the world, such as Uber, Waze, and Pokemon Go. In this episode, I'm gonna 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 wanted to share a helpful tutorial from Wes 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 dot HTML file, And then you'll want to add your access token to your environment file. Then you can run npm install mapbox dashgl. 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 cartogram app to mimic the color pattern in an image. Then you can use the Mapbox editor to customize all the finer details within 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 wanna 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 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 gonna serve 2 purposes. 1st, 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 AngularFire database as well as our GeoJSON class and the Mapbox GL library. Then we can add the access token from our environment to Mapbox in the constructor.

The get markers method will just return a Firebase list observable. And then when we create a marker, it'll have our GeoJSON 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 in our map service, we define a variable for the map itself, then add some default values for the map style and the latitude and longitude. Dude. 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 init. 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 of 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 initialize a map, we wanna 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 an 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 real time maps with Mapbox. If this video helped you, please like and subscribe.

And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase 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 time.
Real time map features are part of some of the most successful apps in the world, such as Uber, Waze, and Pokemon Go. In this episode, I'm gonna 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 wanted to share a helpful tutorial from Wes 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 dot HTML file, And then you'll want to add your access token to your environment file. Then you can run npm install mapbox dashgl. 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 cartogram app to mimic the color pattern in an image. Then you can use the Mapbox editor to customize all the finer details within 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 wanna 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 part of the GeoJSON spec, and it's essentially just an array of GeoJSON data. Now we can start building the service.
geography
geometry
The service is gonna serve 2 purposes. 1st, 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 AngularFire database as well as our GeoJSON class and the Mapbox GL library. Then we can add the access token from our environment to Mapbox in the constructor. The get markers method will just return a Firebase list observable. And then when we create a marker, it'll have our GeoJSON 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 in our map service, we define a variable for the map itself, then add some default values for the map style and the latitude and longitude. Dude. 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 init. 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 of 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 initialize a map, we wanna 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.
geography
geometry
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 an 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.
data
data analysis
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 real time maps with Mapbox. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase 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.
streaming
Thanks for watching, and I'll see you next time.
Real time map features are part of some of the most successful apps in the world, such as Uber, Waze, and Pokemon Go. In this episode, I'm gonna 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 wanted to share a helpful tutorial from Wes 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 dot HTML file, And then you'll want to add your access token to your environment file. Then you can run npm install mapbox dashgl. 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 cartogram app to mimic the color pattern in an image. Then you can use the Mapbox editor to customize all the finer details within 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 wanna 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 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 gonna serve 2 purposes. 1st, 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 AngularFire database as well as our GeoJSON class and the Mapbox GL library. Then we can add the access token from our environment to Mapbox in the constructor. The get markers method will just return a Firebase list observable. And then when we create a marker, it'll have our GeoJSON 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 in our map service, we define a variable for the map itself, then add some default values for the map style and the latitude and longitude. Dude. 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 init. 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 of 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 initialize a map, we wanna 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 an 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 real time maps with Mapbox. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase 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 time.
Real
real
time
time
map
map
features
features
are
are
part
part
of
of
some
some
of
of
the
the
most
most
successful
successful
apps
apps
in
in
the
the
world,
world
such
such
as
as
Uber,
uber
Waze,
waze
and
and
Pokemon
pokemon
Go.
go
In
in
this
this
episode,
episode
I'm
i'm
gonna
gonna
show
show
you
you
how
how
to
to
start
start
building
building
your
your
own
own
real
real
time
time
map
map
features
features
using
using
the
the
Mapbox
mapbox
API
api
with
with
Angular
angular
4
4
on
on
the
the
front
front
end
end
and
and
Firebase
firebase
on
on
the
the
back
back
end.
end
The
the
demo
demo
you're
you're
looking
looking
at
at
here
here
allows
allows
users
users
to
to
post
post
messages
messages
on
on
the
the
map
map
that
that
are
are
associated
associated
with
with
specific
specific
GPS
gps
coordinates.
coordinates
Then
then
the
the
user
user
can
can
click
click
on
on
the
the
message
message
and
and
fly
fly
to
to
wherever
wherever
those
those
GPS
gps
coordinates
coordinates
happen
happen
to
to
be.
be
The
the
important
important
thing
thing
to
to
notice
notice
here
here
is
is
that
that
the
the
data
data
in
in
Firebase
firebase
And
and
the
the
map
map
are
are
staying
staying
in
in
sync
sync
in
in
real
real
time.
time
So
so
any
any
user
user
observing
observing
this
this
map
map
will
will
have
have
access
access
to
to
the
the
latest
latest
data
data
as
as
soon
soon
as
as
it's
it's
saved
saved
to
to
the
the
Firebase
firebase
database.
database
Before
before
we
we
get
get
into
into
the
the
code,
code
I
i
wanted
wanted
to
to
share
share
a
a
helpful
helpful
tutorial
tutorial
from
from
Wes
wes
Doyle.
doyle
He
he
spends
spends
a
a
full
full
hour
hour
building
building
a
a
Runkeeper
runkeeper
inspired
inspired
Angular
angular
4
4
app,
app
which
which
is
is
a
a
great
great
resource
resource
if
if
you're
you're
working
working
with
with
Mapbox.
mapbox
You
you
can
can
find
find
the
the
link
link
in
in
the
the
description
description
below.
below
The
the
first
first
step
step
is
is
to
to
sign
sign
up
up
for
for
a
a
free
free
Mapbox
mapbox
account
account
and
and
then
then
retrieve
retrieve
your
your
API
api
access
access
token.
token
During
during
the
the
initial
initial
setup,
setup
Mapbox
mapbox
should
should
give
give
you
you
a
a
link
link
to
to
the
the
CSS
css
that
that
you
you
can
can
include
include
in
in
the
the
index
index
dot
dot
HTML
html
file,
file
And
and
then
then
you'll
you'll
want
want
to
to
add
add
your
your
access
access
token
token
to
to
your
your
environment
environment
file.
file
Then
then
you
you
can
can
run
run
npm
npm
install
install
mapbox
mapbox
dashgl.
dashgl
Mapbox
mapbox
has
has
some
some
good
good
default
default
maps
maps
out
out
of
of
the
the
box,
box
but
but
you
you
can
can
customize
customize
them
them
to
to
an
an
infinite
infinite
number
number
of
of
combinations.
combinations
In
in
this
this
case,
case
I'm
i'm
using
using
the
the
cartogram
cartogram
app
app
to
to
mimic
mimic
the
the
color
color
pattern
pattern
in
in
an
an
image.
image
Then
then
you
you
can
can
use
use
the
the
Mapbox
mapbox
editor
editor
to
to
customize
customize
all
all
the
the
finer
finer
details
details
within
within
the
the
map.
map
One
one
thing
thing
that's
that's
really
really
important
important
when
when
working
working
with
with
any
any
geolocation
geolocation
data
data
is
is
to
to
make
make
sure
sure
it
it
follows
follows
a
a
consistent
consistent
format.
format
In
in
this
this
example,
example
we're
we're
going
going
to
to
create
create
a
a
TypeScript
typescript
interface
interface
to
to
ensure
ensure
that
that
it
it
follows
follows
the
the
GeoJSON
geojson
spec.
spec
Geolocation
geolocation
data
data
is
is
often
often
shared
shared
between
between
multiple
multiple
platforms,
platforms
So
so
we
we
wanna
wanna
make
make
sure
sure
our
our
app
app
is
is
following
following
the
the
same
same
spec
spec
that
that
every
every
other
other
API
api
is
is
going
going
to
to
follow.
follow
The
the
most
most
important
important
aspect
aspect
here
here
is
is
the
the
geometry,
geometry
which
which
is
is
just
just
the
the
GPS
gps
coordinates
coordinates
of
of
a
a
given
given
location.
location
We're
we're
also
also
going
going
to
to
create
create
a
a
feature
feature
collection
collection
class
class
which
which
is
is
part
part
of
of
the
the
GeoJSON
geojson
spec,
spec
and
and
it's
it's
essentially
essentially
just
just
an
an
array
array
of
of
GeoJSON
geojson
data.
data
Now
now
we
we
can
can
start
start
building
building
the
the
service.
service
The
the
service
service
is
is
gonna
gonna
serve
serve
2
2
purposes.
purposes
1st,
1st
it
it
will
will
initialize
initialize
the
the
map
map
with
with
the
the
API
api
key,
key
And
and
it
it
will
will
also
also
handle
handle
all
all
the
the
data
data
retrieval
retrieval
and
and
updating
updating
with
with
Firebase.
firebase
So
so
we
we
import
import
the
the
AngularFire
angularfire
database
database
as
as
well
well
as
as
our
our
GeoJSON
geojson
class
class
and
and
the
the
Mapbox
mapbox
GL
gl
library.
library
Then
then
we
we
can
can
add
add
the
the
access
access
token
token
from
from
our
our
environment
environment
to
to
Mapbox
mapbox
in
in
the
the
constructor.
constructor
The
the
get
get
markers
markers
method
method
will
will
just
just
return
return
a
a
Firebase
firebase
list
list
observable.
observable
And
and
then
then
when
when
we
we
create
create
a
a
marker,
marker
it'll
it'll
have
have
our
our
GeoJSON
geojson
format,
format
and
and
it
it
will
will
go
go
to
to
the
the
markers
markers
list.
list
And
and
lastly,
lastly
we
we
add
add
a
a
method
method
to
to
remove
remove
a
a
marker.
marker
Now
now
we
we
can
can
build
build
the
the
component.
component
There's
there's
going
going
to
to
be
be
a
a
lot
lot
going
going
on
on
here,
here
so
so
I
i
recommend
recommend
pausing
pausing
the
the
video
video
or
or
checking
checking
out
out
the
the
full
full
lesson
lesson
on
on
Angular
angular
Firebase.com
firebase.com
to
to
really
really
get
get
a
a
full
full
grasp
grasp
of
of
everything.
everything
After
after
importing
importing
the
the
Mapbox
mapbox
library
library
in
in
our
our
map
map
service,
service
we
we
define
define
a
a
variable
variable
for
for
the
the
map
map
itself,
itself
then
then
add
add
some
some
default
default
values
values
for
for
the
the
map
map
style
style
and
and
the
the
latitude
latitude
and
and
longitude.
longitude
Dude.
dude
The
the
source
source
variable
variable
will
will
be
be
the
the
live
live
connection
connection
with
with
Mapbox,
mapbox
and
and
the
the
markers
markers
will
will
supply
supply
the
the
data
data
that
that
updates
updates
that
that
source.
source
We
we
inject
inject
the
the
service
service
in
in
the
the
constructor
constructor
and
and
then
then
retrieve
retrieve
the
the
markers
markers
from
from
Firebase
firebase
during
during
ng
ng
on
on
init.
init
Then
then
we'll
we'll
initialize
initialize
the
the
map,
map
But
but
first,
first
let's
let's
check
check
out
out
the
the
HTML.
html
We
we
have
have
a
a
div
div
with
with
an
an
ID
id
of
of
map.
map
This
this
div
div
will
will
be
be
replaced
replaced
with
with
the
the
contents
contents
of
of
the
the
map
map
itself.
itself
Then
then
we
we
loop
loop
over
over
all
all
the
the
markers
markers
in
in
the
the
database.
database
When
when
the
the
user
user
clicks
clicks
on
on
a
a
marker,
marker
it'll
it'll
fly
fly
to
to
that
that
location
location
on
on
the
the
map,
map
And
and
they
they
also
also
have
have
the
the
option
option
to
to
remove
remove
a
a
marker.
marker
And
and
the
the
last
last
thing
thing
we'll
we'll
do
do
is
is
add
add
a
a
text
text
input
input
for
for
the
the
user
user
to
to
enter
enter
the
the
message
message
they
they
want
want
placed
placed
on
on
the
the
map.
map
This
this
will
will
just
just
be
be
bound
bound
to
to
the
the
message
message
variable
variable
with
with
NG
ng
model.
model
So
so
the
the
end
end
result
result
is
is
the
the
user
user
types
types
in
in
a
a
message,
message
clicks
clicks
the
the
map,
map
and
and
that
that
appears
appears
on
on
the
the
message
message
as
as
well
well
as
as
being
being
saved
saved
to
to
Firebase.
firebase
Then
then
any
any
user
user
observing
observing
this
this
data
data
can
can
click
click
it,
it
and
and
it'll
it'll
fly
fly
to
to
that
that
exact
exact
location.
location
So
so
now
now
back
back
in
in
the
the
TypeScript,
typescript
when
when
we
we
initialize
initialize
a
a
map,
map
we
we
wanna
wanna
figure
figure
out
out
the
the
user's
user's
location
location
if
if
possible
possible
and
and
center
center
the
the
map
map
on
on
their
their
exact
exact
location
location
if
if
we
we
can.
can
We
we
do
do
that
that
by
by
calling
calling
navigator.geolocation
navigator.geolocation
and
and
that'll
that'll
give
give
us
us
a
a
promise.
promise
And
and
when
when
that
that
promise
promise
returns,
returns
it
it
should
should
have
have
the
the
coordinates
coordinates
of
of
that
that
user.
user
Then
then
we
we
can
can
use
use
the
the
fly
fly
to
to
method
method
from
from
Mapbox
mapbox
to
to
fly
fly
to
to
that
that
location.
location
To
to
define
define
the
the
map
map
variable,
variable
we
we
call
call
the
the
map
map
class
class
and
and
pass
pass
some
some
configuration
configuration
options
options
to
to
it.
it
The
the
container
container
corresponds
corresponds
to
to
the
the
div
div
with
with
an
an
ID
id
of
of
map
map
in
in
the
the
HTML.
html
Mapbox
mapbox
also
also
has
has
a
a
bunch
bunch
of
of
optional
optional
parameters
parameters
you
you
can
can
pass
pass
here,
here
so
so
check
check
those
those
out
out
in
in
the
the
documentation.
documentation
You
you
can
can
also
also
add
add
additional
additional
features
features
to
to
the
the
app.
app
Here
here
we
we
add
add
some
some
additional
additional
navigation
navigation
controls.
controls
In
in
addition
addition
to
to
that,
that
you
you
can
can
register
register
event
event
listeners.
listeners
Here
here
we
we
listen
listen
for
for
the
the
click
click
event
event
which
which
will
will
return
return
the
the
GPS
gps
coordinates
coordinates
of
of
wherever
wherever
that
that
user
user
clicked.
clicked
So
so
we
we
can
can
then
then
use
use
that
that
to
to
update
update
the
the
Firebase
firebase
database.
database
First,
first
we
we
convert
convert
it
it
to
to
GeoJSON
geojson
format
format
And
and
then
then
we
we
add
add
an
an
optional
optional
message
message
parameter.
parameter
That's
that's
the
the
message
message
the
the
user
user
enters
enters
in
in
the
the
form,
form
and
and
then
then
we
we
send
send
that
that
to
to
the
the
Firebase
firebase
database.
database
So
so
at
at
this
this
point,
point
we
we
just
just
need
need
to
to
connect
connect
this
this
real
real
time
time
data
data
stream
stream
with
with
the
the
map
map
itself.
itself
When
when
it's
it's
finished
finished
loading,
loading
it'll
it'll
trigger
trigger
the
the
load
load
event,
event
and
and
then
then
we
we
can
can
start
start
connecting
connecting
that
that
stream.
stream
So
so
we
we
call
call
add
add
source
source
on
on
the
the
map
map
with
with
the
the
name
name
of
of
Firebase
firebase
and
and
just
just
pass
pass
it
it
an
an
empty
empty
GeoJSON
geojson
feature
feature
collection.
collection
Then
then
we
we
can
can
set
set
the
the
source
source
as
as
a
a
variable
variable
on
on
the
the
component
component
itself.
itself
To
to
start
start
feeding
feeding
data
data
to
to
the
the
source,
source
we
we
subscribe
subscribe
to
to
the
the
markers
markers
observable,
observable
Then
then
we
we
convert
convert
the
the
data
data
to
to
a
a
future
future
collection
collection
and
and
call
call
set
set
data
data
on
on
the
the
source.
source
That
that
will
will
push
push
the
the
latest
latest
data
data
to
to
the
the
end
end
user
user
viewing
viewing
the
the
map.
map
At
at
this
this
point,
point
we
we
just
just
need
need
to
to
define
define
some
some
styling
styling
for
for
the
the
markers
markers
themselves.
themselves
Mapbox
mapbox
has
has
a
a
very
very
large
large
API
api
for
for
defining
defining
all
all
these
these
styles
styles
So
so
you
you
can
can
pretty
pretty
much
much
customize
customize
them
them
to
to
look
look
any
any
way
way
you
you
want.
want
You
you
can
can
also
also
interpolate
interpolate
any
any
data
data
that
that
was
was
added
added
to
to
the
the
properties
properties
field
field
of
of
the
the
GeoJSON
geojson
itself,
itself
which
which
we're
we're
doing
doing
here
here
with
with
the
the
message
message
with
with
single
single
curly
curly
braces.
braces
And
and
now
now
just
just
to
to
wrap
wrap
this
this
up,
up
we'll
we'll
add
add
a
a
couple
couple
of
of
helper
helper
methods
methods
to
to
remove
remove
markers
markers
as
as
well
well
as
as
Fly
fly
to
to
various
various
locations
locations
on
on
the
the
map.
map
Now
now
we
we
should
should
be
be
able
able
to
to
type
type
in
in
the
the
text
text
and
and
then
then
add
add
it
it
to
to
the
the
map
map
by
by
clicking
clicking
on
on
whatever
whatever
location
location
we
we
want
want
and
and
have
have
everything
everything
updated
updated
in
in
real
real
time.
time
That's
that's
it
it
for
for
real
real
time
time
maps
maps
with
with
Mapbox.
mapbox
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
wanna
wanna
support
support
the
the
channel,
channel
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase
angularfirebase
com.
com
You
you
can
can
talk
talk
to
to
me
me
directly
directly
on
on
our
our
Slack
slack
team,
team
and
and
I'll
i'll
help
help
you
you
figure
figure
out
out
whatever
whatever
custom
custom
map
map
integration
integration
you're
you're
going
going
for.
for
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
The speaker explains how to build a real time map feature using the Mapbox API and discharged the API. They provide a tutorial on setting up the service and creating a feature collection class. The speaker also explains how to update the map class, input data, and use the fly to method to update it. They also mention the use of a variable for the map class and optional parameters for the feature collection.
Realtime Maps with Mapbox + Firebase + Angular
Real time map features are part of some of the most successful apps in the world, such as Uber, Waze, and Pokemon Go. In this episode, I'm gonna 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 wanted to share a helpful tutorial from Wes 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 dot HTML file, And then you'll want to add your access token to your environment file. Then you can run npm install mapbox dashgl. 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 cartogram app to mimic the color pattern in an image. Then you can use the Mapbox editor to customize all the finer details within 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 wanna 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 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 gonna serve 2 purposes. 1st, 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 AngularFire database as well as our GeoJSON class and the Mapbox GL library. Then we can add the access token from our environment to Mapbox in the constructor. The get markers method will just return a Firebase list observable. And then when we create a marker, it'll have our GeoJSON 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 in our map service, we define a variable for the map itself, then add some default values for the map style and the latitude and longitude. Dude. 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 init. 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 of 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 initialize a map, we wanna 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 an 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 real time maps with Mapbox. If this video helped you, please like and subscribe. And if you wanna support the channel, consider becoming a pro subscriber at angularfirebase 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 time.
The speaker explains how to build a real time map feature using the Mapbox API and discharged the API. They provide a tutorial on setting up the service and creating a feature collection class. The speaker also explains how to update the map class, input data, and use the fly to method to update it. They also mention the use of a variable for the map class and optional parameters for the feature collection.