WEBVTT

00:00.080 --> 00:01.000
Welcome back.

00:01.000 --> 00:03.040
Now let's call this function.

00:03.040 --> 00:06.880
So open screens Uber clone map.

00:07.000 --> 00:09.080
And here scroll down.

00:09.240 --> 00:12.840
Let me set for that actions API.

00:13.120 --> 00:24.840
Start with val route points by ViewModel route points dot collect as state with lifecycle ViewModel

00:24.840 --> 00:28.480
dot route points accesses a state flow.

00:28.560 --> 00:32.360
List of Latlong property from your ViewModel.

00:32.600 --> 00:40.840
This holds the current route coordinates or null if no route the collect as state with cycle.

00:41.080 --> 00:49.000
This is extension function from Android x dot lifecycle package, converting the flow into a compose

00:49.000 --> 00:50.600
state object.

00:50.600 --> 00:52.200
So here we are.

00:52.200 --> 01:01.760
Converting the flow into state object automatically starts and stop collection based on lifecycle collects

01:01.760 --> 01:06.860
when life cycle is at least started, stops when life cycle is stopped.

01:07.060 --> 01:12.460
Replace the last emitted value when recomposing and by keyword.

01:12.660 --> 01:20.940
Kotlin property delegate syntax automatically handles the state subscription triggering recomposition

01:20.940 --> 01:22.820
when the value changes.

01:23.020 --> 01:28.340
More efficient than regular collect as state function.

01:28.340 --> 01:32.260
It stops collecting when the UI is not visible.

01:32.300 --> 01:39.060
Resumes when the UI returns to foreground and preventing unnecessary background work.

01:39.100 --> 01:48.500
Your composable will automatically update whenever new root points are emitted, then create a new variable

01:48.500 --> 01:50.700
for the selected points.

01:50.700 --> 01:58.620
So val selected location by ViewModel dot selected location.

01:58.660 --> 02:03.220
We're going to create it dot collect as state.

02:03.220 --> 02:06.610
Let me create this variable in the view model.

02:06.770 --> 02:10.930
So back to here create private var val.

02:11.210 --> 02:17.650
Similar to what we've done in the route points we're going to create for the selected location.

02:17.650 --> 02:24.010
So selected location equals to mutable state flow of lat long.

02:24.250 --> 02:31.650
And initialize the variable that's initial state to null val selected location selected location as

02:31.650 --> 02:32.530
state flow.

02:32.690 --> 02:37.610
And this convention that underscore this is for and the selected location.

02:37.810 --> 02:40.130
This is for encapsulation.

02:40.130 --> 02:45.130
So this will be only changed inside this class.

02:45.130 --> 02:49.810
And the selected location is only for read only operations.

02:49.810 --> 02:56.650
Function set selected location passing location as a parameter.

02:56.690 --> 02:58.330
It's of type lat long.

02:58.530 --> 03:03.650
Use selected location dot value and set it to the passed parameter.

03:03.810 --> 03:09.550
There is a very important note here we have created before.

03:09.990 --> 03:19.230
The destination marker class, which is relying on a lat long and a latitude and longitude with additional

03:19.270 --> 03:21.510
title and ID variables.

03:21.550 --> 03:29.030
Also, you can use this function to lat long in order to convert the destination marker to lat long,

03:29.310 --> 03:39.990
so you can use this function in order to convert the location into lat long variable back to Uber cloud

03:40.270 --> 03:40.750
map.

03:40.870 --> 03:43.150
This is the selected location.

03:43.150 --> 03:48.350
Now create var marker position by.

03:48.510 --> 03:56.550
Remember mutable state of lat long and set the initial variable to null.

03:56.590 --> 04:05.710
Now scroll down to that Google map and here inside the parameters of Google Map composable, we need

04:05.710 --> 04:08.690
to allow the user to draw marker.

04:08.690 --> 04:14.410
So on map click go and create a marker.

04:14.450 --> 04:16.570
I'll name it as my marker.

04:16.810 --> 04:19.410
I'm going to use this marker.

04:19.450 --> 04:29.610
It's of type lat long, so set the marker position to my marker and call the ViewModel dot.

04:29.650 --> 04:35.450
Set selected location to my lat, long or my marker.

04:35.490 --> 04:45.210
When the user clicks on the map, go and create this my marker lat long object and get the value of

04:45.210 --> 04:48.970
this lat long and store it inside the marker position.

04:48.970 --> 04:53.410
Now we need to get and use this marker position.

04:53.410 --> 04:57.890
So inside the scope of the Google Maps go to here.

04:58.170 --> 05:01.690
Scroll down and the marker on.

05:01.690 --> 05:03.650
Click position on map.

05:03.650 --> 05:13.120
So marker position dot If it is not null, go and create a marker.

05:13.120 --> 05:16.600
Composable having the following parameters.

05:16.880 --> 05:18.880
The state marker state.

05:18.920 --> 05:21.920
The position would be it title.

05:21.960 --> 05:24.000
Selected location.

05:24.040 --> 05:24.960
Snippet.

05:25.000 --> 05:33.680
Display the coordinates and when the user clicks on this marker, go and set the ViewModel dot.

05:33.720 --> 05:38.040
Set selected location to this marker position.

05:38.080 --> 05:46.640
Okay, it's very simple now and return false okay, this is the marker position we need.

05:46.680 --> 05:52.160
The smart cast to lat long is impossible because marker position is delegated property.

05:52.400 --> 05:58.360
So here we can make it as lat lat long.

05:58.560 --> 06:03.120
Or we can use the overloading methods.

06:03.120 --> 06:06.880
But this is good if you add this exclamation mark.

06:06.880 --> 06:07.960
And this is good.