1
00:00:06,260 --> 00:00:08,230
HEY WHAT'S UP GUYS I'M Jacob.

2
00:00:08,270 --> 00:00:09,790
Debs Lopes dot com.

3
00:00:09,800 --> 00:00:17,300
And in this lesson we are finally going to get our polyline showing on the map so that's really cool.

4
00:00:17,300 --> 00:00:23,520
Let's go ahead and pull apart terminal real quick and I'm going to just make a new branch for this.

5
00:00:23,780 --> 00:00:31,340
So check out Desch B and will call this one less than 18 and then we'll commit to it at the end.

6
00:00:31,550 --> 00:00:34,950
So first things first are begin run.

7
00:00:34,950 --> 00:00:40,220
VC is the only VC that shows the map right.

8
00:00:40,250 --> 00:00:42,500
So if I open up our storyboard

9
00:00:45,020 --> 00:00:47,000
let me just zoom out a little bit.

10
00:00:47,050 --> 00:00:49,060
Our map view and our last run view.

11
00:00:49,060 --> 00:00:50,900
So this is the only thing we have.

12
00:00:51,050 --> 00:00:56,900
And we also have our center on our location button so will hook that up in this lesson too.

13
00:00:56,930 --> 00:01:04,640
So if we go into our beginning run VC we need to go all the way down to the bottom where we have our

14
00:01:04,760 --> 00:01:12,290
extension of C-L location manager or delegate and we need one more method that we need first setting

15
00:01:12,290 --> 00:01:19,630
up our our overlay so we can see it and it looks the way we want it to look and all that stuff.

16
00:01:19,640 --> 00:01:31,440
So we just start typing in renderer we want the render for overlay this one map view where we reference

17
00:01:31,440 --> 00:01:39,560
our map view and it returns our overlay renderer and what we need to do here is create our polyline

18
00:01:39,570 --> 00:01:44,110
so just let polyline that is what we'll call.

19
00:01:44,400 --> 00:01:52,590
And this needs to be equal to the overlay property that's being passed in overlay and we have to cast

20
00:01:52,590 --> 00:01:55,950
this as a M-K polyline

21
00:01:59,350 --> 00:02:00,500
right.

22
00:02:01,480 --> 00:02:09,130
And we also need a polyline renderer so we can take our polyline that we want to show on the map and

23
00:02:09,130 --> 00:02:10,750
render it to the map view.

24
00:02:10,990 --> 00:02:22,120
So we'll go ahead and create a variable called renderer and this is equal to M-K polyline render right

25
00:02:22,120 --> 00:02:23,410
here.

26
00:02:24,400 --> 00:02:37,630
And we need to pass in our polyline wallers not polygon or under Come on auto polyline Paul.

27
00:02:37,660 --> 00:02:39,760
There we go polyline render.

28
00:02:40,000 --> 00:02:45,280
And we want to pass in a polyline and we already created the variable up above.

29
00:02:45,280 --> 00:02:48,770
So we're going to just pass in our polyline overlay.

30
00:02:49,660 --> 00:02:51,100
And that's our renderer now.

31
00:02:51,280 --> 00:02:57,340
Basically all we need to do is set it up so we need to control though the within the color of it.

32
00:02:57,340 --> 00:02:58,010
OK.

33
00:02:58,240 --> 00:03:04,080
So just go ahead and call your renderer and say stroke color and then go ahead and just set this to.

34
00:03:04,080 --> 00:03:14,800
We can do color literal which is right here and just click on it and let's make a like a dark blue or

35
00:03:14,800 --> 00:03:16,130
something like that.

36
00:03:16,360 --> 00:03:18,220
You can pick whatever color you want.

37
00:03:18,340 --> 00:03:20,670
I'll do a little purplish blue.

38
00:03:20,830 --> 00:03:22,600
So that's pretty cool.

39
00:03:22,600 --> 00:03:27,780
And now let's just set our render a line with.

40
00:03:28,390 --> 00:03:35,050
And this is honestly I just kind of messed around and picked a line with that I felt looked good so

41
00:03:35,110 --> 00:03:36,290
it is four.

42
00:03:36,370 --> 00:03:40,640
And obviously once we see our polyline on the screen we can adjust that.

43
00:03:40,750 --> 00:03:47,370
And then all we have to do is return our overlay renderer and it'll be all set up for us.

44
00:03:47,410 --> 00:03:49,960
So return render.

45
00:03:50,690 --> 00:03:51,330
All right.

46
00:03:51,340 --> 00:03:56,350
So that is done and our air goes away.

47
00:03:56,350 --> 00:04:02,570
Save that and now we have to we have to do a few things.

