1 00:00:08,130 --> 00:00:15,070 Hey guys this is Caleb with slopes dot com and in this video we're going to add a UI tap gesture recognizers 2 00:00:15,090 --> 00:00:21,570 that we can double tap on our map view drop a pen and we're also going to set up the function to animate 3 00:00:21,570 --> 00:00:22,470 the pin dropping. 4 00:00:22,470 --> 00:00:27,750 We're going to implement one of the delegate methods from MKM that few delegate that allows us to customize 5 00:00:27,960 --> 00:00:29,550 the appearance of those pins. 6 00:00:29,550 --> 00:00:34,520 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,680 --> 00:00:36,050 And let's get into it now. 8 00:00:36,060 --> 00:00:42,210 So pull open that X code project just like that and we're going to start by actually creating a function 9 00:00:42,240 --> 00:00:44,610 that will create our tap gesture. 10 00:00:44,760 --> 00:00:54,110 So to do that go ahead and beneath if you did load write a function called phunk add double tap. 11 00:00:54,110 --> 00:00:54,740 Whoa. 12 00:00:54,930 --> 00:00:56,470 Double tap. 13 00:00:56,750 --> 00:01:02,580 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,640 --> 00:01:05,150 recognizer it's going to be an instance of that. 15 00:01:05,160 --> 00:01:09,600 Now you I tap just a recognizer needs a target and an action. 16 00:01:09,600 --> 00:01:16,650 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,800 --> 00:01:21,690 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,700 --> 00:01:23,490 it's going to be a custom function. 19 00:01:23,490 --> 00:01:27,650 So go ahead and write phunk drop pin. 20 00:01:28,200 --> 00:01:32,460 And this is where we will drop the pin on the map. 21 00:01:32,610 --> 00:01:38,070 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,490 --> 00:01:41,760 so to do this we need to type the pound sign selector. 23 00:01:41,790 --> 00:01:44,010 Or as I like to call it hash tag selector. 24 00:01:44,400 --> 00:01:48,570 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,570 --> 00:01:49,790 function that we're using. 26 00:01:49,970 --> 00:01:54,180 Ok super easy but you're going to notice that it gives us some errors. 27 00:01:54,180 --> 00:02:00,030 It's going to say argument of hash tag selector refers to instance method drop and that is not exposed 28 00:02:00,030 --> 00:02:01,530 to Objective C. 29 00:02:01,560 --> 00:02:07,380 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,410 --> 00:02:07,910 for us. 31 00:02:07,910 --> 00:02:13,050 You'll notice it added that little there little thingy there at the front which basically just exposes 32 00:02:13,050 --> 00:02:17,730 this function to objective Objective-C you I tap just recognizer needs that that's fine. 33 00:02:18,180 --> 00:02:23,400 What we need to do now is to configure the settings of our tap gesture by typing double tap number of 34 00:02:23,400 --> 00:02:25,410 taps required and it's a double tap. 35 00:02:25,410 --> 00:02:32,400 That means we need two taps to get this to work as well it's not going to work unless we conform to 36 00:02:32,400 --> 00:02:38,190 the wire tap gesture delegate or you gesture recognizer delegate. 37 00:02:38,190 --> 00:02:41,940 So go ahead and type double tap delegate equals self. 38 00:02:42,030 --> 00:02:47,790 But if we try to build this now you'll notice that saying does not cannot assign it to you I gesture 39 00:02:47,790 --> 00:02:49,160 recognize or delegate. 40 00:02:49,320 --> 00:02:53,370 And that's because we are not yet inheriting from that delegate. 41 00:02:53,370 --> 00:02:54,860 So let's do that now. 42 00:02:54,930 --> 00:02:55,530 Go ahead. 43 00:02:55,540 --> 00:03:00,440 Up at the top of your class go ahead and type you a gesture recognize or delegate. 44 00:03:00,720 --> 00:03:06,200 And now if we build it you'll notice that error goes away because now the two are linked. 45 00:03:06,210 --> 00:03:12,720 The double tap delegate here is going to be able to utilize B VC as its delegate. 46 00:03:12,810 --> 00:03:13,830 Pretty cool. 47 00:03:13,830 --> 00:03:19,710 Now the last thing we need to do this tap gesture is worthless unless we add it to a certain view. 48 00:03:19,710 --> 00:03:27,270 So in order to do that we're going to type map view add gesture recognizer and we're going to pass in 49 00:03:27,660 --> 00:03:28,480 double tap. 50 00:03:28,680 --> 00:03:29,520 OK. 51 00:03:29,520 --> 00:03:34,770 So now whenever we call this function we're adding a tap gesture recognizer to the map that allows us 52 00:03:34,770 --> 00:03:40,680 to double tap it and you know what I think. 53 00:03:41,550 --> 00:03:47,490 Let's go ahead and let's set it up so that as soon as the view loads the double tap is added. 54 00:03:47,520 --> 00:03:48,480 All right. 55 00:03:48,480 --> 00:03:49,680 Very cool. 56 00:03:49,710 --> 00:03:50,400 And you know what. 57 00:03:50,400 --> 00:03:51,810 Just for fun. 58 00:03:52,020 --> 00:03:55,520 Remember as soon as the double tap happens it's going to call drop pin. 59 00:03:55,710 --> 00:04:01,110 So let's go ahead and let's print the pin was dropped. 60 00:04:01,110 --> 00:04:04,410 Obviously it's not going to drop a pin but we'll just see if our double tap is working. 61 00:04:04,410 --> 00:04:07,470 So I'm going to build this to an iPhone 7. 62 00:04:07,950 --> 00:04:08,990 So go ahead and build and run. 63 00:04:09,000 --> 00:04:10,500 Let's let's try it out. 64 00:04:10,710 --> 00:04:12,110 Let's see how we're doing. 65 00:04:12,360 --> 00:04:15,510 And let's see if our. 66 00:04:15,830 --> 00:04:18,300 I guess we don't need the 7 plus. 67 00:04:18,320 --> 00:04:19,280 Can I get rid of it. 68 00:04:22,310 --> 00:04:23,140 Let's see. 69 00:04:23,160 --> 00:04:24,110 Well we can minimize it. 70 00:04:24,110 --> 00:04:25,070 That's fine. 71 00:04:25,070 --> 00:04:28,130 All right cool so let's always allow it to use our location. 72 00:04:28,130 --> 00:04:34,480 You'll see that will zoom in and let's see if we double click popped up something hey pin was dropped 73 00:04:35,260 --> 00:04:36,170 pin was dropped. 74 00:04:36,170 --> 00:04:37,410 Double click pin was dropped. 75 00:04:37,430 --> 00:04:39,460 Click click click click. 76 00:04:39,470 --> 00:04:39,990 All right cool. 77 00:04:40,000 --> 00:04:44,150 So our tap gesture is working exactly as we wanted it to. 78 00:04:44,150 --> 00:04:45,320 That's awesome news. 79 00:04:45,410 --> 00:04:46,190 Very very good. 80 00:04:46,190 --> 00:04:50,810 So now we can actually get into dropping a pin using our cool drop in function. 81 00:04:51,050 --> 00:04:52,030 So let's do that. 82 00:04:52,370 --> 00:04:58,970 Let's go ahead and get rid of that boiler plate junk and what we're going to do is we are first going 83 00:04:58,970 --> 00:05:02,950 to go ahead and we're going to create a touchpoint. 84 00:05:03,070 --> 00:05:03,600 OK. 85 00:05:03,890 --> 00:05:09,620 And a touchpoint is going to be used to basically convert where we touch on the map to the exact coordinate 86 00:05:09,710 --> 00:05:12,200 that is being shown on the map where we touched. 87 00:05:12,350 --> 00:05:17,750 So to create a touch point go ahead and just type let and touch point 88 00:05:20,470 --> 00:05:22,440 equals and you know what. 89 00:05:22,630 --> 00:05:28,650 This is where we actually need to change the way our function works now drop pin does not take any parameters 90 00:05:28,690 --> 00:05:29,940 but we need it to. 91 00:05:29,950 --> 00:05:35,500 It needs information from our you I tap gesture recognizers so to do that we're actually going to pass 92 00:05:35,530 --> 00:05:39,660 in a sender of you I tap gesture recognizer. 93 00:05:39,700 --> 00:05:43,090 Now that means we also need to change our function up here. 94 00:05:43,360 --> 00:05:47,940 Right here drop in and to do that just go ahead and call it again drop in. 95 00:05:48,250 --> 00:05:54,070 And this time it's going to use ascender now the coolest thing is that when we use this with a selector 96 00:05:54,340 --> 00:05:58,430 it's going to pass in our UI tap gesture recognizer into this function. 97 00:05:58,660 --> 00:06:00,250 So now where is it. 98 00:06:00,320 --> 00:06:00,560 Yeah. 99 00:06:00,570 --> 00:06:06,430 Now this sender that came in we're going to be able to access where we touched on the screen we can 100 00:06:06,430 --> 00:06:09,970 get the exact point where we touched so to do that. 101 00:06:09,970 --> 00:06:15,230 Go ahead and type sender and we're going to type location in you view. 102 00:06:15,250 --> 00:06:21,780 Now the view of course is the map view when we use this it's going to print out our touchpoint. 103 00:06:21,780 --> 00:06:22,700 So let's try that. 104 00:06:22,960 --> 00:06:30,650 Print touchpoint OK let's build and run and let's see what it prints out to the terminal or do the console 105 00:06:30,650 --> 00:06:34,330 rather let's give it a shot. 106 00:06:35,070 --> 00:06:35,800 Here we go. 107 00:06:35,800 --> 00:06:37,880 Double tap and look at that. 108 00:06:38,850 --> 00:06:44,550 It prints out the exact coordinates not GPS coordinates but on the screen if I get up close to the top 109 00:06:44,550 --> 00:06:45,320 here. 110 00:06:45,690 --> 00:06:49,550 I don't know if it'll work because it's not the map view but this remember is 70 tall. 111 00:06:49,560 --> 00:06:51,960 So if I click here it should be about 70. 112 00:06:52,080 --> 00:06:54,930 Seventy one point five for the y value. 113 00:06:54,930 --> 00:06:56,110 Very very cool. 114 00:06:56,130 --> 00:07:00,220 So it looks like it's working its converting where we tap into a touchpoint. 115 00:07:00,390 --> 00:07:04,670 And now we're going to do is we're going to convert that touchpoint into a GPS coordinate. 116 00:07:04,980 --> 00:07:12,920 So go ahead and type let touch coordinate equals map view convert and you're going to notice that there's 117 00:07:12,960 --> 00:07:14,310 a lot of options here. 118 00:07:14,520 --> 00:07:22,880 We need to convert a C.G. point and we need to convert it to a coordinate from the map view. 119 00:07:22,920 --> 00:07:31,900 So let's find that to whoops not C.G. recked sorry convert point from view. 120 00:07:32,130 --> 00:07:33,480 No that's not right. 121 00:07:33,480 --> 00:07:37,950 We need to convert it to coordinate whereas that to coordinate. 122 00:07:37,970 --> 00:07:38,440 There it is. 123 00:07:38,460 --> 00:07:43,250 All right so convert this point to a coordinate from the map view. 124 00:07:43,320 --> 00:07:48,630 Easy is that so passing the touch point as our point and the view is going to be the map view. 125 00:07:48,630 --> 00:07:51,830 So this is going to now convert it to GPS GPS coordinates. 126 00:07:51,840 --> 00:07:58,020 This is incredibly useful for us because we can pass this then later into the flicker you the flicker 127 00:07:58,080 --> 00:08:03,200 API and it's going to let us download images from that specific location where we drop the pin. 128 00:08:03,440 --> 00:08:08,460 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,460 --> 00:08:10,140 that drops down on the map view. 130 00:08:10,340 --> 00:08:16,890 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,890 --> 00:08:18,100 we need to use. 132 00:08:18,150 --> 00:08:23,180 And let's go ahead and go on the View folder and let's create a new file. 133 00:08:23,480 --> 00:08:28,390 It's going to be a swift file and we're going to call this drop a bull pen. 134 00:08:28,620 --> 00:08:30,300 They press enter to save it. 135 00:08:30,540 --> 00:08:35,660 And now let's create a class called drop a pin. 136 00:08:35,670 --> 00:08:36,020 All right. 137 00:08:36,030 --> 00:08:40,610 And you know what before we go any further we need to import you like that. 138 00:08:40,620 --> 00:08:43,220 And we also need to import a map kit. 139 00:08:44,100 --> 00:08:49,170 Now this class is going to inherit from both an object and M.K. annotation. 140 00:08:49,170 --> 00:08:52,920 So go ahead and do that and a subject and K annotation. 141 00:08:52,920 --> 00:08:54,520 Now that's just something you need to know. 142 00:08:54,810 --> 00:09:00,240 If you create a custom pin on a map if you've seen my ride sharing course you know that we do this we 143 00:09:00,240 --> 00:09:03,770 create a custom pin with a nice little our own little graphic. 144 00:09:04,050 --> 00:09:08,580 If you want to do that it needs to inherit from an object and connotation that's just part of how it 145 00:09:08,580 --> 00:09:10,770 works on the map. 146 00:09:10,770 --> 00:09:16,200 So we need to create two different variables that we're going to use in this annotation. 147 00:09:16,200 --> 00:09:20,590 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,590 --> 00:09:22,010 an identifier. 149 00:09:22,020 --> 00:09:26,070 This helps us to identify a certain pin later on. 150 00:09:26,070 --> 00:09:33,270 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,330 --> 00:09:41,640 coordinate to D and the identifier is going to be var identifier of type string. 152 00:09:41,640 --> 00:09:43,950 Now we need to initialize these as you might expect. 153 00:09:43,950 --> 00:09:48,570 So go ahead and type init not override in it. 154 00:09:48,630 --> 00:09:57,780 And then of course coordinate coordinate of type C-L location coordinate to D and the identifier of 155 00:09:57,780 --> 00:09:59,350 type string. 156 00:09:59,990 --> 00:10:00,300 OK. 157 00:10:00,300 --> 00:10:04,830 And now we're going to set the coordinate to be equal to coordinate. 158 00:10:04,830 --> 00:10:09,350 When we initialize it then we're going to type identifier. 159 00:10:09,390 --> 00:10:16,380 Self-caused identifier so we set the one for class equal to the identifier we pass in at initialization. 160 00:10:16,380 --> 00:10:22,140 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 161 00:10:22,140 --> 00:10:23,990 for our custom pin. 162 00:10:24,000 --> 00:10:30,920 The only thing is that the coordinate cannot be properly set unless it is a dynamic variable. 163 00:10:30,960 --> 00:10:31,610 OK. 164 00:10:31,930 --> 00:10:40,030 Now dynamic variables are able to be modified the way that we need to to create these incantations. 165 00:10:40,050 --> 00:10:45,090 So with this class created we now can create the annotation to drop on our map. 166 00:10:45,150 --> 00:10:50,940 So go ahead and head back into map Visi And what we're going to do is we're going to create an instance 167 00:10:50,970 --> 00:10:52,460 of drop of a pin. 168 00:10:52,710 --> 00:10:58,950 So we're going to go ahead and type let annotation equals drop a pen and we're going to initialize it 169 00:10:58,980 --> 00:11:01,590 with a coordinate and an identifier. 170 00:11:01,590 --> 00:11:07,050 So the coordinate of course is touch coordinate we just made that and our identifier we're just going 171 00:11:07,050 --> 00:11:11,370 to call this drop a pin. 172 00:11:11,710 --> 00:11:17,700 OK so we're going to use that later to view the pin on the screen you'll see why or you'll see how I 173 00:11:17,700 --> 00:11:18,640 mean. 174 00:11:18,920 --> 00:11:20,700 And OK so we have our annotation. 175 00:11:20,700 --> 00:11:26,340 This is an M-K annotation and it's going to drop as a nice pretty little pin. 176 00:11:26,430 --> 00:11:30,210 But the issue is that this is no good unless we add it to the map view. 177 00:11:30,240 --> 00:11:39,290 So go ahead and type map view add annotation and drop in annotation can now it'll show on the map view. 178 00:11:39,330 --> 00:11:45,890 Now the only thing we need to do is we need to set it so that the map moves over and center this pin 179 00:11:45,900 --> 00:11:48,680 because if it doesn't send to the pen it just doesn't look as cool. 180 00:11:48,750 --> 00:11:53,900 And so to do that we're basically going to use similar code decenter map on user location. 181 00:11:53,910 --> 00:11:58,320 We're going to create a coordinate region and we're going to set the map to show that region. 182 00:11:58,500 --> 00:12:06,810 So go ahead and type let coordinate region equals M.K. coordinate region make with distance the center 183 00:12:06,810 --> 00:12:12,360 coordinate of course is going to be touch coordinate latitudinal meters is going to be the same as above. 184 00:12:12,360 --> 00:12:17,490 Region radius times too because we don't want it to like zoom in or zoom out or do anything we want 185 00:12:17,490 --> 00:12:22,870 it to stay about the same height over the map region radius times 2.0. 186 00:12:23,490 --> 00:12:25,520 That's going to give us the same exact region. 187 00:12:25,710 --> 00:12:32,680 And now we're going to call map view that set region coordinate region and animated will be true. 188 00:12:32,700 --> 00:12:38,820 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 189 00:12:38,820 --> 00:12:39,730 where we dropped it. 190 00:12:39,750 --> 00:12:40,980 Let's go give it a shot. 191 00:12:41,040 --> 00:12:42,230 Go ahead and build and run this. 192 00:12:42,240 --> 00:12:43,900 And let's go see if it worked. 193 00:12:44,780 --> 00:12:45,740 Let's give it a try. 194 00:12:49,150 --> 00:12:49,370 OK. 195 00:12:49,380 --> 00:12:50,710 That looks pretty good. 196 00:12:50,760 --> 00:12:55,100 Let's double click and let's see if it drops opin. 197 00:12:55,160 --> 00:12:56,270 Hey look at that. 198 00:12:56,270 --> 00:12:57,520 It dropped a pin. 199 00:12:57,590 --> 00:13:03,430 And beyond that it actually yeah I really liked that it centers at that. 200 00:13:03,440 --> 00:13:10,000 Now there is a problem though is that whenever we drop a pin the old one stays and we don't want that 201 00:13:10,010 --> 00:13:14,260 we want the next pin to show and the old pintu to erase. 202 00:13:14,390 --> 00:13:18,470 So what we're going to do is we're going to quickly write a function called remove pin that's going 203 00:13:18,470 --> 00:13:23,630 to wipe all the pins off the map and just add the new one and we'll call that right before we drop a 204 00:13:23,630 --> 00:13:24,240 pin. 205 00:13:24,560 --> 00:13:31,880 So let's add that below we'll call that phunk remove pin and we're going to basically just cycle through 206 00:13:31,880 --> 00:13:36,740 all of the annotations in the map view and remove them all which is OK because we only want it to show 207 00:13:36,740 --> 00:13:37,870 one pin at the time. 208 00:13:38,060 --> 00:13:46,220 So to do that type for annotation in map view annotations we're going to go ahead and type map view 209 00:13:46,520 --> 00:13:51,440 remove annotation and pass in that annotation. 210 00:13:51,440 --> 00:13:57,590 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 211 00:13:57,590 --> 00:13:59,990 to call remove pin. 212 00:14:00,050 --> 00:14:06,200 All right and you know what you might be thinking well what if there are no pins why cause an issue. 213 00:14:06,510 --> 00:14:07,350 That's not true. 214 00:14:07,710 --> 00:14:13,700 Because this blue dot is an annotation that's added by default it will always be there. 215 00:14:13,770 --> 00:14:18,980 And so it's OK if we call this because it's actually going to remove it but it is exempt from removing 216 00:14:18,990 --> 00:14:21,900 this one because it's always shown when the location is being used. 217 00:14:21,900 --> 00:14:23,480 So build and run. 218 00:14:23,550 --> 00:14:29,820 Let's go see if it properly removes our pin and adds a new one and then we'll call this video quits. 219 00:14:29,860 --> 00:14:30,780 We zoom in. 220 00:14:31,260 --> 00:14:34,320 We add a pin that looks good. 221 00:14:35,680 --> 00:14:37,380 Yes look at that it removes it. 222 00:14:37,390 --> 00:14:38,910 It zooms to the next one. 223 00:14:39,720 --> 00:14:41,580 And we can still center our map if we want. 224 00:14:41,580 --> 00:14:44,210 This is looking amazing. 225 00:14:44,220 --> 00:14:45,360 Awesome guys. 226 00:14:45,360 --> 00:14:46,310 So this is great. 227 00:14:46,320 --> 00:14:50,970 In the next video we're going to change this pin so that we can modify the color we don't want it to 228 00:14:50,970 --> 00:14:51,750 be red. 229 00:14:51,840 --> 00:14:55,290 We want it instead to be orange to match our application. 230 00:14:55,290 --> 00:14:58,790 So head over to the next video and we'll set up that custom view. 231 00:14:58,810 --> 00:14:59,040 Now.