1
00:00:05,880 --> 00:00:13,110
A WHAT'S UP GUYS I'M Jacob with slopes dot com and in the last lesson we got our polyline showing.

2
00:00:13,130 --> 00:00:17,410
It's a little hard to see obviously because we don't zoom in or center it.

3
00:00:17,930 --> 00:00:26,030
So now we need to get what we need to basically set our coordinate regions so we either want this button

4
00:00:26,030 --> 00:00:32,060
to center on our user on our little dot there or we want our last run to be centered.

5
00:00:32,420 --> 00:00:44,720
So to get started I'll stop this simulator and I'm just going to go ahead and check out get check out.

6
00:00:45,100 --> 00:00:47,250
Lesson 19.

7
00:00:47,830 --> 00:00:48,150
All right.

8
00:00:48,160 --> 00:00:51,800
So why don't we do the easy one first.

9
00:00:51,820 --> 00:00:53,740
And we want our button.

10
00:00:53,740 --> 00:00:58,180
I believe we already have hooked up our center location.

11
00:00:58,270 --> 00:01:06,640
We should probably create a function that will center the map on our our location so our blinking blue

12
00:01:06,640 --> 00:01:08,960
light right or dot.

13
00:01:08,980 --> 00:01:13,570
So let's go ahead and make a function because we're going to use this in a couple places.

14
00:01:13,600 --> 00:01:19,980
Basically if our overlay is nil will center to our user.

15
00:01:20,200 --> 00:01:24,160
And if it's not nyl will center to the overlay.

16
00:01:24,160 --> 00:01:37,180
So let's make a sensor function so we'll call this funk center map on user location and this is really

17
00:01:37,180 --> 00:01:37,690
easy.

18
00:01:37,690 --> 00:01:49,450
All we have to do is set up a corner region and we probably also want the map to follow our user if

19
00:01:49,450 --> 00:01:51,000
it's in this location right.

20
00:01:51,040 --> 00:01:57,940
So if we call our map view dot user tracking mode equals to follow.

21
00:01:57,940 --> 00:01:59,150
That would be good.

22
00:01:59,460 --> 00:01:59,970
OK.

23
00:01:59,980 --> 00:02:06,550
So we'll have a tracker user and then all we do is we need to set a variable for our coronor region.

24
00:02:06,550 --> 00:02:15,070
So let's call this Cordner region and this is going to be a type we're going to make an M.K. coordinate

25
00:02:18,070 --> 00:02:23,190
with distance region and make with distance.

26
00:02:23,200 --> 00:02:23,510
Yeah.

27
00:02:23,560 --> 00:02:24,330
Cool.

28
00:02:24,370 --> 00:02:32,430
So now all we're going to pass in is are our users location which you find under map view dot user location

29
00:02:32,530 --> 00:02:43,390
and what's passed in the corner of us and in the first one we need to pass in a location for latitude

30
00:02:43,420 --> 00:02:44,760
and longitude.

31
00:02:44,770 --> 00:02:51,870
So I mean really we can probably just do like this is like a radius so we can probably just put a thousand

32
00:02:51,870 --> 00:02:55,060
here and a thousand.

33
00:02:55,090 --> 00:02:55,680
All right.

34
00:02:55,680 --> 00:02:57,270
And let's save that.

35
00:02:57,330 --> 00:02:57,690
OK.

36
00:02:57,720 --> 00:03:06,810
And now all we have to do is set the region of our map view so map blue data set region and pass in

37
00:03:06,860 --> 00:03:09,550
our new coordinate region that we made and animate true.

38
00:03:09,560 --> 00:03:16,880
That way it will zoom in or zoom out all nicely and now all we have to do is call our center map on

39
00:03:16,880 --> 00:03:20,930
user location and our Iby action down here.

40
00:03:20,960 --> 00:03:28,910
So let's go ahead and say Center and let's run this and see if it works.

41
00:03:28,920 --> 00:03:32,630
All right so everything loads up and our users over there.

42
00:03:32,760 --> 00:03:33,370
OK.

43
00:03:34,960 --> 00:03:40,670
So our users down here run in and you can see our polyline a little better now up here.

44
00:03:40,930 --> 00:03:51,030
If I push this button it should zoom in on us but we already might be centered because it's following.

