1
00:00:00,750 --> 00:00:03,690
So let's go out and construct our map of view.

2
00:00:03,720 --> 00:00:07,890
All right so we could create this map view somewhere else but I'm just going to put in sort of a quick

3
00:00:07,890 --> 00:00:09,580
detail just to simplify our lives.

4
00:00:09,610 --> 00:00:09,830
OK.

5
00:00:09,840 --> 00:00:14,880
Someone has to come down here say struct and call this map view.

6
00:00:15,170 --> 00:00:16,380
OK.

7
00:00:16,620 --> 00:00:22,120
And then this will confirm to the you eye view represented all as such.

8
00:00:22,950 --> 00:00:23,620
OK.

9
00:00:23,800 --> 00:00:24,750
Just we don't forget.

10
00:00:24,750 --> 00:00:27,570
I'm going to go ahead and import if you frameworks here.

11
00:00:27,600 --> 00:00:32,400
So the first four Mark I'm going to use here and then just add Foundation just in case we need it and

12
00:00:32,400 --> 00:00:35,760
I'm going to add another import here which no you I hit.

13
00:00:35,790 --> 00:00:37,170
That's very important.

14
00:00:37,170 --> 00:00:38,730
And yet another one.

15
00:00:38,760 --> 00:00:42,810
This one is going to be the map kit such because we need that.

16
00:00:43,590 --> 00:00:43,830
All right.

17
00:00:43,830 --> 00:00:45,450
So we have our map view here.

18
00:00:45,450 --> 00:00:48,450
Now we're going to go ahead and start constructing this map for you.

19
00:00:48,450 --> 00:00:50,910
Well first of all this map view will need data.

20
00:00:50,940 --> 00:00:59,340
So unless a far data is and we are going to parse features because that's where we get all of the information

21
00:00:59,340 --> 00:01:02,970
from the API so we can say var data.

22
00:01:03,090 --> 00:01:07,020
And this is going to be features such very good.

23
00:01:07,070 --> 00:01:12,600
The next thing we need to do here is we need to actually override a function whenever we are conforming

24
00:01:12,600 --> 00:01:16,560
to your wife your presentable we need to override the make you eye view.

25
00:01:16,590 --> 00:01:19,440
So say func make it the moment you start typing.

26
00:01:19,440 --> 00:01:20,760
Make you eye view.

27
00:01:20,760 --> 00:01:22,500
There it is.

28
00:01:22,500 --> 00:01:28,230
And this here is where we actually going to run the code which is going to be read by SWIFT to our engine

29
00:01:28,260 --> 00:01:31,290
to actually show the map.

30
00:01:31,290 --> 00:01:36,090
So in this case here there's a few things happening but the first thing we need to do here is that the

31
00:01:36,090 --> 00:01:42,510
context I don't need to pass everything I was going to go ahead and say I want to be just the general

32
00:01:42,510 --> 00:01:46,800
context as such and I don't need to pass any type that we're expecting.

33
00:01:46,840 --> 00:01:47,450
OK.

34
00:01:47,490 --> 00:01:50,550
And in this case here I'm just gonna go read of the right type of you as such.

35
00:01:50,550 --> 00:01:53,920
So we just expected to return a map view like that.

36
00:01:54,000 --> 00:01:57,790
Next we're just going to use the M K map view.

37
00:01:58,020 --> 00:02:02,930
This one there and we're going to just pass frame that zero.

38
00:02:03,000 --> 00:02:03,210
Right.

39
00:02:03,210 --> 00:02:08,080
So just a generic frame here rectangular whose origin and size are both zero.

40
00:02:08,100 --> 00:02:10,160
So a good starting point.

41
00:02:10,160 --> 00:02:10,800
All right.

42
00:02:11,070 --> 00:02:12,180
Now we're having an issue here.

43
00:02:12,210 --> 00:02:14,810
That's because it shouldn't be just map view.

44
00:02:14,820 --> 00:02:16,590
Should it be M.K..

45
00:02:16,730 --> 00:02:20,450
Should we go to the actual M K map the Wasatch.

46
00:02:20,460 --> 00:02:20,910
There we go.

47
00:02:20,940 --> 00:02:22,470
Now we have no problem.

48
00:02:22,740 --> 00:02:24,210
And we'll she'll have a problem here.

49
00:02:24,210 --> 00:02:28,040
No worry we gonna ignore it because we can actually keep doing what we're doing here.

50
00:02:28,200 --> 00:02:32,610
And the next thing we need to have here is to override the app data UI view.

51
00:02:32,620 --> 00:02:37,040
I'm going to say func update you I view there it is.

52
00:02:37,110 --> 00:02:38,870
And for our app did you I view.

53
00:02:38,870 --> 00:02:41,800
We are passing a map kit map view.

