Welcome back.
We created this suspend function called get all markers from Firestore.
Inside the marker repository implementation.
Now let's move to the map ViewModel and call this function in order to get it and display all markers
on the map.
First of all create a new function named as Load Markers from Firestore.
This function uses the ViewModel scoop dot launch.
Since the function get all markers from Firestore inside marker repository implementation is a suspend
function.
We need to call it inside the ViewModel scoop.
We need to get a list of destination markers, so we need to store them in a list outside this function.
Create a new variable.
Start with private val markers equals to mutable state flow of.
List of destination markers and set it to empty list.
Then use val markers in Firebase.
Equals to it's of type Stateflow.
Markers dot as Stateflow.
Alt+.
Enter to import the Stateflow.
Now let's talk about these variables.
Maybe you are wondering why I'm using Stateflow instead of remember Stateflow and remember state and
other Composables.
I'm showing you the difference.
So here I am teaching you the concepts.
I'm showing you all the concepts.
So you have two ways.
Either you use this way or another way, which I'll show you in the next video.
So I am going to update the code in the next videos in order to support the only Jetpack compose code.
This is a new.
This is the approach for compose and compose UI, so you can use it with views and widgets and old Xaml
to update the code.
Also, you can use it in Jetpack Compose, while in the next approach I'm going to show you how to use
the remember Stateflow and remember mutable state list of in order to save data inside it, but this
is for pure Jetpack Compose code, so this approach is not purely for Jetpack Compose, it's for both
compose and compose UI.
Here I'm creating a markers variable.
It's of type mutable state flow a flow that holds a single updatable value like a state container plus
observable stream.
You create it uh, here with type list of destination marker.
Initial value is empty list.
So markers starts with an empty list and can be updated later.
Only your ViewModel should update it.
Because of this we use the private keyword markers in Firebase is of type Stateflow Stateflow itself
is read only.
It can be observed but not changed.
This means your UI can collect markers to get updates, but it can't call dot value to modify it.
Why this is important.
This is the best practice for encapsulation.
Private mutable state of markers and public read only state markers.
Later, we're going to modify this code in order to set a new pattern and use only compose only UI and
compose only pattern.
So again guys, this is a very important note.
This is for compose and compose UI.
So this approach, this way of creating variables using mutable Stateflow and stateflow for compose
and compose UI.
Later we're going to modify those in order just for getting the compose only UI.
But I prefer showing you everything.
Every code in order to take a big overview of all codes available.
Okay, start with try markers.
Value equals to repository dot.
Get all markers from Firestore and store them inside the markers.
Variable catch E exception.
Set the marker dot value equals to empty list.
Also you can show the error e dot stack or print stack trace okay this is for our marker value.
Now let's move to the main screen the Uber clone or clone map.
Now let's get the markers.
So here getting the markers value markers equals or by ViewModel dot markers in Firebase dot collect
as state alt plus enter to import operator state dot get value.
Here we are collecting a state flow from your ViewModel and exposing it as a composite state that the
UI can react to.
It emits updates whenever the marker list changes.
Think of it as an observable stream of lists.
The collect as state function collects the state flow inside the composable, converting it into composite
state, which holds the current value and automatically triggers the composition when the value changes.
So any time the ViewModel updates markers dot value like this.
And here in this code, compose Recomposes this part of your UI and val markers by ViewModel delegates
the state.
So by keyword is a delegation property.
So markers by ViewModel delegates the state, so you can use it like a plane variable Markers under
the hood without buy you have to do like state marker state dot value.
But when using buy it's a shortcut markers.
You can use it directly without any collect as state or a value or anything.
Okay, so after this line markers is just a list of destination marker.
And the proof of this, if you hover the mouse you can get a list of destination markers.
If you use equals markers.
Now a state list of destination marker.
So buy will do the job for you.
Inside the map we need to display the markers.
So here go inside Google Map.
And for every marker inside markers go and create and you marker composable.
Set the position to marker to lat long and the title marker title Alt+.
Enter to import the composable marker for Google Maps and we need to change the position which is Alt
Plus enter to import this, and instead of position, we need to set the state so state equals to new
marker state and set the position using marker to lat long.
So this function will do the job for us.
Also, if you prefer, you can use new lat long and set the marker latitude and longitude.
Let's run our application.
Markers are not shown.
Maybe there is an error.
Let me go back to the ViewModel and here we have.
This function is never been used.
We need to initialize it when the ViewModel is being created.
So init block set load markers from Firestore.
Let's run again.
This is our map.
And congratulations guys.
This is the San Francisco marker.