1
00:00:02,040 --> 00:00:05,100
Well we've got the track that we care about inside of track detail screen.

2
00:00:05,100 --> 00:00:08,520
So now we can show some information about it to the user in particular.

3
00:00:08,520 --> 00:00:13,710
We probably won't show a map that kind of highlights the area that the user was hiking through or whatever

4
00:00:13,710 --> 00:00:18,770
it was and then draw the line that indicates the exact path that they took.

5
00:00:18,780 --> 00:00:24,560
So because we want to show a map we can import the map view component once again and remember we already

6
00:00:24,570 --> 00:00:27,580
have a map component inside of our components directory.

7
00:00:27,600 --> 00:00:33,150
However I will be honest with you this map component that we put together is not very well suited for

8
00:00:33,150 --> 00:00:34,000
reuse.

9
00:00:34,080 --> 00:00:38,340
And the reason for that is that there's a lot of code inside of here that takes a look at our context

10
00:00:38,340 --> 00:00:44,100
object and it also takes a look and draws a circle on the screen for the user's current location as

11
00:00:44,100 --> 00:00:44,910
well.

12
00:00:45,030 --> 00:00:48,600
So the map component we already have is not very reusable.

13
00:00:48,720 --> 00:00:54,150
So rather than trying to reuse that map component we'll just use our map view from the React Native

14
00:00:54,150 --> 00:00:59,640
maps library and just show a brand new map view inside of here rather than trying to reuse the one we

15
00:00:59,640 --> 00:01:01,590
already have in this case.

16
00:01:01,590 --> 00:01:07,110
We didn't really do a lot of customization of our map inside the components directory.

17
00:01:07,110 --> 00:01:12,700
So honestly we're not really losing a lot of opportunity for code reuse here anyways okay.

18
00:01:12,730 --> 00:01:19,800
So to get started at the very top I will get a map view and we want to draw a line as well.

19
00:01:19,800 --> 00:01:25,470
So I'm also going to import Polly line two from React Native maps

20
00:01:29,030 --> 00:01:35,010
so then rather than just returning a text element I can return a text or a react fragment and I'm going

21
00:01:35,010 --> 00:01:40,990
to make sure I remove that semicolon at the end of the text tag then immediately after that we'll show

22
00:01:40,990 --> 00:01:42,090
our map view

23
00:01:46,710 --> 00:01:47,470
inside of that.

24
00:01:47,520 --> 00:01:49,950
I'll put my poly line.

25
00:01:50,080 --> 00:01:51,760
Let's take care of the Poly line first.

26
00:01:51,840 --> 00:01:58,620
So remember a poly line takes a coordinates property and we need to pass it an array of coordinates

27
00:01:58,830 --> 00:02:03,900
which is supposed to be a array of objects with latitude and longitude properties.

28
00:02:03,930 --> 00:02:09,900
So once again our track right here has a locations property that is an array of track readings or location

29
00:02:09,900 --> 00:02:10,640
readings.

30
00:02:10,640 --> 00:02:13,800
And inside that location is a coords property.

31
00:02:13,800 --> 00:02:16,830
So it's that court's property that we really care about in this case.

32
00:02:16,830 --> 00:02:21,090
So we're once again going to map over all of our different locations and pull off just that court's

33
00:02:21,090 --> 00:02:22,100
property.

34
00:02:22,230 --> 00:02:26,520
So I'll do track dot locations dot map.

35
00:02:26,610 --> 00:02:30,330
We'll take a look at every location and return location.

36
00:02:30,330 --> 00:02:37,720
Dot courts and of course once again I'm abbreviated location simply as LLC OK.

37
00:02:37,780 --> 00:02:38,970
So that's a good start.

38
00:02:38,990 --> 00:02:42,750
Let's make sure that we also set an initial region on the map view as well.

39
00:02:42,770 --> 00:02:48,670
Because remember by default a map view is going to appear like very far scrolled out so on map view

40
00:02:50,250 --> 00:02:57,440
I'm going to put in a initial region property so inside of here we can specify some kind of like zoom

41
00:02:57,440 --> 00:03:00,320
level by assigning a longitude Delta.

42
00:03:00,350 --> 00:03:07,930
In this case I'll use zero point zero one and a latitude Delta as well of 0 0 1.

43
00:03:08,050 --> 00:03:13,000
Then we want to also take all of our different coordinates probably for like the very first point that

44
00:03:13,000 --> 00:03:14,940
we recorded out of our track.

45
00:03:14,980 --> 00:03:16,870
In other words let's take a look at this track right here.

46
00:03:16,870 --> 00:03:19,780
I think we should try to find the very first point.

47
00:03:19,930 --> 00:03:21,290
Take its coordinates.

48
00:03:21,340 --> 00:03:26,380
So it's starting longitude and latitude longitude and throw them into this initial region so that the

49
00:03:26,380 --> 00:03:29,570
map view knows what does center on by default.

50
00:03:29,590 --> 00:03:35,980
So right after we find that track right there let's get some initial coordinates which I would call

51
00:03:35,980 --> 00:03:40,370
initial chords so we're gonna get those from looking at our track.

52
00:03:40,370 --> 00:03:46,640
Looking at the array of safe locations we're gonna take the first element out of there and get specifically

53
00:03:46,640 --> 00:03:48,430
just that coords property.

54
00:03:48,470 --> 00:03:53,480
So now initial chords will be an object with a longitude and latitude which is exactly what we need

55
00:03:53,480 --> 00:04:00,720
to specify the initial region so after we specify the zoom level right here we can also do dot dot dot

56
00:04:01,380 --> 00:04:04,700
initial courts okay.

57
00:04:04,710 --> 00:04:06,740
One less thing inside of here before we test it.

58
00:04:06,760 --> 00:04:10,170
Remember by default a map view doesn't really have a set height.

59
00:04:10,350 --> 00:04:15,060
So let's make sure that we define some set height down inside of our styles object down here so that

60
00:04:15,060 --> 00:04:23,100
in a map section with a height of 300 and I'll make sure that I apply that to my map view.

61
00:04:23,160 --> 00:04:27,850
So say style is styles dot map.

62
00:04:27,990 --> 00:04:28,310
Okay.

63
00:04:28,340 --> 00:04:29,690
I think we're ready for a test.

64
00:04:29,690 --> 00:04:34,810
So going to save this I'll flip back over I'll try out car drive.

65
00:04:34,970 --> 00:04:36,250
And there we go.

66
00:04:36,260 --> 00:04:40,420
So I now see my map and I see the path that I took when I recorded that track.

67
00:04:40,550 --> 00:04:45,680
Same thing for went for bike ride and went for hike as well.

68
00:04:45,740 --> 00:04:52,400
So I'd say this is pretty much working out just as we expected however we're still not quite done yet

69
00:04:52,520 --> 00:04:57,230
even though our application is pretty much feature complete there's still some kind of nasty things

70
00:04:57,230 --> 00:04:58,150
inside of here.

71
00:04:58,160 --> 00:05:01,700
So for example on the tracklist screen we've got a header on here.

72
00:05:01,700 --> 00:05:06,380
Even though we're not showing anything inside the header in addition down here at the very bottom on

73
00:05:06,380 --> 00:05:10,490
our bottom tab bar we've got these kind of ugly terms for every screen.

74
00:05:10,590 --> 00:05:15,740
We don't have any icons inside there either so let's kind of polish up a couple of different items in

75
00:05:15,740 --> 00:05:18,950
the next video and will be just about done with our application.

76
00:05:19,190 --> 00:05:20,570
So I'll see you in just a minute.