54
00:02:41,880 --> 00:02:45,920
We're passing our context which in this case here we're going to do the same what we did before just

55
00:02:45,920 --> 00:02:48,280
a generic context as that.

56
00:02:48,450 --> 00:02:52,140
And we don't need to specify anything there.

57
00:02:52,160 --> 00:02:59,310
OK just like this and wallah now the app they view as the name imply this is where the view is going

58
00:02:59,310 --> 00:03:03,420
to be updated meaning this is where we can actually write out the user interface.

59
00:03:03,420 --> 00:03:04,620
In this case our map.

60
00:03:04,620 --> 00:03:07,490
So the construction of our map is happening here.

61
00:03:07,500 --> 00:03:11,400
I think I've said that it's going to happen here but not really here we just like making sure that we

62
00:03:11,400 --> 00:03:18,140
have the view to show the map right to the actual work happens inside here.

63
00:03:18,460 --> 00:03:23,550
Next to create an annotation an annotation is an object that allows us to create all sorts of things

64
00:03:23,760 --> 00:03:27,330
to construct an actual point that we are going to put in a map.

65
00:03:27,510 --> 00:03:27,970
OK.

66
00:03:28,030 --> 00:03:34,380
And I say let annotation and there's a lot of things you can do with it or add to it you will see in

67
00:03:34,380 --> 00:03:36,080
a second can be OK.

68
00:03:36,090 --> 00:03:39,250
Notice we are using the M K prefix here.

69
00:03:39,310 --> 00:03:39,780
Right.

70
00:03:39,840 --> 00:03:44,700
It says at the bottom the m k it's an embedded bowl map interface similar to the one provided by the

71
00:03:44,700 --> 00:03:45,660
maps application.

72
00:03:45,660 --> 00:03:51,270
So we're using that in this case we actually going in and we want to create a point annotation.

73
00:03:51,820 --> 00:03:52,640
OK.

74
00:03:52,980 --> 00:03:53,660
There we go.

75
00:03:54,270 --> 00:04:00,750
Creating that object there and then we're going to create coordinates which is the actual location longitude

76
00:04:00,750 --> 00:04:04,980
and latitude and I'm less a c l l location.

77
00:04:05,380 --> 00:04:10,290
OK but I don't want just the normal one I want this location coordinate to D.

78
00:04:10,440 --> 00:04:12,530
That's what we need to create what we need.

79
00:04:12,540 --> 00:04:17,070
Now these takes in a latitude and longitude.

80
00:04:17,100 --> 00:04:21,120
Now where do we get those values of latitude and longitude.

81
00:04:21,120 --> 00:04:29,040
Well those values we get from our API of course but most importantly notice that our API here is very

82
00:04:29,040 --> 00:04:33,770
strange because it says geometry and then it's an array of coordinates.

83
00:04:33,770 --> 00:04:34,020
OK.

84
00:04:34,050 --> 00:04:38,520
So there's three items in his coordinates which means we have to use the index and go through and find

85
00:04:38,520 --> 00:04:40,350
exactly the values we want.

86
00:04:40,350 --> 00:04:47,700
The other thing also here to remember is that the first value which is value zero is longitude and the

87
00:04:47,700 --> 00:04:50,400
first one is latitude.

88
00:04:50,900 --> 00:04:54,410
And this third one is some other value which we have no interest in.

89
00:04:54,420 --> 00:04:58,280
So let's go back to our code here and start getting that.

90
00:04:58,290 --> 00:05:06,000
So we have the data here which is handy because we need that to fill with our latitude and longitude.

91
00:05:06,420 --> 00:05:15,340
So for our longitude I'm gonna say data dot when I go to geometry right and go to coordinates.

92
00:05:15,390 --> 00:05:17,640
Look it even gives us help here.

93
00:05:17,640 --> 00:05:22,470
So when the coordinates and I want to go and get the first the value because I know it's an array I

94
00:05:22,470 --> 00:05:24,950
can just go ahead and pass one like that.

95
00:05:24,950 --> 00:05:25,340
OK.

96
00:05:25,400 --> 00:05:27,730
And for longitude same thing.

97
00:05:27,870 --> 00:05:36,440
Data geometry and coordinates and I want of course the zero index value.

98
00:05:36,690 --> 00:05:42,060
I think I should say this was the second value because this is the first one but you get the point here.

99
00:05:42,060 --> 00:05:42,530
All right.

100
00:05:42,690 --> 00:05:43,110
Very good.

101
00:05:43,200 --> 00:05:48,390
Making good progress here we have a few warnings but they will go away soon enough.

102
00:05:48,390 --> 00:05:55,070
It makes me going to create a spans when say let span it's going to be equal to and K coordinates span.

103
00:05:55,110 --> 00:05:59,120
There is such an object which means we need to then pass a few parameters here.

104
00:05:59,150 --> 00:06:05,360
So like you delta here we get pass just one point zero and longitude also one point zero.

