1
00:00:00,960 --> 00:00:05,550
All right so let's figure out how we can show an actual map inside of our map component to do so at

2
00:00:05,550 --> 00:00:06,210
the very top.

3
00:00:06,210 --> 00:00:14,050
I'm going to add an import for map view from a library called React Native maps.

4
00:00:14,070 --> 00:00:16,620
Now you might not recall installing this module.

5
00:00:16,650 --> 00:00:18,930
And that's because we never did install it.

6
00:00:18,960 --> 00:00:24,570
It turns out that when we generated our project with Expo much earlier many videos ago we automatically

7
00:00:24,570 --> 00:00:28,070
got React Native maps installed into our project for us.

8
00:00:28,080 --> 00:00:33,300
So whenever you use Expo to generate your project out of the box you can start making use of maps on

9
00:00:33,300 --> 00:00:39,360
your device so this map view thing right here is a react component so we can show it inside of our map

10
00:00:39,360 --> 00:00:43,720
component instead of displaying a simple piece of text right there.

11
00:00:43,740 --> 00:00:51,400
Let's instead return an instance of map view I'll then save this flip back over to a track create.

12
00:00:51,690 --> 00:00:54,080
And sure enough we see absolutely nothing.

13
00:00:54,210 --> 00:00:57,320
So a map view component is very similar to an image.

14
00:00:57,390 --> 00:01:00,540
Remember we learned how to show images much earlier in this course.

15
00:01:00,780 --> 00:01:04,890
By default an image has no height or and no width assigned to it.

16
00:01:04,890 --> 00:01:06,810
So in that view it is very similar.

17
00:01:06,810 --> 00:01:11,780
If we want to get a map to actually show up we'll show a map view component like we have right here.

18
00:01:11,820 --> 00:01:15,330
But we also have to assign it at least a height property.

19
00:01:15,660 --> 00:01:21,600
So inside my style's object I'm going to add in a styling section here called simply map.

20
00:01:21,600 --> 00:01:26,880
And then inside there I'll give it a height of like three hundred or so and then I'll sign that style

21
00:01:26,910 --> 00:01:28,660
to the map view we just created.

22
00:01:28,740 --> 00:01:34,520
So I'll say style is styles dot map let's now save this again.

23
00:01:34,520 --> 00:01:38,810
And if I go back over to a track Create Now I can see a map appear on the screen.

24
00:01:38,810 --> 00:01:44,540
This is a fully featured map so I can kind of drag around I can zoom in do just about anything you would

25
00:01:44,540 --> 00:01:46,580
normally be able to do with the map.

26
00:01:46,810 --> 00:01:51,430
And if I flip over to Android I should see the same thing over here as well you'll notice the difference

27
00:01:51,430 --> 00:01:59,140
between these two devices out of the box a android device is going to show a Google Map map but on ISIS

28
00:01:59,170 --> 00:02:00,910
we're going to see an Apple Maps map.

29
00:02:01,450 --> 00:02:06,580
So there are some subtle differences in how these maps are going to be displayed for example by default

30
00:02:06,670 --> 00:02:14,110
a Google map is going to center on Latitude Zero longitude zero which is just about right there whereas

31
00:02:14,110 --> 00:02:20,030
an Apple map is going to try to center on your local country so for me I'm inside the United States.

32
00:02:20,090 --> 00:02:21,760
I get a big view of the United States.

33
00:02:21,890 --> 00:02:26,570
But if you're in some other country you might see a default or slightly different default view than

34
00:02:26,570 --> 00:02:29,100
what I see.

35
00:02:29,160 --> 00:02:30,340
So just showing you that view.

36
00:02:30,350 --> 00:02:34,890
Well simple enough but obviously we're going to want to start to customize this thing somehow.

37
00:02:34,890 --> 00:02:40,830
So let's start to understand how we can say maybe change where the map shows by default if we want to

38
00:02:40,830 --> 00:02:46,170
change the initial location showed on this map we can add in as you might guess an additional prop to

39
00:02:46,170 --> 00:02:47,630
our map view.

40
00:02:47,630 --> 00:02:53,740
It's going to give myself a little bit of space here and then I'll add in a prop called initial region

41
00:02:55,750 --> 00:03:01,540
so inside of a map view this region thing is essentially a reference to some location in the world that

42
00:03:01,540 --> 00:03:04,480
we want to show initial region means.

43
00:03:04,480 --> 00:03:08,670
What should we show on our map when it first is rendered to the device.

44
00:03:08,830 --> 00:03:14,070
So inside this object that we pass in for this prop we have to define four different properties.

45
00:03:14,200 --> 00:03:24,760
We're going to pass in a latitude and longitude a latitude Delta and a longitude Delta latitude longitude

46
00:03:24,790 --> 00:03:27,880
are essentially where we're going to center the map on.

47
00:03:27,880 --> 00:03:33,850
So as you just saw with Google Maps back over here the default was Latitude Zero longitude zero with

48
00:03:33,910 --> 00:03:41,680
IOW for me it was probably around like 122 and I don't know something else to center on the US the latitude

49
00:03:41,680 --> 00:03:47,170
Delta and longitude Delta are essentially a measurement of how much area or essentially kind of like

50
00:03:47,170 --> 00:03:49,810
what zoom level we're showing.

51
00:03:49,810 --> 00:03:52,960
Let's take a look at how we actually set these properties and you'll get a better idea of what these

52
00:03:52,960 --> 00:03:59,830
delta values really mean so for my latitude and longitude I'm going to put in a latitude here of 30

53
00:03:59,830 --> 00:04:11,270
7 3 3 2 3 3 and then I'll put in a longitude of negative 122 0 3 1 2 1 then for my latitude Delta I'm

54
00:04:11,270 --> 00:04:18,790
gonna put in a zero point zero one and zero point zero one for longitude as well.

55
00:04:18,980 --> 00:04:23,320
Now I'll save this and I'm going to see a very different initial view.

56
00:04:23,440 --> 00:04:28,490
It's now my initial view right here is the Apple headquarters in Mountain View or something not Mountain

57
00:04:28,490 --> 00:04:30,670
View where they're located Cupertino.

58
00:04:30,670 --> 00:04:31,850
That's right.

59
00:04:31,850 --> 00:04:33,410
So that's the Apple headquarters right there.

60
00:04:33,430 --> 00:04:36,790
And I should see the same thing over on Android as well.

61
00:04:36,800 --> 00:04:41,930
So again we can change what view is shown inside of our map by default by setting this initial region

62
00:04:41,930 --> 00:04:43,710
property case.

63
00:04:43,710 --> 00:04:45,720
Now we've seen some basics around the map view.

64
00:04:45,720 --> 00:04:49,080
Let's take a quick pause right here in the next video we're going to start to understand how we can

65
00:04:49,080 --> 00:04:54,600
start to draw a line on this map and also try to show some like indication of where the user currently

66
00:04:54,600 --> 00:04:55,460
is.

67
00:04:55,500 --> 00:04:57,770
It's a quick pause and I'll see you in just a minute.