45
00:03:51,030 --> 00:03:54,650
Let's go ahead and just try to let's make this 500

46
00:03:56,870 --> 00:03:59,680
and 500 Let's see if we can get a little closer.

47
00:04:11,230 --> 00:04:16,560
Let it load there is our user and let's click our center button

48
00:04:24,860 --> 00:04:26,920
OK so now it zoomed in more.

49
00:04:26,930 --> 00:04:28,850
So that's cool.

50
00:04:28,850 --> 00:04:32,440
The simulator is really bogging down my computer though.

51
00:04:32,600 --> 00:04:38,770
Ok so I think it's just a little hard to tell that it's center into our user because when we initially

52
00:04:39,230 --> 00:04:47,340
initially set up our location manager or location manager we already said it's following are our DOT.

53
00:04:47,360 --> 00:04:48,050
Right.

54
00:04:48,290 --> 00:04:53,550
So it's kind of hard to tell if it's moved or if it hasn't moved.

55
00:04:55,070 --> 00:05:02,270
But now that we know how to set our region why don't we go ahead and set the region to our polyline

56
00:05:02,780 --> 00:05:05,720
and then we'll know if our center button works.

57
00:05:05,720 --> 00:05:07,460
It'll be a little more obvious.

58
00:05:07,490 --> 00:05:10,410
So let's go ahead stop this simulator.

59
00:05:10,730 --> 00:05:15,760
And now we can create our our center on polyline.

60
00:05:15,770 --> 00:05:20,300
So underneath our center map location

61
00:05:22,960 --> 00:05:33,010
we can just go ahead and create a function called the center map on previous route and we can pass in

62
00:05:33,070 --> 00:05:38,770
our locations of type list location

63
00:05:41,410 --> 00:05:50,130
and then we'll return our let's see our M.K. co-ordinate region.

64
00:05:51,280 --> 00:06:02,560
All right if we're passing then all we need to import around so imports relm swift

65
00:06:07,380 --> 00:06:09,060
it now it knows type list.

66
00:06:09,080 --> 00:06:14,760
So now we want to center our route on the previous.

67
00:06:14,870 --> 00:06:17,440
We want to center our map on the previous route.

68
00:06:17,570 --> 00:06:21,630
So first we need to get the initial location.

69
00:06:21,680 --> 00:06:23,540
So let's go ahead and do guard

70
00:06:28,770 --> 00:06:39,330
guard let initial location and we'll call this we just are grabbing our locations list and grabbing

71
00:06:39,660 --> 00:06:47,030
the first the first variable the first index inside that list.

72
00:06:47,190 --> 00:06:53,520
And if it is no we just want to return a empty M-K coronet region

73
00:06:57,200 --> 00:06:58,310
OK.

74
00:06:58,350 --> 00:07:06,930
And with that being said we're basically we have a list of locations right.

75
00:07:07,880 --> 00:07:15,500
And we need to find the minimum latitude the maximum latitude and then the minimum longitude and the

76
00:07:15,500 --> 00:07:17,830
maximum long long.

77
00:07:18,020 --> 00:07:21,710
So we can kind of like the way we took our users location.

78
00:07:21,710 --> 00:07:24,360
We need to find the minimum and maximum.

79
00:07:24,380 --> 00:07:29,840
And then you know give enough space so we can show our whole region because it's not necessarily just

80
00:07:29,840 --> 00:07:33,830
showing a thousand metre radius around a center point.

81
00:07:33,830 --> 00:07:37,010
Now we have a polyline drawn on the map right.

82
00:07:37,340 --> 00:07:43,940
So once we have our locations we can go ahead and just create these variables we need a minimum latitude.

83
00:07:44,240 --> 00:07:51,860
And for now we're going to set it to our initial location that latitude and then we need a minimum longitude

84
00:07:54,610 --> 00:08:02,200
and let's set that to our initial location that longitude great and then we need to set our max latitude

85
00:08:04,450 --> 00:08:10,100
and we're going to set that to minimum latitude for now because right now that's the only point we know

86
00:08:10,600 --> 00:08:18,340
and then we also need our max longitude and that is also our minimum minimum longitude.

87
00:08:18,340 --> 00:08:19,440
So everything set.

88
00:08:19,450 --> 00:08:21,400
Obviously it's all the same.