48
00:04:04,390 --> 00:04:09,130
OK one thing I want to do is just move the map view delegate.

49
00:04:09,490 --> 00:04:13,410
I want to just move it down to a view will appear helps

50
00:04:16,540 --> 00:04:17,620
map you delegate.

51
00:04:17,620 --> 00:04:25,250
I'm just going to cut and paste it down here by the manager because I were we're not using the map you

52
00:04:25,250 --> 00:04:32,590
delegate on our run Visi but I want to just make sure we always have the delegate set when this view

53
00:04:32,680 --> 00:04:33,910
appears again.

54
00:04:34,300 --> 00:04:38,880
And now what we need to do is we need to draw our polyline.

55
00:04:38,890 --> 00:04:45,730
So right now we're just calling get last run and we have this whole little function here which is great

56
00:04:45,760 --> 00:04:55,680
and we can actually probably use this and we can actually even call it get last run since our polyline

57
00:04:55,740 --> 00:04:57,720
is our last run right.

58
00:04:57,780 --> 00:05:04,770
We're just going to have to refactor this a little bit and maybe what I'll do is make a new function

59
00:05:04,800 --> 00:05:10,860
above it so we can still see what we're doing because obviously if we don't have a last run we want

60
00:05:10,860 --> 00:05:18,780
to show our users current location if we do have a last run we don't want to show our users location

61
00:05:18,780 --> 00:05:21,480
and we want to show the polyline.

62
00:05:21,480 --> 00:05:31,070
So we're going to have to center our map on our polyline instead of our user and yeah we also need to

63
00:05:31,070 --> 00:05:33,660
center around our user if there is no polyline.

64
00:05:33,950 --> 00:05:42,430
So why don't we go ahead and make a function called Ad last run to map.

65
00:05:42,440 --> 00:05:43,900
I think that's probably good.

66
00:05:44,120 --> 00:05:54,540
And we're not passing in anything but we do need to return a M K polyline But this is going to be optional

67
00:05:54,580 --> 00:05:59,030
because we might not have our last run if it's the first time we open the app.

68
00:05:59,070 --> 00:05:59,530
We're not.

69
00:05:59,570 --> 00:06:04,170
It's going to return nil or nothing to us.

70
00:06:04,170 --> 00:06:06,100
So I think there's a few things we want to do.

71
00:06:06,120 --> 00:06:13,520
Obviously if we have a last run we still need to set our labels and show them and everything.

72
00:06:13,770 --> 00:06:24,400
I want to just make one more function called a set up set up map view.

73
00:06:25,140 --> 00:06:29,230
And instead of calling get last run in view will appear.

74
00:06:29,280 --> 00:06:30,270
Let's call

75
00:06:33,700 --> 00:06:41,200
let's And let's use view did up here just we want to make sure everything rendered before we set up

76
00:06:41,200 --> 00:06:41,680
our map.

77
00:06:41,680 --> 00:06:47,770
Sometimes you can access your map delegate and stuff too soon and it won't actually render anything

78
00:06:47,770 --> 00:06:48,790
to the map.

79
00:06:48,910 --> 00:06:51,540
So let's call our set up map view right here

80
00:06:54,040 --> 00:07:01,860
and in set up map view we need to get an overlay.

81
00:07:01,980 --> 00:07:08,680
So we need to call this function which isn't returning anything yet here to get rid of this air.

82
00:07:08,700 --> 00:07:09,770
Let's just do return.

83
00:07:09,770 --> 00:07:15,320
M K polyline just like that.

84
00:07:15,570 --> 00:07:22,590
OK so inside our set up map we want to see if we have an overlay right.

85
00:07:22,620 --> 00:07:25,930
So whether this is nil or not.

86
00:07:25,980 --> 00:07:32,400
So what we want to do is just do like an if left and then let's call our variable overlay and we just

87
00:07:32,400 --> 00:07:36,830
have to set it equal to our ADD last run to map function right.

88
00:07:37,080 --> 00:07:46,560
So if that's not nil we now have this variable and then like we would just do map view dot add overlay

89
00:07:46,800 --> 00:07:48,230
and send in our overlay.

90
00:07:48,230 --> 00:07:49,010
Right.

91
00:07:49,470 --> 00:07:50,070
All right.

92
00:07:50,160 --> 00:07:51,410
That's easy enough.

93
00:07:51,720 --> 00:07:54,640
There is one problem.

94
00:07:58,090 --> 00:08:04,480
If our map already has overlays showing you don't want to just keep rendering overlays over overlays

95
00:08:04,480 --> 00:08:05,310
right.

96
00:08:05,420 --> 00:08:12,130
And so one thing we need to do is check if our current map view has overlays.

