WEBVTT 00:00.080 --> 00:00.920 Welcome back. 00:00.960 --> 00:03.720 In this video we're going to learn about polygons. 00:03.880 --> 00:11.680 Polygons are closed shapes defined by a series of connected points that form a boundary. 00:11.680 --> 00:19.480 They are perfect for making areas like parks, property boundaries, or any custom region on a map. 00:19.600 --> 00:28.440 For creating a simple polygon, let's start by defining a new polygon inside the map. 00:28.600 --> 00:30.560 Google map cube. 00:30.720 --> 00:31.840 Scroll down. 00:31.880 --> 00:36.040 Let's start by polygon composable function. 00:36.040 --> 00:42.560 And this composable has many parameters points. 00:42.560 --> 00:44.240 Clickable fill color. 00:44.280 --> 00:45.800 Geodesic holes. 00:45.840 --> 00:53.240 Stroke color, stroke, join type, stroke pattern, stroke width tag, visible z index, and onclick 00:53.440 --> 00:55.880 similar to that of the polyline. 00:55.920 --> 01:07.120 We are interested in points and which is mandatory, and this points parameter is a list of lat long. 01:07.120 --> 01:14.730 So again we need to create a list of lat long similar to what we've created before. 01:14.850 --> 01:18.010 Let's create a list of lat lungs. 01:18.010 --> 01:24.850 And those lat long are for Los Angeles, San Francisco, and San Diego. 01:24.970 --> 01:28.490 Let's create this triangle, this polygon. 01:28.610 --> 01:33.890 Inside the polygon, set the points to triangle points. 01:34.090 --> 01:35.770 Run the application. 01:35.770 --> 01:37.410 This is our polyline. 01:37.690 --> 01:40.730 Let's go to America and here we go. 01:40.970 --> 01:42.650 This is the triangle. 01:42.690 --> 01:44.010 This is the polygon. 01:44.050 --> 01:44.610 Okay. 01:44.810 --> 01:49.490 So you can notice San Francisco Los Angeles and San Diego. 01:49.890 --> 01:51.850 This is the polygon. 01:51.850 --> 01:59.210 We can customize the fill color the stroke color stroke width and other parameters. 01:59.210 --> 02:10.770 So fill color color dot example red stroke color color dot white stroke width to f stroke. 02:10.810 --> 02:17.590 You can customize the stroke pattern, stroke Joan type Holds geodesic and others. 02:17.590 --> 02:19.630 Let me run again. 02:19.670 --> 02:21.430 Here is our polygon. 02:21.590 --> 02:22.350 You can notice. 02:22.390 --> 02:25.750 Points refer for list of lat long. 02:25.750 --> 02:26.630 Defining the shape. 02:26.630 --> 02:27.270 Boundary. 02:27.550 --> 02:28.750 Fill color. 02:28.750 --> 02:30.310 Interior color. 02:30.510 --> 02:32.870 Use transparency for best results. 02:33.110 --> 02:38.830 And this is the internal color red and the stroke color border line. 02:38.830 --> 02:48.430 You can notice that the white color which is the stroke color, stroke width border thickness in pixels 02:48.630 --> 02:51.070 to F and others. 02:51.110 --> 02:56.590 Okay, we can make it as clickable through set on click. 02:56.750 --> 03:03.030 For example let me add log v polygon is clicked. 03:03.070 --> 03:04.030 Run again. 03:04.030 --> 03:09.230 Navigate to San Diego open look at search for taggy. 03:09.270 --> 03:13.790 Click on the polygon and you can notice polygon is clicked. 03:13.830 --> 03:21.830 This is how we create polygons in Google Map, how to customize them, and how to handle the click events 03:22.070 --> 03:24.030 on those polygons.