89
00:08:21,550 --> 00:08:27,860
And if we didn't have an initial location it would just return an empty region which is fine.

90
00:08:28,300 --> 00:08:35,680
And if we do have an initial location we set the minimum and maximums to the only points that we know

91
00:08:35,680 --> 00:08:37,020
right now.

92
00:08:37,810 --> 00:08:47,560
And now all we have to do is loop through our locations and compare that latitude and longitude to our

93
00:08:47,560 --> 00:08:49,260
current minimum and maximum.

94
00:08:49,300 --> 00:08:54,880
And if they're different if the minimum is lower than the one we already have set we replace it with

95
00:08:54,880 --> 00:08:55,930
the new minimum.

96
00:08:56,260 --> 00:09:01,330
And if the maximum the value being compared to it is higher we replace the new maximum.

97
00:09:01,330 --> 00:09:02,840
So it's really easy.

98
00:09:02,840 --> 00:09:05,130
So let's just go ahead and make a for loop.

99
00:09:05,140 --> 00:09:11,520
So for location in our list of locations

100
00:09:14,030 --> 00:09:26,420
we want to set our minimum latitude equal to minimum and all we do here is compare our already set minimum

101
00:09:26,420 --> 00:09:33,390
latitude and compare it to our current location that latitude.

102
00:09:34,180 --> 00:09:44,700
OK so what this does is our current It's comparing it to this value if this value is smaller than our

103
00:09:44,700 --> 00:09:47,600
current minimum latitude it will reset it.

104
00:09:47,610 --> 00:09:49,770
So that's pretty pretty easy.

105
00:09:49,770 --> 00:09:51,880
And then we're going to do the same thing for a launch.

106
00:09:51,900 --> 00:09:54,440
Dude we want to find the minimum.

107
00:09:54,450 --> 00:09:59,340
So minimum longitude and our current locations longitude.

108
00:09:59,370 --> 00:10:07,710
So whichever one is smaller we'll stay set to our minimum longitude and then our max longit our max

109
00:10:07,710 --> 00:10:15,750
latitude is going to be the same thing but Max and set a minimum and we're comparing it to our Max latitude

110
00:10:15,750 --> 00:10:20,140
now and our current location that latitude.

111
00:10:20,190 --> 00:10:27,510
So if our max latitude is less than our current locations latitude it gets set to a new value and then

112
00:10:27,510 --> 00:10:32,820
our max longitude equals Max longitude.

113
00:10:34,230 --> 00:10:37,810
And then location dot longitude.

114
00:10:38,040 --> 00:10:39,670
And so this is the same thing.

115
00:10:39,690 --> 00:10:45,450
It just basically takes whichever one is greater then and sets it to our Max longitude.

116
00:10:46,500 --> 00:10:53,340
And that's all we need to do and are for a loop and then down below we need to return and M.K. coordinate

117
00:10:53,340 --> 00:10:53,800
region.

118
00:10:53,830 --> 00:11:01,420
OK so we can just simply type in return and let's create an M-K corner region.

119
00:11:02,460 --> 00:11:10,500
We just want a normal region and then do an opening in parentheses and we care about the the center

120
00:11:10,770 --> 00:11:11,550
and the span.

121
00:11:11,550 --> 00:11:21,120
So we want this one and the center is going to be it's going to be a C-L location coordinate to D.

122
00:11:21,960 --> 00:11:26,720
And we need to set our latitude and longitude.

123
00:11:26,740 --> 00:11:33,520
Why is this not auto completing C-L location coordinate to do

124
00:11:36,520 --> 00:11:36,780
all right.

125
00:11:36,790 --> 00:11:39,130
Well anyways it has a latitude

126
00:11:41,810 --> 00:11:46,350
and our latitude is really bothering me.

127
00:11:57,550 --> 00:12:02,570
I just want it to auto complete man type.

128
00:12:02,650 --> 00:12:08,950
All right well it's going to make us type so we need to create a seal location coordinate and so that

129
00:12:08,950 --> 00:12:10,850
has latitude and longitude right.

130
00:12:10,990 --> 00:12:20,760
So latitude we need a value here and then we need longitude and we need a value there.

131
00:12:20,770 --> 00:12:21,680
All right.

132
00:12:22,600 --> 00:12:24,670
So all our errors went away.