105
00:06:05,730 --> 00:06:07,860
There's a span there.

106
00:06:07,860 --> 00:06:12,630
And once we have that information then we need to set a region now to set a region we need to use the

107
00:06:12,630 --> 00:06:15,960
UI view because this is the actual map view.

108
00:06:15,960 --> 00:06:21,180
OK so what's happening here if you think about it is we creating all the pieces that we need to then

109
00:06:21,180 --> 00:06:24,060
have the mark on the map.

110
00:06:24,060 --> 00:06:24,740
OK.

111
00:06:25,110 --> 00:06:27,750
So next here we can create a region.

112
00:06:27,750 --> 00:06:30,840
So I I say let region it's going to be again.

113
00:06:30,840 --> 00:06:35,520
M.K. coordinate region all very helpful here.

114
00:06:35,640 --> 00:06:43,500
And I want to center like that to be coordinate that we are created and the span is gonna be the span

115
00:06:43,500 --> 00:06:46,130
that we also created here because it makes sense.

116
00:06:46,170 --> 00:06:49,330
So now the region here we are passing the coordinates.

117
00:06:49,390 --> 00:06:54,500
Now we are kind of triangulating the location that we wanted by creating this little region here.

118
00:06:55,050 --> 00:06:58,000
And we passed the span which we added there.

119
00:06:58,200 --> 00:07:04,170
So once we have all those pieces now we are able to get to the map view which was being passed as you

120
00:07:04,170 --> 00:07:05,360
eye view there.

121
00:07:05,450 --> 00:07:06,720
See you eye view.

122
00:07:06,720 --> 00:07:10,070
Be careful that you need to get the exact one here.

123
00:07:10,110 --> 00:07:12,720
So why you like that dot.

124
00:07:12,810 --> 00:07:14,790
When I set the region to what.

125
00:07:14,790 --> 00:07:18,790
Well the region is going to be the region that we just created and animated.

126
00:07:18,810 --> 00:07:21,570
Meaning you want this to be animated when it shows.

127
00:07:21,570 --> 00:07:23,010
Sure why not.

128
00:07:23,610 --> 00:07:24,930
OK very good.

129
00:07:25,140 --> 00:07:28,440
So then we are going to use our annotation here.

130
00:07:28,530 --> 00:07:28,820
Right.

131
00:07:28,830 --> 00:07:32,290
Because this annotation we can add all sorts of information to it.

132
00:07:32,400 --> 00:07:38,040
The information we get our intention is one the coordinates we can add a title we can add a subtitle

133
00:07:38,370 --> 00:07:39,140
and so forth.

134
00:07:39,150 --> 00:07:39,450
Right.

135
00:07:39,990 --> 00:07:45,420
So when I say annotation I'm going to pass the coordinate here it's going to be equal to the coordinate

136
00:07:45,420 --> 00:07:46,530
that we created.

137
00:07:46,530 --> 00:07:50,850
Let's make this coordinate because there's just one that's probably better.

138
00:07:50,930 --> 00:07:53,920
Strange that to coordinate.

139
00:07:53,970 --> 00:07:54,420
Very good.

140
00:07:54,450 --> 00:08:00,790
So going to be able to coordinate like this and the title right.

141
00:08:00,810 --> 00:08:07,500
It's gonna be equal to data that properties that plays annotation we can even add.

142
00:08:07,500 --> 00:08:09,380
Let's see subtitle.

143
00:08:09,660 --> 00:08:19,570
We want this to be something that would say magnitude and then I data properties mag like that.

144
00:08:20,800 --> 00:08:21,270
OK.

145
00:08:21,360 --> 00:08:27,000
Now once we have the region which we adding to our set region and we are adding things or orientation

146
00:08:27,000 --> 00:08:30,340
well we need to pass that annotation into our UI view.

147
00:08:30,390 --> 00:08:35,580
So we say you I view which again is the same view here which we actually set up the region so you I

148
00:08:35,580 --> 00:08:40,260
view again that ad annotation there is indeed that method we can use.

149
00:08:40,260 --> 00:08:41,490
So what annotation.

150
00:08:41,520 --> 00:08:45,030
Well the one we've been working on this one here.

151
00:08:45,030 --> 00:08:51,780
So now our view which you remember it is indeed our map view the actual map has a point that we have

152
00:08:51,810 --> 00:08:55,530
added which contains all these annotation which has coordinates.

153
00:08:55,530 --> 00:09:01,350
We have the place name as a title and a subtitle is going to just show us the magnitude of that place.

154
00:09:01,470 --> 00:09:01,920
Very good.

155
00:09:02,250 --> 00:09:08,550
So now we have our map view here which we can call inside of earthquake details in that it's going to

156
00:09:08,550 --> 00:09:09,500
happen in the next video.