97
00:08:12,160 --> 00:08:18,000
And we're going to check the count and that's how many points are rendered and drawn to each other.

98
00:08:18,010 --> 00:08:23,000
So if this is greater than zero that means our map already has an overlay on it.

99
00:08:23,200 --> 00:08:36,920
And now we want to call our map view and say remove overlays and remove overlays and it's just going

100
00:08:36,920 --> 00:08:42,740
to be our map view that overlays that's the array of overlays that we want to remove.

101
00:08:42,980 --> 00:08:50,000
And basically all that does is if our map view already has an overlay like if we open the app and then

102
00:08:50,000 --> 00:08:55,730
we go and we already had a previous run an overlay would be printed and then if we start a run and go

103
00:08:55,730 --> 00:09:00,630
back to the map view we want to wipe out the one before that.

104
00:09:00,680 --> 00:09:02,940
So that's just cleaning up our map view.

105
00:09:03,200 --> 00:09:08,780
And then we just simply add our new overlay after that.

106
00:09:08,780 --> 00:09:09,170
All right.

107
00:09:09,170 --> 00:09:11,290
So that's pretty easy.

108
00:09:11,330 --> 00:09:18,710
Now what I want to do in our set up map view is hide the stacked view the run background and all that

109
00:09:18,740 --> 00:09:28,100
good stuff so let's copy and paste down in our Get last run the last run stack is false.

110
00:09:28,100 --> 00:09:30,380
All this stuff we wanted to show.

111
00:09:30,410 --> 00:09:38,180
So underneath our ad overlay make sure we add our last stack that is hidden equals to false.

112
00:09:38,180 --> 00:09:43,850
Our last run background view is hidden is equal to false and our last run close button is had and is

113
00:09:43,850 --> 00:09:47,570
equal to false because if we have an overlay we have a last run.

114
00:09:47,570 --> 00:09:49,760
So we want to show that detail.

115
00:09:49,790 --> 00:09:50,630
Okay.

116
00:09:51,050 --> 00:09:53,090
And then that's all we need to do here.

117
00:09:53,120 --> 00:10:00,510
And then if our overlay returns nil to us we want to hide everything right.

118
00:10:00,770 --> 00:10:08,720
So we can copy and paste our HIDDINS set to true in our statement.

119
00:10:08,750 --> 00:10:09,560
Okay.

120
00:10:09,950 --> 00:10:12,030
So that's all we need to do.

121
00:10:12,860 --> 00:10:16,530
And now we can delete our.

122
00:10:16,620 --> 00:10:20,710
Let's see we're still going to use some stuff here.

123
00:10:21,070 --> 00:10:32,290
Okay so if our ad last run gets called and it's not nil we can set our labels and everything in here.

124
00:10:32,290 --> 00:10:36,100
So let's go ahead and just do our guard let.

125
00:10:36,550 --> 00:10:53,080
Last run equals run that get all runs done first and that is grabbing the first run in our in our realm

126
00:10:53,080 --> 00:10:53,770
results

127
00:10:56,120 --> 00:11:04,140
and that's the else we want to just return nil now.

128
00:11:04,570 --> 00:11:10,960
So if there is not any runs if there aren't If there isn't a first run that means we have zero runs

129
00:11:11,290 --> 00:11:18,580
we return nil and returning nil would answer this statement and it would hide our last run Steck view

130
00:11:18,670 --> 00:11:23,670
and our overlay for showing our last runs to exactly what we want.

131
00:11:23,740 --> 00:11:25,000
So now we can delete this.

132
00:11:25,000 --> 00:11:33,900
We don't need that and now will let's just take our pace labeled that text all this stuff copy and paste

133
00:11:34,000 --> 00:11:37,790
right underneath so we can use the last run variable.

134
00:11:38,560 --> 00:11:45,100
And now if we just delete our guest last run function we are refactored pretty good.

135
00:11:45,250 --> 00:11:47,890
OK so we have everything set like it was right.

136
00:11:47,890 --> 00:11:54,700
We have our duration label but now we need to return an M.K. polyline and to make more sense of it.

137
00:11:54,700 --> 00:11:57,160
What is an M-K polyline.

138
00:11:57,180 --> 00:12:08,220
That's of course my clicking isn't working let's just real quick I need to just change this to M-K polyline

139
00:12:09,310 --> 00:12:11,800
and OK here we go.

140
00:12:11,800 --> 00:12:21,520
So we need to pass in a let's see we need to pass in an array of coordinates and also the count of how

141
00:12:21,520 --> 00:12:24,060
many coordinates are getting passed in right.

142
00:12:24,070 --> 00:12:24,390
All right.

143
00:12:24,410 --> 00:12:31,030
So knowing that all of our locations have coordinates in them right.

144
00:12:31,030 --> 00:12:33,510
We just need to add them to an array now.

145
00:12:33,760 --> 00:12:39,470
So why don't we just make a variable called var coordinates.

146
00:12:40,000 --> 00:12:52,080
And this is going to be equal to an array of C-L location coordinates location coordinates and 2 D is

147
00:12:52,090 --> 00:12:52,570
great.

148
00:12:52,570 --> 00:13:01,840
So now that's an array and let's just initialize this as empty array and all we have to do now to add

149
00:13:01,840 --> 00:13:09,010
to the coordinates array is go through all of our locations and our location object our location list.

150
00:13:09,010 --> 00:13:17,080
So if we just make it for loop called location in last Rondout locations.

151
00:13:17,200 --> 00:13:21,760
So we're just going to loop through all the locations saved there.

152
00:13:21,820 --> 00:13:27,400
Now all we have to do is say coordinate dot append and we just need to add

153
00:13:30,160 --> 00:13:32,680
the latitude and longitude from our location.

154
00:13:32,680 --> 00:13:39,870
So since we need a C-L location coordinate to D type right now we're just going to create a new one

155
00:13:39,880 --> 00:13:44,020
so just call C-L location coordinate to D.

156
00:13:44,440 --> 00:13:50,710
And it wants latitude and longitude so we can just simply call our location variable and our for loop

157
00:13:51,980 --> 00:14:04,210
dot latitude and then for longitude location that longs it did and now our array has all the coordinates

158
00:14:04,210 --> 00:14:08,930
added to it.

159
00:14:09,180 --> 00:14:17,970
So let's now just return our M-K polyline with all those coordinates.

160
00:14:18,320 --> 00:14:29,030
So M-K polyline and our coordinates is our Cordner array we just created and the count would be our

161
00:14:29,030 --> 00:14:30,260
locations.

162
00:14:30,470 --> 00:14:38,130
So our last run that locations dark count ok cool.

163
00:14:38,620 --> 00:14:40,100
So let's see.

164
00:14:40,150 --> 00:14:44,920
That should be done and now is this mixture.

165
00:14:44,920 --> 00:14:47,130
Where do we call we call set up map.

166
00:14:47,170 --> 00:14:48,520
Let's go ahead and run this.

167
00:14:48,520 --> 00:14:52,990
And let's see if we get any poly lines rendered to our map you

168
00:15:01,280 --> 00:15:06,650
see our last run of point 1 2 miles and.

169
00:15:06,670 --> 00:15:07,130
All right.

170
00:15:07,130 --> 00:15:10,890
So you can see the line underneath.

171
00:15:11,180 --> 00:15:13,330
I don't know how to zoom in with.

172
00:15:16,430 --> 00:15:18,470
I always forget how to do this.

173
00:15:19,070 --> 00:15:22,430
Oh well but anyways you can see our line obviously.

174
00:15:22,640 --> 00:15:24,890
I think it would probably be nice.

175
00:15:24,950 --> 00:15:33,890
We still need to hook this button up so it centers to our user but I also think if we have a previous

176
00:15:33,890 --> 00:15:37,280
run it's not going to be where our user is.

177
00:15:37,310 --> 00:15:42,550
So like right now our map is showing us our user right.

178
00:15:43,400 --> 00:15:47,820
But you might want to see your last run and you could have ran five miles from where you are right now.

179
00:15:47,840 --> 00:15:55,760
So we're going to have to be able to center on our last run if there is one or center on our user so

180
00:15:55,760 --> 00:16:00,690
we're pretty much wrapped up here like everything is really cool.

181
00:16:01,070 --> 00:16:05,250
There's not much for us to do other than hook up our center to user button.

182
00:16:05,570 --> 00:16:09,180
And also we'll zoom in on our last run.

183
00:16:09,320 --> 00:16:15,710
So in the next lesson we'll finish up this app and I'll show you how you can zoom in on our polyline

184
00:16:15,770 --> 00:16:17,990
and also zoom in on our user.

185
00:16:17,990 --> 00:16:19,340
So I will see you then.

186
00:16:19,340 --> 00:16:27,830
But first let's pull up our terminal and let's just do a get ad period and get commit dash dash em.

187
00:16:28,070 --> 00:16:37,690
And we got our wholey of line rendered to map you.

188
00:16:38,570 --> 00:16:39,310
All right sweet.

189
00:16:39,320 --> 00:16:39,980
And that is done.

190
00:16:39,980 --> 00:16:41,270
I'll see you in the next lesson.