133
00:12:25,150 --> 00:12:25,670
No.

134
00:12:25,690 --> 00:12:28,970
Obviously no not unexpected argument.

135
00:12:28,990 --> 00:12:29,380
Fine.

136
00:12:29,480 --> 00:12:32,600
Zero zero.

137
00:12:33,730 --> 00:12:43,050
And then our span would also be it would be an M K M K coordinate span.

138
00:12:43,570 --> 00:12:54,690
And that takes latitude Delta and longitude Delta and that's basically the difference between your maximum

139
00:12:54,750 --> 00:12:55,970
and your minimum right.

140
00:12:56,190 --> 00:13:04,140
And then you can multiply a little bit of a buffer onto that to not be right on top of our our polyline

141
00:13:04,140 --> 00:13:06,680
will give it a little space so you can see it.

142
00:13:06,690 --> 00:13:20,930
So for the center of our location our latitude needs to be our minimum latitude Plus our maximum latitude.

143
00:13:21,880 --> 00:13:22,680
Okay.

144
00:13:22,710 --> 00:13:27,800
And then we need to just divide that by two and that would be the center point.

145
00:13:27,820 --> 00:13:28,740
It makes sense right.

146
00:13:28,740 --> 00:13:30,220
Easy enough.

147
00:13:30,900 --> 00:13:38,100
And then our longitude is going to be the same thing but with longitude which would be our minimum longitude

148
00:13:39,000 --> 00:13:44,160
Plus our maximum longitude divided by two.

149
00:13:44,160 --> 00:13:53,380
So we're finding you know the center points between both of these and that finds our center point.

150
00:13:53,520 --> 00:14:02,210
Now for the span we want to take our max minus our minimum and that's our Delta.

151
00:14:02,400 --> 00:14:08,550
And then we'll multiply it by just a number to put a little bit of a buffer on it so you can see more

152
00:14:08,550 --> 00:14:09,620
of our polyline.

153
00:14:09,620 --> 00:14:14,330
So otherwise it would hug the screen and it wouldn't look that great.

154
00:14:14,330 --> 00:14:23,520
So opening and closing parentheses we want to take our max latitude minus our main latitude.

155
00:14:24,210 --> 00:14:26,240
OK closing parentheses.

156
00:14:26,460 --> 00:14:31,860
And let's just multiply it by like 1.4 for now if we don't like it we can change it.

157
00:14:31,860 --> 00:14:35,210
You might like one point one or two.

158
00:14:35,220 --> 00:14:37,380
You might want to double.

159
00:14:37,500 --> 00:14:38,860
We don't know yet.

160
00:14:38,910 --> 00:14:47,320
So when we get there we will get there and then let's see our longitude Delta will be our max.

161
00:14:47,340 --> 00:14:53,750
Why does this keep our max longitude minus our minimum longitude.

162
00:14:54,100 --> 00:14:59,170
And then let's multiply that by 1.4 also so it centers it both ways.

163
00:14:59,200 --> 00:15:04,350
So again if we want to change this we will change it later.

164
00:15:04,870 --> 00:15:07,850
Now we have our center on map.

165
00:15:07,900 --> 00:15:10,330
So let's go ahead and

166
00:15:13,540 --> 00:15:17,020
let's get this called.

167
00:15:17,030 --> 00:15:25,580
So one thing we're going to have to remember to do is when we call center on map to our route we don't

168
00:15:25,580 --> 00:15:28,210
want it to track our user anymore right.

169
00:15:28,250 --> 00:15:35,010
So what we're going to do is we are going to add our overlay.

170
00:15:35,210 --> 00:15:48,090
So if we go to add last run we want to see after we go through all of our locations we're going to want

171
00:15:48,090 --> 00:15:53,950
to call our map view dot user tracking mode equals data none.

172
00:15:53,950 --> 00:15:59,790
So we're turning that off because obviously like our polyline could be 10 miles away from where we are.

173
00:15:59,970 --> 00:16:06,150
But if we leave luzer tracking on once we start moving it would start updating to our position and we

174
00:16:06,150 --> 00:16:08,470
wouldn't see our last run anymore.

175
00:16:08,730 --> 00:16:14,280
So now we want to set the map view region here and we're in the last run to map where we create our

