WEBVTT

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

00:00.880 --> 00:07.040
In the previous video, we created this map style on map style with google.com.

00:07.280 --> 00:17.000
And we copied this JSON code and we paste it inside a new file called retro underscore style JSON placed

00:17.000 --> 00:20.080
in row and resource folder.

00:20.200 --> 00:22.720
Okay, so this is our code.

00:22.720 --> 00:25.160
This is our style in JSON.

00:25.160 --> 00:30.600
Now we need to apply this style to our current map in Android.

00:30.640 --> 00:32.560
Let's move up.

00:32.720 --> 00:39.560
And before the Google map we need to create the custom style retro style.

00:39.560 --> 00:48.600
Let's start with val context equals to local context dot current.

00:48.640 --> 00:58.960
This is the context here outside the remember and outside any composable then val retro style equals

00:58.960 --> 01:12.920
to Remember context dot resource dot open row resource set the path are the row dot retro style.

01:12.920 --> 01:19.520
I'm accessing the file that we just created in the row folder which is the JSON file.

01:19.840 --> 01:24.920
And here I am telling Android Studio to start reading it.

01:25.080 --> 01:31.360
Buffered read dot use it dot read text.

01:31.400 --> 01:39.200
Here I am reading the text and storing it inside this variable called retro style.

01:39.480 --> 01:43.640
Now let's apply this style to the map.

01:43.640 --> 01:57.880
Scroll down Google Map and here the properties map properties and set the map style options equals to

01:58.120 --> 02:04.750
Map style options and path the retro style.

02:04.750 --> 02:07.910
Let's learn about the map style options.

02:08.070 --> 02:11.350
Ctrl and left click to open this map.

02:11.350 --> 02:12.710
Style options.

02:12.710 --> 02:22.990
It's a class from Google Maps um, Android SDK that applies a custom visual style to the map.

02:23.030 --> 02:32.190
It expects a JSON string that describes how you want to style map elements like roads, water parks,

02:32.310 --> 02:35.390
text labels, land areas, and more.

02:35.550 --> 02:45.310
Okay, so I used this class called Map Style Options and I passed the retro style that I created before.

02:45.470 --> 02:52.190
Let me run the app and see if the style is applied to our map or not.

02:52.230 --> 03:01.350
Our style is not applied, so let me disable the map type here by commenting it, so I comment.

03:01.430 --> 03:06.070
This map type run again and congratulations guys!

03:06.310 --> 03:16.670
We successfully applied the style that we created on Google Maps, and we use it here so you can place

03:16.670 --> 03:17.630
markers.

03:17.870 --> 03:26.630
You look guys uh, you notice the borders between the countries is in blue and you can place the markers.

03:26.750 --> 03:33.870
Uh, you can notice that there are no roads, only the main roads between the countries.

03:34.310 --> 03:38.910
The that labels the landmarks disappeared.

03:38.910 --> 03:45.270
So you can create your custom, custom maps using this way.

03:45.270 --> 03:46.590
Using this style.

03:46.630 --> 03:47.070
Okay.

03:47.350 --> 03:49.590
So congratulations, guys.

03:49.750 --> 03:54.910
We succeeded in creating our custom map style.

03:54.910 --> 03:58.710
And this is a very important thing you should know.