Join Steven Lipton for an in-depth discussion in this video Prototyping MapKit in iPad Playgrounds, part of iOS Development Tips Weekly.
- [Instructor] The Xcode simulator leaves a lot to be desired when prototyping with map kit. It's often slow and pinch and zoom for a map works poorly for a mouse or track pad. For this reason, I often use iPad playgrounds over the Xcode simulators when code writing for maps. You get a faster, more accurate representation of your code while developing. Let me show you how quickly it is to make a map on an iPad. Open up a new playground. There's a template for maps in playground in Xcode, but not on the iPad. I'm going to use this new blank playground and I'm going to change the name to map prototype.
I'll go into the playground and then I'm going to add the following three lines for imports. Import UIKit, import PlaygroundSupport, and import MapKit. We're going to do this in a view controller, so we're going to add a view controller with a viewDidLoad so we're going to do this as class and we'll name it MapViewController and then a colon and then UIViewController, like that.
Inside of the code, you can type viewDidLoad and in the viewDidLoad we'll do a super.viewDidLoad. Now under this class, we're going to set the following lines to add liveView so we can display the map controller and that would be PlaygroundPage.current.liveView equals MapViewController, like so.
That sets up a basic view controller. Go back to above viewDidLoad here, let's hit return, and we're going to put in our map view, let mapView equals MkMapView and we'll just use the straight in this slash for right now.
I'm not going to go into viewDidLoad because I need to size the map view. Map views like all views have frames so in viewDidLoad I'll size it here to the frame of the view controller's view and then add the map view to that view. So I'll type mapView.frame equals view.frame and then view.addSubview(mapView).
That's actually all the basic code you need to start a map. You can run this now and you get a generic map. Swipe to the side and you get a bigger map. Close the handle back up all the way so you can see your code, stop it. I'll use a satellite flyover map type here so after the addSubview, you can add mapView.mapType equals dot, and we'll use the satelliteFlyover enumeration.
Go ahead and run that and here's a neat little tip too. If you want a map of the whole world, you get this thing, and one of the neat things about this map if you look, if I scroll it a little bit, is that it knows what time it is everywhere and it'll put what's in the night time and you can see California in the dark. Okay, stop that. Go back to your code. Now that's all fun and good, but generally when running maps, you'll want to use a specific coordinate, and I'm going to use a specific coordinate of a famous pizza restaurant in Naples, Italy, Pizzeria Brandi, the home of the margarita pizza and I'm going to put that here and so I'm going to add a constant to this.
Let Brandi equal CLLocationCoordinate and you'll see that CLLocationCoordinate2DMake there and I'm going to put a latitude of 40.836724, longitude will be 14.2468766.
Now you can use regions or cameras to set your location. To push the simulator to its absolute max, since I'm using satelliteFlyover too, I'm going to set a camera up to angle in the viewDidLoad. So just under where it says mapView.mapType, I'm going to put a let in here and I'm going to call that camera and I'm going to make this an MKMapCamera, MKMapCamera parenthesis and I want the looking at center from distance, so what this'll do is looking at center will be our location which is Brandi, our from distance will be 50 meters, our pitch from straight overhead will be 30 and our heading will be 262 and I'm going to set that to my camera so I'm going to do mapView.camera equals camera.
Okay, run this and you'll get a view of Naples, Italy, but it's hard to pick out the restaurant in all that wonderful stuff down there, so I'm going to add a quick annotation and a quick annotation will go like this just after camera, on the return, up a little bit, pop up my keyboard, and let annotation equal MKPointAnotation and I'm just going to set the coordinate on the annotation, annotation.coordinate equals Brandi and go to mapView.addAnnotation and that will be annotation.
Run the code again and you may not see the pin directly so I'll just zoom all the way out again. You'll find a pin appear by the restaurant. You have complete control of the map like you do in the maps app, you can pinch to zoom or scroll out and rotate the scene with the 3D effects of the satellite flyover and it's running at the speed of an iPad, not the simulator. When I'm writing map based code, I'll start here in iPad playground.
Once I know the code is working, I'll move it to Xcode in my project. It's not difficult to make a map in playgrounds. Make a viewController, add a mapView, and configure the mapView. I glossed over a lot on both maps and playgrounds you may want to go deeper with. To learn more about maps check out the course advanced iOS development: MapKit and core location. To learn more about playgrounds check out the course learning swift playgrounds application development.