176
00:16:14,280 --> 00:16:24,240
polyline right now we just set our region and our region is going to be calling center map on previous

177
00:16:24,240 --> 00:16:26,750
route and it returns a region.

178
00:16:26,760 --> 00:16:28,170
So that's easy enough right.

179
00:16:28,170 --> 00:16:39,350
So all we do is call our center map on previous route and now we just have to pass in our locations.

180
00:16:39,360 --> 00:16:42,320
So that's our last run locations.

181
00:16:42,990 --> 00:16:51,030
And we'll animate it to true so it you know X code takes care of the pretty zooming in and zooming out

182
00:16:51,030 --> 00:16:52,110
for us.

183
00:16:52,380 --> 00:16:58,730
And that is all we have to do.

184
00:16:58,740 --> 00:17:01,240
All right let's run this and see if it works.

185
00:17:02,290 --> 00:17:03,590
What we have to call it.

186
00:17:03,650 --> 00:17:04,000
Oh yeah.

187
00:17:04,010 --> 00:17:05,700
We're calling it right here in never mind.

188
00:17:05,810 --> 00:17:10,130
We're set in the region and we have an air

189
00:17:12,830 --> 00:17:20,340
we forgot a parentheses right here.

190
00:17:20,550 --> 00:17:27,170
All right let's run this and our last Ron's point one two miles

191
00:17:29,370 --> 00:17:33,880
and it doesn't look like it worked.

192
00:17:35,590 --> 00:17:40,000
It's not following our user or our current location.

193
00:17:40,970 --> 00:17:43,170
But it didn't really zoom.

194
00:17:43,190 --> 00:17:49,630
It didn't center to our polyline.

195
00:17:49,840 --> 00:17:51,730
So let's see what's going on here.

196
00:17:51,910 --> 00:17:56,420
OK so so we have a little bit of a problem.

197
00:17:56,440 --> 00:18:04,610
It doesn't really seem like either of our center on users working or you know Center on our map is working.

198
00:18:04,660 --> 00:18:05,750
So what we want to do.

199
00:18:05,770 --> 00:18:09,280
So right here this user tracking mode does follow.

200
00:18:09,460 --> 00:18:17,400
I'm just going to copy and paste this and search our project and right here you can see we call it three

201
00:18:17,400 --> 00:18:19,650
different times right.

202
00:18:19,680 --> 00:18:28,830
We call it here where we set it to none because we want it to center on our polyline and then we call

203
00:18:28,830 --> 00:18:34,580
it here because we want it to follow our user because we're centering on our user and we forgot about

204
00:18:34,590 --> 00:18:35,460
one spot.

205
00:18:35,460 --> 00:18:41,520
So down here in our location manager we start following our user right off the bat.

206
00:18:41,520 --> 00:18:45,340
So I feel like we're getting a little bit of a conflict.

207
00:18:45,570 --> 00:18:50,770
So I'm going to delete this line down in our extension in our beginner on the.

208
00:18:50,790 --> 00:18:52,200
It's in the same visi.

209
00:18:52,440 --> 00:19:02,070
So let's delete that and then I think we should come up here and on our setup map view function if we

210
00:19:02,070 --> 00:19:08,470
have an overlay the overlay gets created and we center to the overlay.

211
00:19:08,670 --> 00:19:13,430
But if we don't have a last run that means we want it centered to our user right.

212
00:19:13,440 --> 00:19:22,110
So let's just call our center map on user location in the state and let's go ahead and run this and

213
00:19:22,110 --> 00:19:26,670
cross our fingers that we fixed it.

214
00:19:26,740 --> 00:19:27,420
All right.

215
00:19:27,730 --> 00:19:28,500
Ok sweet.

216
00:19:28,500 --> 00:19:30,550
So there is our polyline.

217
00:19:30,550 --> 00:19:36,540
We're zoomed in nice and close and that 1.4 kind of gives it some space.

218
00:19:36,550 --> 00:19:38,120
That's why we multiply it.

219
00:19:38,260 --> 00:19:39,620
But that's really cool.

220
00:19:39,640 --> 00:19:45,190
And so now if I hit the center button here it should find our user

221
00:19:48,230 --> 00:19:50,720
and up there we are.

222
00:19:50,720 --> 00:19:58,090
So now it is following our current location and not showing our map or not showing our polyline.

