WEBVTT

00:00.120 --> 00:01.120
Welcome back.

00:01.160 --> 00:03.560
Let's continue customizing clustering.

00:03.560 --> 00:08.000
We defined our basic and default clustering system.

00:08.240 --> 00:12.680
Now let's define our custom clustering.

00:12.840 --> 00:20.000
You can use the cluster manager to define the zoom levels before or after marker rendering and cluster

00:20.000 --> 00:20.760
rendering.

00:20.760 --> 00:27.480
But in this example and in this course, I'm not gonna deep dive into cluster managers.

00:27.480 --> 00:35.160
I showed you how to create cluster manager, but I'm not gonna use it because the default cluster manager

00:35.160 --> 00:39.880
is is good and working fine with the maps and our needs.

00:39.880 --> 00:46.880
There are a lot of things you can define and other like parameters in the clustering composable.

00:47.120 --> 00:51.280
In this video we're gonna define the cluster content.

00:51.280 --> 00:57.320
So the cluster content takes cluster for every cluster.

00:57.480 --> 01:02.240
Go and create a new, for example, uh text.

01:02.240 --> 01:11.240
Let me choose a text in order to change this and set cluster size and set the color.

01:11.240 --> 01:12.360
For example.

01:12.680 --> 01:14.040
In red.

01:14.080 --> 01:15.200
Let me run.

01:15.200 --> 01:19.440
And you notice that we have number 14 in red.

01:19.560 --> 01:27.400
Here we if we click on the cluster go to the logcat and you click the cluster static size 14.

01:27.440 --> 01:30.480
Let me increase the cluster.

01:30.760 --> 01:36.680
And you notice that the markers are seven here and seven in another cluster.

01:37.000 --> 01:43.080
Increase it in order to define and expand the markers okay.

01:43.200 --> 01:47.200
So this is how we create a custom cluster.

01:47.560 --> 01:55.600
Also we can create a pretty and more professional cluster like creating a new composable.

01:55.600 --> 02:01.440
So let me define another composable here new Kotlin file.

02:01.680 --> 02:05.120
Name it as circle cluster.

02:05.120 --> 02:11.040
And this composable function contains other composables.

02:11.040 --> 02:14.560
We can define some parameters for this function.

02:14.560 --> 02:23.710
For example color if we need to make colors, and to define different colors for different clusters.

02:23.950 --> 02:32.150
Also a text title, for example, or the text in in the middle of the cluster we can set a new modifier.

02:32.310 --> 02:32.830
Okay.

02:33.070 --> 02:37.510
And inside this circle cluster we can define surface.

02:37.790 --> 02:45.910
And let me define some parameters for this surface I think I imported the wrong color not from graphics.

02:45.910 --> 02:49.950
I need to import it from UI compose UI.

02:50.230 --> 02:51.230
And here we go.

02:51.430 --> 02:52.870
White border.

02:52.870 --> 02:57.150
You can define the thickness of the border three dpi.

02:57.430 --> 03:00.750
For example color dot green.

03:00.790 --> 03:01.590
It's good.

03:01.790 --> 03:06.350
Alt plus enter to import DPI and this is the surface.

03:06.630 --> 03:07.950
Inside the surface.

03:07.950 --> 03:14.910
Define a new box composable and inside it set text font weight is black.

03:15.030 --> 03:19.510
Text align center color white alt plus.

03:19.510 --> 03:21.390
Enter to import the text align.

03:21.550 --> 03:27.710
And this is our composable that defines the custom shape for the cluster.

03:27.830 --> 03:33.030
Let's use it in our clustering and cluster content.

03:33.180 --> 03:35.460
Specify for every item.

03:35.620 --> 03:36.700
Cluster.

03:36.740 --> 03:37.700
Circle.

03:37.700 --> 03:39.300
Cluster pass.

03:39.300 --> 03:40.500
For example.

03:40.540 --> 03:42.260
Cluster color.

03:42.380 --> 03:43.740
Color dot blue.

03:43.980 --> 03:45.620
The first parameter.

03:45.700 --> 03:51.340
The second parameter is the size to string and pass the modifier.

03:51.340 --> 03:54.500
For example, make it 50 dpi.

03:54.580 --> 03:57.780
Let's run and see if the clustering.

03:57.820 --> 04:00.900
The custom clustering takes place.

04:00.900 --> 04:01.740
Here we go.

04:01.780 --> 04:03.180
This is our map.

04:03.300 --> 04:04.500
Go to here.

04:04.500 --> 04:08.740
And you notice guys this is our custom cluster.

04:09.100 --> 04:09.580
Okay.

04:10.060 --> 04:11.900
The gestures are working fine.

04:11.900 --> 04:16.260
If you click again you will notice that the gestures are working fine.

04:16.380 --> 04:22.580
Also, you can notice that the cluster zoom level is good.

04:22.580 --> 04:29.540
You can notice the green color, the stroke and the blue and the text inside it displaying the size

04:29.540 --> 04:30.540
of the cluster.

04:30.740 --> 04:33.820
Also, you can display the name of the cluster.

04:34.180 --> 04:37.940
Then how many point of interest you have and so on.

04:38.140 --> 04:45.420
Okay, so instead of displaying ten plus or the the default shape, you can customize cluster appearance.