Make App Pie

Training for Developers and Artists

iOS Tips: Prototyping MapKit in iPad Playgrounds

iOS Development tips weekly is a series you can find at the Lynda.com and LinkedIn Learning libraries. The first week of a week’s tip will be available to the public. After that, you will need a subscription to get access to it. Click the image below to view. Below the image you’ll find a transcript.

You can find the finished project here on GitHub

The Xcode simulator leaves a lot to be desired when prototyping with MapKit. It’s often slow, and pinch and zoom for a map works poorly from a mouse or Trackpad. For this reason, I’ll often use iPad playgrounds over the Xcode simulator when writing code for maps. You get a faster, more accurate representation of your code while developing.  Let me show you how to quickly make a map on an iPad.

Open up a new playground. There is a template for maps in playgrounds in Xcode, but not on iPad. I’ll use a new blank playground. Change the name to Map Prototype.

Pop up the keyboard if not showing. Add  the following three lines

import UIKit
import MapKit
import PlaygroundSupport

Add a view controller with a viewDidLoad and a viewDidAppear.

class MapViewController:UIViewController{
     override func viewDidLoad(){
         super.viewDidLoad()
     }

     override func  viewDidAppear(animated:Bool) {
         super.viewWillAppear(animated)
     }
}

Under the class add the following line to add a live  view to  display the map controller:

PlaygroundPage.current.liveView = MapViewController()

That sets up a basic view controller. Above viewDidLoad, add the mapView as a property.

let mapView = MKMapView()

MKMapViews, like all views, have frames, so in viewDidLoad,  I’ll size the mapView‘s frame to the frame of the view controller’s view, and then add the mapView to that view.

mapView.frame = view.frame
view.addSubview(mapView)

That’s the basic code to start a map. You can run and get a generic map the system picks for you. Swipe the live view to full size to see the full map.

I’ll use a satelliteFlyover map type, since they use a lot of resources.

map view.maptype = .satelliteFlyover

Run again, and you’ll see a nice satellite map.  This map is time based so as in mine you run it at evening or morning. it shows you night ant day areas.

Stop the map and swipe back on the handle to hide the live view. Generally, when running maps you’ll want a specific coordinate. I’ll pick Pizzeria Brandi in Naples Italy, the home of the Margherita Pizza. It can be argued once Queen Margherita of Italy liked this pizza (she was tired of French food all European royalty ate), pizza moved from poor people’s street food to respectable Italian food. I found the latitude and longitude of the street in front of the restaurant as 40.836724 latitude, 14.2468766 longitude.  I’ll add a constant for this

let brandi = CLLocationCoordinate2DMake(40.836724, 14.2468766)

You can use regions or cameras to set your location. To push the simulator to the max,  I’ll set up a camera on an angle in the view did load.

let camera = MKMapCamera(LookingAtCenter: brandi, fromDistance: 50, pitch: 30, heading: 262)
mapView.camera = camera

Run that and you’ll Get a view of Naples, but It’s hard to pick out the restaurant.  I’ll add a quick Annotation. I’ll be discussing annotations more in an upcoming tip.

let annotation = MKPointAnnotation()
annotation.coordinate = brandi
mapView.addAnnotation(annotation)

Run this code.  If you don’t see the pin, expand the live view out to full screen by swiping the border of the code and live view to the left . 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 and rotate the scene with 3d flyover effects, at the speed of the iPad.

When I’m writing map based code, I’ll start here in an iPad playground.Once I know the code is working, I’ll move it to Xcode and my project, removing the playground support.

It’s not difficult to make a map in Playgrounds. Make a view controller, add a map view, and configure the map view. 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 CoreLocation on LinkedInLearning or on Lynda.com. To learn more about Swift playgrounds check out the course Learning Swift Playgrounds Application development on LinkedIn Learning or Lynda.com.

You can find the code for this tip at Github.

Bonus: There’s a feature in Maps that most don’t know about. If you set your altitude high enough you get the entire globe. It keeps time and will put the proper parts of earth at night or day. You can find an example of this orbital view of Earth here

One response to “iOS Tips: Prototyping MapKit in iPad Playgrounds”

  1. […] an earlier tip, I showed you how to make a map in iPad Playgrounds. Let’s learn how to animate those maps, doing a flyover of Michigan avenue in Chicago from […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: