1
00:00:08,080 --> 00:00:11,060
Hey guys this is Caleb with slopes dot com.

2
00:00:11,080 --> 00:00:16,960
And in this video we're going to add a UI tap gesture recognizers that we can double tap on our map

3
00:00:16,970 --> 00:00:22,420
view drop a pen and we're also going to set up the function to animate the pin dropping.

4
00:00:22,420 --> 00:00:27,670
We're going to implement one of the delegate methods from M-K map view delegate that allows us to customize

5
00:00:27,910 --> 00:00:29,500
the appearance of those pins.

6
00:00:29,500 --> 00:00:34,460
We're going to set it to be orange which is cool just like our interface is a little bit orange.

7
00:00:34,600 --> 00:00:36,000
And let's get into it now.

8
00:00:36,010 --> 00:00:39,260
So pull open that X code project just like that.

9
00:00:39,640 --> 00:00:44,630
And we're going to start by actually creating a function that will create our tap gesture.

10
00:00:44,710 --> 00:00:53,880
So to do that go ahead and beneath you did load write a function called phunk add double tap.

11
00:00:54,020 --> 00:00:54,730
Whoa.

12
00:00:54,880 --> 00:00:56,450
Double tap.

13
00:00:56,710 --> 00:01:02,500
And inside of here we're going to create a constant called Double tap and it's going to be you tap gesture

14
00:01:02,590 --> 00:01:05,090
recognizer it's going to be an instance of that.

15
00:01:05,110 --> 00:01:09,550
Now you tap just your recognizer needs a target and an action.

16
00:01:09,550 --> 00:01:16,590
So the target is going to be self and the action is going to be a function that we have not yet created.

17
00:01:16,750 --> 00:01:21,640
So we need to actually create that function first and we're going to do it in M-K map view delegate

18
00:01:21,650 --> 00:01:23,400
it's going to be a custom function.

19
00:01:23,440 --> 00:01:27,940
So go ahead and write phunk drop pin.

20
00:01:28,150 --> 00:01:32,490
And this is where we will drop the pin on the map.

21
00:01:32,560 --> 00:01:38,020
We're not going to do it yet but we're going to use that in order to set up our tap gesture recognizer

22
00:01:38,440 --> 00:01:41,740
so to do this we need to type the pound sign selector.

23
00:01:41,740 --> 00:01:43,910
Or as I like to call it hash tag selector.

24
00:01:44,350 --> 00:01:48,520
And then inside of the parentheses we're going to just call drop pin because that's the name of the

25
00:01:48,520 --> 00:01:49,740
function that we're using.

26
00:01:49,920 --> 00:01:54,130
Ok super easy but you're going to notice that it gives us some errors.

27
00:01:54,130 --> 00:01:59,980
It's going to say argument of hash tag selector refers to instance method drop and that is not exposed

28
00:01:59,980 --> 00:02:01,480
to Objective C.

29
00:02:01,510 --> 00:02:07,330
All we need to do is just add at obey C for objective c and basically that's going to fix that problem

30
00:02:07,360 --> 00:02:07,840
for us.

31
00:02:07,840 --> 00:02:13,000
You'll notice it added that little there little thingy there at the front which basically just exposes

32
00:02:13,000 --> 00:02:14,430
this function to Objective-C.

33
00:02:14,460 --> 00:02:18,130
I tap just recognize your needs that that's fine.

34
00:02:18,130 --> 00:02:23,350
What we need to do now is to configure the settings of our tap gesture by typing double tap number of

35
00:02:23,350 --> 00:02:25,360
taps required and it's a double tap.

36
00:02:25,360 --> 00:02:32,350
That means we need two taps to get this to work as well it's not going to work unless we conform to

37
00:02:32,350 --> 00:02:38,120
the wire tap gesture delegate or you gesture recognizer delegate.

38
00:02:38,140 --> 00:02:40,010
So go ahead and type double tap.

39
00:02:40,010 --> 00:02:41,980
Delegate equals self.

40
00:02:41,980 --> 00:02:47,740
But if we try to build this now you'll notice that saying does not cannot assign it to you I gesture

41
00:02:47,740 --> 00:02:49,100
recognize or delegate.

42
00:02:49,270 --> 00:02:53,320
And that's because we are not yet inheriting from that delegate.

43
00:02:53,320 --> 00:02:54,810
So let's do that now.

44
00:02:54,880 --> 00:02:55,450
Go ahead.

45
00:02:55,460 --> 00:03:00,240
Up at the top of your class go ahead and type you a gesture recognize or delegate.

46
00:03:00,670 --> 00:03:06,150
And now if we build it you'll notice that error goes away because now the two are linked.

47
00:03:06,160 --> 00:03:12,440
The double tap delegate here is going to be able to utilize map b c as its delegate.

48
00:03:12,760 --> 00:03:13,780
Pretty cool.

49
00:03:13,780 --> 00:03:19,650
Now the last thing we need to do this tap gesture is worthless unless we add it to a certain view.

50
00:03:19,660 --> 00:03:26,860
So in order to do that we're going to type a map you add gesture recognizer and we're going to pass

51
00:03:26,860 --> 00:03:28,400
in double tap.

52
00:03:28,600 --> 00:03:29,470
OK.

53
00:03:29,470 --> 00:03:34,720
So now whenever we call this function we're adding a tap gesture recognizer to the map that allows us

54
00:03:34,720 --> 00:03:40,560
to double tap it and you know what I think.

55
00:03:41,500 --> 00:03:47,440
Let's go ahead and let's set it up so that as soon as the view loads the double tap is added.

56
00:03:47,470 --> 00:03:48,240
All right.

57
00:03:48,430 --> 00:03:49,660
Very cool.

58
00:03:49,660 --> 00:03:50,350
And you know what.

59
00:03:50,350 --> 00:03:52,220
Just for fun remember.

60
00:03:52,390 --> 00:03:55,650
As soon as the double tap happens it's going to call drop pin.

61
00:03:55,660 --> 00:04:01,060
So let's go ahead and let's print the pin was dropped.

62
00:04:01,060 --> 00:04:04,350
Obviously it's not going to drop a pin but we'll just see if our double tap is working.

63
00:04:04,350 --> 00:04:07,410
So I'm going to build this to an iPhone 7.

64
00:04:07,900 --> 00:04:08,920
So go ahead and build and run.

65
00:04:08,930 --> 00:04:10,440
Let's let's try it out.

66
00:04:10,660 --> 00:04:12,070
Let's see how we're doing.

67
00:04:12,310 --> 00:04:15,450
And let's see if our.

68
00:04:15,770 --> 00:04:18,270
I guess we don't need the 7 plus.

69
00:04:18,290 --> 00:04:19,210
Can I get rid of it.

70
00:04:22,260 --> 00:04:23,080
Let's see.

71
00:04:23,100 --> 00:04:24,050
Well we can minimize it.

72
00:04:24,060 --> 00:04:25,020
That's fine.

73
00:04:25,020 --> 00:04:28,080
All right cool so let's always allow it to use our location.

74
00:04:28,080 --> 00:04:34,440
You'll see that will zoom in and let's see if we double click popped up something hey pin was dropped

75
00:04:35,220 --> 00:04:36,120
pin was dropped.

76
00:04:36,120 --> 00:04:37,360
Double click pin was dropped.

77
00:04:37,380 --> 00:04:39,410
Click click click click.

78
00:04:39,420 --> 00:04:44,100
All right cool so our tap gesture is working exactly as we wanted it to.

79
00:04:44,100 --> 00:04:45,270
That's awesome news.

80
00:04:45,360 --> 00:04:46,140
Very very good.

81
00:04:46,140 --> 00:04:50,950
So now we can actually get into dropping a pin using our cool drop in function.

82
00:04:51,000 --> 00:04:52,000
So let's do that.

83
00:04:52,320 --> 00:04:58,920
Let's go ahead and get rid of that boiler plate junk and what we're going to do is we are first going

84
00:04:58,920 --> 00:05:02,860
to go ahead and we're going to create a touchpoint.

85
00:05:03,020 --> 00:05:03,600
OK.

86
00:05:03,840 --> 00:05:09,570
And a touchpoint is going to be used to basically convert where we touch on the map to the exact coordinate

87
00:05:09,660 --> 00:05:12,160
that is being shown on the map where we touched.

88
00:05:12,300 --> 00:05:17,700
So to create a touch point go ahead and just type let and touch point

89
00:05:20,420 --> 00:05:22,390
equals and you know what.

90
00:05:22,580 --> 00:05:28,600
This is where we actually need to change the way our function works now drop pin does not take any parameters

91
00:05:28,640 --> 00:05:29,890
but we need it to.

92
00:05:29,900 --> 00:05:35,450
It needs information from our you I tap gesture recognizers so to do that we're actually going to pass

93
00:05:35,480 --> 00:05:39,650
in a sender of you I tap gesture recognizer.

94
00:05:39,650 --> 00:05:43,280
Now that means we also need to change our function up here.

95
00:05:43,310 --> 00:05:47,890
Right here drop in and to do that just go ahead and call it again drop in.

96
00:05:48,200 --> 00:05:50,150
And this time it's going to use ascender.

97
00:05:50,150 --> 00:05:56,410
Now the coolest thing is that when we use this with a selector it's going to pass in our UI tap gesture

98
00:05:56,420 --> 00:05:58,380
recognizer into this function.

99
00:05:58,610 --> 00:06:00,210
So now where is it.

100
00:06:00,270 --> 00:06:00,490
Yeah.

101
00:06:00,500 --> 00:06:06,350
Now this sender that came in we're going to be able to access where we touched on the screen we can

102
00:06:06,350 --> 00:06:09,920
get the exact point where we touched so to do that.

103
00:06:09,920 --> 00:06:15,010
Go ahead and type sender and we're going to type location in you view.

104
00:06:15,200 --> 00:06:21,980
Now the view of course is the map view when we use this it's going to print out our touchpoint So let's

105
00:06:21,980 --> 00:06:22,630
try that.

106
00:06:22,910 --> 00:06:25,020
Print touchpoint.

107
00:06:25,340 --> 00:06:33,410
OK let's build and run and let's see what it prints out to the terminal or do the console rather let's

108
00:06:33,430 --> 00:06:34,280
give it a shot.

109
00:06:35,150 --> 00:06:37,800
Rigaud double tap and look at that.

110
00:06:38,800 --> 00:06:44,500
It prints out the exact coordinates not GPS coordinates but on the screen if I get up close to the top

111
00:06:44,500 --> 00:06:47,600
here I don't know if it'll work oh yeah because it's not the map.

112
00:06:47,770 --> 00:06:49,500
But this remember is 70.

113
00:06:49,510 --> 00:06:52,000
So if I click here it should be about 70.

114
00:06:52,030 --> 00:06:54,880
Seventy one point five for the y value.

115
00:06:54,880 --> 00:06:56,060
Very very cool.

116
00:06:56,080 --> 00:07:01,150
So it looks like it's working its converting where we tap into a touch point and now we're going to

117
00:07:01,150 --> 00:07:07,670
do is we're going to convert that touchpoint into a GPS coordinate so go ahead and type let touch.

118
00:07:07,680 --> 00:07:14,380
Coordinate equals map view convert and you're going to notice that there's a lot of options here.

119
00:07:14,470 --> 00:07:22,820
We need to convert a C.G. point and we need to convert it to a coordinate from the map view.

120
00:07:22,870 --> 00:07:31,850
So let's find that to whoops not C-g recked sorry convert point from view.

121
00:07:32,070 --> 00:07:33,420
No that's not right.

122
00:07:33,420 --> 00:07:38,600
We need to convert it to coordinate whereas that to coordinate that is all right.

123
00:07:38,600 --> 00:07:42,920
So convert this point to a co-ordinate from the map view.

124
00:07:43,260 --> 00:07:48,600
Easy as that so passen the touchpoint as our point and the view is going to be the map view.

125
00:07:48,600 --> 00:07:51,760
So this is going to now convert it to GPS coordinates.

126
00:07:51,780 --> 00:07:57,960
This is incredibly useful for us because we can pass this then later into the flicker you the flicker

127
00:07:58,020 --> 00:08:03,140
API and it's going to let us download images from that specific location where we drop the pin.

128
00:08:03,380 --> 00:08:08,400
OK so now what we're going to do is we're going to pass that coordinate into one of those little pins

129
00:08:08,400 --> 00:08:10,070
that drops down on the map view.

130
00:08:10,290 --> 00:08:16,830
And so in order to do that we need to create a custom subclass of M-K annotation that is the class that

131
00:08:16,830 --> 00:08:18,040
we need to use.

132
00:08:18,090 --> 00:08:22,890
And let's go ahead and go on the View folder and let's create a new file.

133
00:08:23,210 --> 00:08:28,470
Ok it's going to be a swift file and we're going to call this drop a bull pen.

134
00:08:28,890 --> 00:08:30,320
Press Enter to save it.

135
00:08:30,480 --> 00:08:34,930
And now let's create a class called drop a weapon.

136
00:08:35,610 --> 00:08:36,000
All right.

137
00:08:36,000 --> 00:08:36,840
And you know what.

138
00:08:36,840 --> 00:08:40,560
Before we go any further we need to import UI kit.

139
00:08:40,560 --> 00:08:43,960
And we also need to import a map kit.

140
00:08:44,040 --> 00:08:49,110
Now this class is going to inherit from both an object and M.K. annotation.

141
00:08:49,110 --> 00:08:52,860
So go ahead and do that and a subject and M.K. annotation.

142
00:08:52,860 --> 00:08:54,450
Now that's just something you need to know.

143
00:08:54,780 --> 00:09:00,180
If you create a custom pin on a map if you've seen my ride sharing course you know that we do this we

144
00:09:00,180 --> 00:09:05,580
create a custom pin with a nice little our own little graphic if you want to do that it needs to inherit

145
00:09:05,580 --> 00:09:10,740
from an object and connotation that's just part of how it works on the map.

146
00:09:10,740 --> 00:09:16,140
So we need to create two different variables that we're going to use in this annotation.

147
00:09:16,140 --> 00:09:20,500
One of them is going to be to hold the coordinate of the annotation and the other is going to be for

148
00:09:20,500 --> 00:09:21,960
an identifier.

149
00:09:21,960 --> 00:09:26,010
This helps us to identify a certain pin later on.

150
00:09:26,010 --> 00:09:33,210
And so to begin we're going to go ahead and type var coordinate that's going to be of type C-L location

151
00:09:33,290 --> 00:09:41,580
coordinate to D and the identifier is going to be var identifier of type string.

152
00:09:41,580 --> 00:09:43,890
Now we need to initialize these as you might expect.

153
00:09:43,890 --> 00:09:45,620
So go ahead and type init.

154
00:09:45,880 --> 00:09:48,520
Not override in it innit.

155
00:09:48,570 --> 00:09:57,720
And then of course coordinate coordinate of type C-L location coordinate to D and the identifier of

156
00:09:57,720 --> 00:09:59,250
type string.

157
00:09:59,910 --> 00:10:00,230
OK.

158
00:10:00,240 --> 00:10:04,760
And now we're going to set the coordinate to be equal to coordinate.

159
00:10:04,770 --> 00:10:12,660
When we initialize it then we're going to type identifier self identifier so we set the one for class

160
00:10:13,140 --> 00:10:16,320
equal to the identifier we pass in at initialization.

161
00:10:16,320 --> 00:10:22,110
Now at the bottom we need to call Super Dome in it and that's going to allow us to use this as an initializer

162
00:10:22,110 --> 00:10:23,930
for our custom pin.

163
00:10:23,940 --> 00:10:30,640
The only thing is that the coordinate cannot be properly set unless it is a dynamic variable.

164
00:10:30,930 --> 00:10:31,630
OK.

165
00:10:31,870 --> 00:10:39,800
Now dynamic variables are able to be modified the way that we need to to create these and connotations.

166
00:10:39,990 --> 00:10:45,030
So with this class created we now can create the annotation to drop on our map.

167
00:10:45,090 --> 00:10:50,880
So go ahead and head back into map Visi And what we're going to do is we're going to create an instance

168
00:10:50,910 --> 00:10:52,380
of drop of a pin.

169
00:10:52,680 --> 00:10:58,920
So we're going to go ahead and type let annotation equals drop a pin and we're going to initialize it

170
00:10:58,920 --> 00:11:01,530
with a coordinate and an identifier.

171
00:11:01,530 --> 00:11:06,990
So the coordinate of course is touch coordinate we just made that and our identifier we're just going

172
00:11:06,990 --> 00:11:11,060
to call this drop a pin.

173
00:11:11,640 --> 00:11:16,800
OK so we're going to use that later to view the pin on the screen you'll see why.

174
00:11:16,820 --> 00:11:18,780
Or you'll see how I mean.

175
00:11:18,790 --> 00:11:20,640
And OK so we have our annotation.

176
00:11:20,640 --> 00:11:26,140
This is an M-K annotation and it's going to drop as a nice pretty little pin.

177
00:11:26,370 --> 00:11:30,070
But the issue is that this is no good unless we add it to the map view.

178
00:11:30,180 --> 00:11:38,930
So go ahead and type map you add annotation and drop in annotation can now it'll show on the map view.

179
00:11:39,270 --> 00:11:45,840
Now the only thing we need to do is we need to set it so that the map moves over and center this pin

180
00:11:45,840 --> 00:11:48,590
because it doesn't center the pin It just doesn't look as cool.

181
00:11:48,690 --> 00:11:53,800
And so to do that we're basically going to use similar code to center map on user location.

182
00:11:53,850 --> 00:11:58,420
We're going to create a coordinate region and we're going to set the map to show that region.

183
00:11:58,440 --> 00:12:06,750
So go ahead and type let coordinate region equals M.K. coordinate region make with distance the center

184
00:12:06,750 --> 00:12:12,300
coordinate of course is going to be touch coordinate latitudinal meters is going to be the same as above.

185
00:12:12,300 --> 00:12:17,430
Region radius times too because we don't want it to like zoom in or zoom out or do anything we want

186
00:12:17,430 --> 00:12:22,840
it to stay about the same height over the map region radius times 2.0.

187
00:12:23,430 --> 00:12:25,460
That's going to give us the same exact region.

188
00:12:25,650 --> 00:12:32,620
And now we're going to call map view that set region coordinate region and animate will be true.

189
00:12:32,630 --> 00:12:38,750
Now whenever we tap on the map it's going to drop a pin and it'll zoom zoom but it'll pan over to exactly

190
00:12:38,750 --> 00:12:39,690
where we dropped it.

191
00:12:39,710 --> 00:12:41,010
Let's go give it a shot.

192
00:12:41,030 --> 00:12:42,160
Gordon BuildOn run this.

193
00:12:42,170 --> 00:12:44,520
And let's go see if it worked.

194
00:12:44,700 --> 00:12:45,680
Let's give it a try.

195
00:12:49,100 --> 00:12:49,320
OK.

196
00:12:49,330 --> 00:12:50,660
That looks pretty good.

197
00:12:50,710 --> 00:12:55,040
Let's double click and let's see if it drops a opin.

198
00:12:55,110 --> 00:12:56,170
Hey look at that.

199
00:12:56,220 --> 00:12:57,430
It dropped a pin.

200
00:12:57,540 --> 00:13:02,360
And beyond that it actually yeah I really like that it centers.

201
00:13:02,360 --> 00:13:03,330
Look at that.

202
00:13:03,330 --> 00:13:09,960
Now there is a problem though is that whenever we drop a pin the old one stays and we don't want that.

203
00:13:09,960 --> 00:13:14,340
We want the next pin to show and the old pin to erase.

204
00:13:14,340 --> 00:13:18,420
So what we're going to do is we're going to quickly write a function called remove pin that's going

205
00:13:18,420 --> 00:13:23,580
to wipe all the pins off the map and just add the new one and we'll call that right before we drop a

206
00:13:23,580 --> 00:13:24,200
pin.

207
00:13:24,510 --> 00:13:29,310
So let's add that below we'll call that phunk remove pin.

208
00:13:30,030 --> 00:13:33,870
And we're going to basically just cycle through all of the annotations in the map view and remove them

209
00:13:33,870 --> 00:13:37,800
all which is OK because we only want it to show one pin at a time.

210
00:13:38,010 --> 00:13:46,170
So to do that type for annotation in map view annotations we're going to go ahead and type map view

211
00:13:46,470 --> 00:13:51,360
remove annotation and pass in that annotation.

212
00:13:51,360 --> 00:13:57,540
So now what we're going to do is in droppin before we add a pin we're going to go ahead and we're going

213
00:13:57,540 --> 00:14:00,000
to call remove pin.

214
00:14:00,000 --> 00:14:06,170
All right and you know what you might be thinking well what if there are no pins cause an issue.

215
00:14:06,430 --> 00:14:13,650
That's not true because this blue dot is an annotation that's added by default it will always be there.

216
00:14:13,720 --> 00:14:16,900
And so it's OK if we call this because it's actually going to remove it.

217
00:14:17,050 --> 00:14:22,180
But it is exempt from removing this one because it's always shown when the location is being used so

218
00:14:22,390 --> 00:14:23,430
build and run.

219
00:14:23,500 --> 00:14:29,760
Let's go see if it properly removes our pin and adds a new one and then we'll call this video quits.

220
00:14:29,800 --> 00:14:34,000
We zoom in we add a pin that looks good.

221
00:14:35,630 --> 00:14:37,330
Yes look at that it removes it.

222
00:14:37,340 --> 00:14:41,530
It zooms to the next one and we can still center our map if we want.

223
00:14:41,530 --> 00:14:44,160
This is looking amazing.

224
00:14:44,170 --> 00:14:45,110
Awesome guys.

225
00:14:45,280 --> 00:14:46,260
So this is great.

226
00:14:46,270 --> 00:14:50,920
In the next video we're going to change this pin so that we can modify the color we don't want it to

227
00:14:50,920 --> 00:14:51,700
be red.

228
00:14:51,790 --> 00:14:55,210
We want it instead to be orange to match our application.

229
00:14:55,210 --> 00:14:58,690
So head over to the next video and we'll set up that custom view.

230
00:14:58,730 --> 00:14:58,990
Now.