[MUSIC] The next thing that we've got lined up for you is a pure review assignment where you do a case study in using the map kit. I'm using map view in order to create an application. It's a pretty strait forward application, but it's good to sort of exercise your skill in being able to use a map. Maps are a really critical part of a lot of apps, that are particularly ones that are location aware or that want to show points of interest on a map. So the big picture of what we want is a UI that has primarily the map view in the dominating the screen, on the bottom we'd like to have a little bit of a tool bar. And the tool bar's going to have three different buttons on it and a switch. And the map is going to center on annotations depending on which button you click on. So each one of those buttons on the bottom is going to be a different location that you're going to pick, and when you click on them the map will center. And then the last thing that we want you to do is to add the code that's going to be able to show where the user is at a given spot and track them as well. So we're going to do this in a couple different steps. First, we're going to start with the static locations. We are going to build a single view app and we're going to add the MapKit framework. We're going to build out the UI with the right pieces and we're going to bind the buttons that we put in the toolbar to our codes so we can have access to them and deal with things when they tab. We're going to create three annotations, remember that's the phrase that we use for the pins that go on the map, we're going to write a function the method that centres the map on annotations when we click on that annotations. Part 2 of the steps is we're going to add a Locate Me switch to the U/I and then we're going to request location permission from the user. Then we're going to implement a delegate to keep track of the, keep the map centered on where the user is when the user moves. And in the third part we're going to add a touch monitor so that we don't update the map when the user is manipulating it. So let's go back to step one. Let's build this out, so Single-View application, MapKit framework with U/I, bind buttons to code, create three annotations and center map on annotations on click. Let's see if we can do that. Okay, in Xcode, we're going to start a new project and it's going to be a Single-View application and we will call it Map my points. Create it in our repository. Build it up. Great, maximize our window. And the first thing that we're going to want to do is make sure that we've included our map kit framework. That's something that is going to be needed. We need to have the code available to us then we need to include it, import it in our different files when we want to use it. Now let's go to our main storyboard and build out what we want this UI to look like, roughly. We're going to have the map kit view take up the top portion and we're going to put a tool bar in the bottom portion here. All right, line up that tool bar and let's add some constraints to the tool bar and we're going to want left, right, and bottom, their all set up good. And let's have our Map View. Let's have it fill up the screen here, and let's add constraints for left, right, bottom. And we're going to pick three different locations that we want to work with. So let's add three more toolbar buttons to our world and I'm going to option click it and I'm going to save in case it crashes. And then I'm going to get a flexible space between those items so that they are separated out. And then the three locations that I'm going to use, I'm going to have one be the Lucy Lab at UCI. And I'm going to have the second one be Westmont College. I'm going to go ahead and call it the Westmont Spring Computer Lab, and then the third one is going to be Gradient, which is where Sam works. All right, that's all we need. Let's go ahead and run that, see if we don't have any warnings or any errors, and when we run it we want to see that we get what we expect. Looks good. A map with three buttons on the bottom. So far, so good. Let's put that back where we want it while we're working. Okay. That's good, let's bind that to our code now. We know we're going to need access to the map view. So, let's go ahead and make sure that we have access to the map view by control, drag in it over to our interface called our map view. And we're going to want access to our buttons but we don't need the buttons themselves. What we need is the event that they got. Activated. So let me get rid of this template code here, clean this up a little bit. All right, and so when the LUCI button gets tapped, I'm going to Ctrl drag that over here and say luciTapped and we'll do control drag over there, and we'll say tapped. And we'll control drag gradient over there. We'll say gradient tapped. Great. All right. We built our UI, we bound our buttons to the code, we now need to create three annotations, let's do that next. [NOISE] We're going to need to keep track of those annotations so, we're going to create some local, we're getting an interrupt there that's because we have an imported map kit. All right and we're going to need some annotations up here so that when we're going to keep three annotations just as local field variables. And we will center our map on them whenever we need them, so let's go ahead and create those. There will be three properties and they will be a pointer, so they're going to be strong and non-atomic. And they're going to be of the MK.annotationtype and the first one will be the Lucy annotation. And the second one will be the work annotation. And the third one will be the gradient annotation. All right. What'd we do wrong? They're pointers, right? When we first load up our map view we want to drop those pens down. So we're going to go ahead and create a function just to clean that up, and add annotations. This is going to be where we're going to hard code these things in here. So add this down here, and add a function. Just add annotations. And we're going to create our three locations here. And so we're going to do it three times, we're going to need to know three locations and for your pure review you'll need to pick up three locations that your interested in. And so we're going to start by creating the objects that go with those pointers. So we're going to say that self dot start with our luci one, luciAnna annotation is going to equal a MKPointAnnotation we're going to init and allocate it. All right that'll reserve some space for it. And then once we have it, we need to give it a coordinate. [SOUND] And that's going to be with a CLCoordination, so it's a core location that's what the CL stands for and we're LocationCoordinate2DMake and then you have to have the Latitude and longitude ready for your point. So Lucy's is 33.6432094. I'm reading from notes over on the side. I don't have it memorized. And minus 117.8439953. Okay, coordinates good to go, and then we need to give it a title so that when we click on the annotation, we would see something we would like to see and we'll say this is going to be the Laboratory for Ubiquitous Computing and Interaction which is what LUCI stands for and here I should set luciAnno and our new coordinate, how's that. Same thing down below. Okay now that hasn't put it on the map, but it's at least created the button and we need to do that again for our other locations. So the next one is going to be a coin notation. And, we'll say, [INAUDIBLE] and it has a different location, which we can specify. Its location is, 34.448795. And minus 119.6646337. Great. And the last one we'll do is gradient. The gradient is actually located in New York City so that is a little bit different. They're all three are in the United States. Yours doesn't have to be. Yours don't have to be but these are, at least they're on different coats though. So gradient is 40.677623- 7399 3583. All right so that has defined those three annotations that we're interested in, and now we need to add them to the map. Adding them to the map is pretty straight forward. It's just a matter of calling a function associated with map view which is add annotations oops, not an observer, add anno and then we need to create an array of those annotations that we're interested in which is going to be self.lucy annotatation, self.wickle annotation, and self.gradient annotation. All right, and those three things should be enough to get everything plotted. Let's make sure everything compiles okay. Need another bracket. All right, if we run it, we should see those points show up. Let's make sure we get that. We defined them, we put them on our map, and we have a crash. Let's see what our crash says. Says cannot emit a class object. I did this backwards, sorry. Gotta allocate it before you initialize it. Try that again. Okay everything looks good except the gradient didn't show up. Let's see what we have over here. Westmont Inspired and Laboratory for Ubiquitous Computing and Interaction. We didn't change the name here. And let me just, we forgot a decimal point. That will get you every time. Make sure it's on the map. Great. So now we have Gradient, Laboratory for Ubiquitous Computing and Interaction, and Westmont Inspired Computing Lab. All right, so we've done quite a bit. In a really rapid period of time we've created three annotations, we centered the map on annotations on click. No, we haven't centered yet, so that's the next thing that we should do. That's not too much work, but we'll create a center map function. All right, just like we have annotations, we'd like to have something that is called. CenterMap. And we will take as a parameter MKPointAnnotation. As our center point and not surprisingly it's a call to the map in order to center it. And what we do in that case, is we say self.mapView and we're going to set. Set the center of coordinates. Center, coordinate. Equal to, center points.coordinate. All right, with that in mind, it's pretty straightforward that when we see gets tapped. We know that what we want to do is we want to say, self centerPoint, centerMap, sorry, on the Lucy annotation, self.lucy annotation. And when is tapped, we want to set it on the week old annotation. And gradient is tapped, we want to set it on the gradient annotation. And we run it. We've created some real basic functionality there. We click on Lucy. We center on Lucy, and let's zoom in here so that we can see. You should be able to see it's a little rough because of the simulator. But on the device it's a smooth animation. Goes from one side to the other. Actually I think it's not a smooth animation. I need to specify. I need to specify not here but in this function here. There we go. All right, so, I thought that even the simulator should have a little bit of a better animation between those points, so let's make sure that happens. All right, so, if I center on gradient, we go there. And let's zoom in a little by doing option. You can see, with my option click, I can rotate the map. A bit slowly. And then from there I can center it on Lucy there we go. And then from there we can center it on Oracle. All right good to go. So we were able to center on our annotations on click on our toolbar. And so now for part two what we'd like to do is we'd like to add a locate me switch to the UI so that we can have the user activate that they would like to have themselves located instead of one of these other maps. And so, to do that, we're going to need to request location permission from the user. And we're going to have to set up the delegates that we get call backs when the user moves. All right. [MUSIC]