223
00:19:58,090 --> 00:19:59,960
So that's really cool.

224
00:19:59,960 --> 00:20:06,470
And I just realized we probably want when we close the last run box we probably also want it to start

225
00:20:06,470 --> 00:20:09,750
following our current location as well.

226
00:20:09,830 --> 00:20:17,770
So let's see if we find our Iby outlet for last run button.

227
00:20:18,290 --> 00:20:27,290
So if we close our last run view at the top we probably want to say Center map on user location as well.

228
00:20:27,290 --> 00:20:29,910
All right.

229
00:20:30,830 --> 00:20:40,640
Sweet Let's run this one more time and take a look at it and maybe make a new new run that we can add

230
00:20:40,640 --> 00:20:42,330
to the app.

231
00:20:42,510 --> 00:20:46,030
So it shows our last run which is Point 1 2 miles.

232
00:20:46,200 --> 00:20:51,140
It's cool let's go ahead and like make this a drive.

233
00:20:51,150 --> 00:20:51,420
OK.

234
00:20:51,420 --> 00:20:53,210
So we already have a freeway drive.

235
00:20:53,250 --> 00:21:00,140
Let's start our run and it will make no longer polyline now 0 it might not.

236
00:21:00,180 --> 00:21:01,820
OK it is calculate on the Prius.

237
00:21:01,890 --> 00:21:04,560
I thought it might be going too fast.

238
00:21:05,600 --> 00:21:06,990
But it looks like everything is working.

239
00:21:07,000 --> 00:21:09,300
We've gone point 0 6.

240
00:21:09,550 --> 00:21:11,490
So much faster than running.

241
00:21:11,840 --> 00:21:14,840
Driving is easier than running it.

242
00:21:14,860 --> 00:21:17,470
So we got a good run going.

243
00:21:17,470 --> 00:21:22,660
We'll let it go like a quarter mile and we'll end it.

244
00:21:22,730 --> 00:21:24,380
And now when we end it.

245
00:21:24,410 --> 00:21:30,980
Ideally it should be centered on our last run right because we have that all set up from view did appear.

246
00:21:31,580 --> 00:21:40,160
So let's end our on and there it is our polyline right there.

247
00:21:40,170 --> 00:21:45,900
That's pretty cool perfectly centered on the screen we went point four one miles.

248
00:21:45,990 --> 00:21:55,270
And then if we close the last run view it should center to our user.

249
00:21:55,500 --> 00:22:00,360
And now it's centered on our drive in user location suite.

250
00:22:00,420 --> 00:22:04,660
And let's check out our log and make sure everything's in there still.

251
00:22:04,800 --> 00:22:07,860
Man the simulator is really slow.

252
00:22:08,430 --> 00:22:11,400
And there we go we have two runs in there.

253
00:22:11,400 --> 00:22:12,680
It's really cool.

254
00:22:13,170 --> 00:22:13,570
All right.

255
00:22:13,590 --> 00:22:19,590
I'm going to pull up our terminal now and let's go ahead and get ad period.

256
00:22:19,800 --> 00:22:22,890
Commit Desch am and we

257
00:22:26,380 --> 00:22:39,530
set the set the set map view region for last run polyline and user location suite.

258
00:22:39,610 --> 00:22:42,290
And I will let's see

259
00:22:45,710 --> 00:22:49,250
I'm going to do a little bonus lesson before.

260
00:22:49,340 --> 00:22:51,670
So we're pretty much done the app is done.

261
00:22:51,680 --> 00:22:59,050
But I want to show you one more thing with Pauline user pulling data from Rome.

262
00:22:59,060 --> 00:23:04,640
I want to show you how you can pull it out by the key or the ID that we set to it.

263
00:23:04,670 --> 00:23:06,610
So we're going to do that in the next lesson.

264
00:23:06,620 --> 00:23:12,990
And then after that I'm going to have a really cool exercise for you guys.

265
00:23:13,100 --> 00:23:17,720
And that exercise is going to include filtering the log results.

266
00:23:17,720 --> 00:23:24,110
So that will be the last lesson which will be you know our blog post exercise giving you some steps.

267
00:23:24,110 --> 00:23:29,810
So I will see you guys in the next lesson and our app is you know fully functional.

268
00:23:31,280 --> 00:23:32,520
See you guys later.