WEBVTT

00:00.080 --> 00:02.920
In this video we're going to learn about Polylines.

00:03.120 --> 00:10.120
A polyline is a series of connected line segments used to mark paths or routes on Google Map.

00:10.520 --> 00:16.360
It's useful for displaying routes, boundaries, or any continuous line based data.

00:16.400 --> 00:20.880
Let's start by drawing a simple polyline between two or more points.

00:20.920 --> 00:27.080
You can create markers or you can create lists of lat long points.

00:27.120 --> 00:34.360
Okay, so let me start by Polylines Val Kuala Lumpur.

00:34.520 --> 00:37.040
This is the lat long of Kuala Lumpur.

00:38.360 --> 00:42.600
This is the Bangkok coordinates and create val.

00:42.760 --> 00:50.760
The route points equals to list of Singapore, Kuala Lumpur and Bangkok.

00:50.920 --> 00:51.480
Okay.

00:51.680 --> 01:01.320
I need to connect the three lat long variables Bangkok, Kuala Lumpur and the Singapore variable.

01:01.360 --> 01:01.840
Okay.

01:02.000 --> 01:03.520
Now scroll down.

01:03.520 --> 01:07.080
Let me add the polyline to Google Map.

01:07.080 --> 01:09.840
We are inside the Google map scope.

01:09.840 --> 01:14.540
So inside this Create a new polyline.

01:14.580 --> 01:18.580
Set the points to routes points.

01:18.620 --> 01:23.500
Okay, this is the route points and setting the points attribute to them.

01:23.500 --> 01:27.220
You can explore the polyline, so open it.

01:27.260 --> 01:30.300
In the next video we're going to learn how to customize it.

01:30.300 --> 01:40.580
But at first run and you can notice that we have a line displayed between Bangkok, between Singapore

01:40.820 --> 01:43.060
and between Kuala Lumpur.

01:43.220 --> 01:43.780
Okay.

01:44.100 --> 01:47.060
This is the polyline that we drew here.

01:47.100 --> 01:50.540
Now let's explore the polyline.

01:50.540 --> 01:51.540
Composable.

01:51.700 --> 01:54.260
We have the points attribute.

01:54.300 --> 01:57.700
It takes a list of latlong clickable.

01:57.740 --> 02:01.420
You can make it as a clickable or not color.

02:01.460 --> 02:12.100
You can customize the color and cap geodesic join type pattern start cap tag visible with z index and

02:12.140 --> 02:13.020
on click.

02:13.140 --> 02:17.500
Let me customize the color attribute.

02:17.500 --> 02:18.420
Make it red.

02:18.620 --> 02:23.240
Set the width to five line width in pixels.

02:23.520 --> 02:24.200
Five.

02:24.240 --> 02:24.600
F.

02:24.720 --> 02:25.520
Here we go.

02:25.560 --> 02:27.680
This is our polyline.

02:27.720 --> 02:29.600
You can notice it's in red.

02:29.640 --> 02:31.960
Now its width is five.

02:32.080 --> 02:35.160
Also we can customize the clickability.

02:35.160 --> 02:37.440
So make the clickable true.

02:37.600 --> 02:40.560
We can allow the user to click on it.

02:40.600 --> 02:43.240
Also we can customize the onclick.

02:43.240 --> 02:48.760
For example display a log that you clicked the polyline.

02:48.760 --> 02:49.680
Let me run.

02:49.720 --> 02:51.120
Notice that tag.

02:51.560 --> 02:55.600
The tag message go to look at scroll down.

02:55.880 --> 02:59.760
If I click on the polyline let me search for tag.

02:59.960 --> 03:01.720
You click polyline.

03:01.760 --> 03:02.280
Okay.

03:02.480 --> 03:09.040
So here we customized the polyline and add the Clickability to it.

03:09.080 --> 03:09.560
Okay.

03:09.720 --> 03:18.200
You can add the other parameters like geodesic follows Earth's curvature.

03:18.240 --> 03:21.240
Let me show you geodesic true.

03:21.280 --> 03:22.280
Run again.

03:22.320 --> 03:26.360
It will follow the Earth's curvature.

03:26.480 --> 03:28.760
Great for long distances.

03:28.800 --> 03:29.280
Okay.

03:29.480 --> 03:33.280
This is how we customize the polyline.