iOS9 Learning Series: MapKit Transit

Each iteration of MapKit brings some new features to developers, and the update to iOS 9 is no exception. In this article, we'll preview some of the new APIs. We'll use them in an app to show you how to estimate delivery times programmatically.

Notable New API

MapKit View Improvements

Now you can specify more advanced layout and annotation methods on the map control. MKAnnotation now has the following customizable properties.

• Title
• Subtitle
• Right Accessory View
• Left Accessory View
• Detail Callout Accessory View

Detail Callout Accessory View is new in iOS 9, which allows you to customize the detail accessory view. It supports auto layout and constraints. It is very convenient for you to customize an existing callout.

In addition, some new, self-explanatory properties have been added to MKMapView. They are as follows:

• showsTraffic
• showsScale
• showsCompass
• Transit Improvements

Transit Improvements

MKDirectionsTransportType was newly introduced in iOS 9. So far, it is the only class that can be used to obtain ETA requests. When you use the calculateETAWithCompletionHandler method to initiate an ETA request, you can get an MKeTAResponse object, which includes data such as delivery time, distance, estimated arrival time, and estimated departure time.

Building a Sample App

To demonstrate these APIs, we create an app as follows. In this demo, we will demonstrate how to display transit-related information when clicking on one of the many markers in London.

The first step is to create an MKMapView and a UITableView in the storyboard and add some necessary constraints to ensure that the map control is in the upper half of the page and the table view is in the lower half of the page.

Once this is done, add the necessary elements to the table. We won't go into detail here, as this is not the focus of this article. You need to make sure that the ViewController is the data source for the table and the delegate of the MKMapViewDelegate. When you have all these UIs created, it will look like the following.

You need to customize a UITableViewCell, so far, it's pretty simple. It's just some label controls, and create connections between them and the storyboard.

Now that the storyboard is created, we can start adding some markers to the map. To do this, we need to add a few destinations. Create a Destination class to store information about locations.

We can simply create a destination as follows.

We add a few addresses, save them to an array, and then use them to display them after loading the map.

In the viewDidLoad() method of ViewController, add the following code to add the destination marker to the map.

They will be displayed in the map, and you also need to initialize the starting address of the map. Add the following code.

Next, we display the relevant information of the destination in a table.

Run the program and you will see that the destinations are marked on the map, and the names of the marked destinations are also displayed in the table.

#p#

This is great, but we can't calculate transportation information yet because we haven't defined any starting points. We could use the user's address, but we like to get a true distance. So, we use the user's click on the map as the starting point.

We add a click gesture to the map control.

Then we create a method to get the click event and convert it into a coordinate on the map.

Once created, we store the coordinates for later use. We add an annotation to display the user's location. If it already exists, clear it before adding it.

***, we need to set the location information to the table cell, and then update the ETA information. First, add the following code:

We also need to copy the tableView:cellForRowAtIndexPath method of the table to ensure that the data is displayed correctly when the table is reloaded. Add the following code:

After the coordinates are correctly assigned to the tableviewcell, we need to update the relevant information.

We can call the didSet property of userCoordinate to set the update. First, we need to clean up the information of the label used, because all the previous display information is not needed.

Now that we have a user-set coordinate as the starting location, we can create an MKDirectionsRequest object to calculate the ETA information. We set the properties of the MKMapItem, set the initialised coordinates, set the destination coordinates, and set the transportType. Finally, we get the ETA information in calculateETAWithCompletionHandler and then update the value of the label.

Now, run the program and you will get the following result.

When you click somewhere on the map, the ETA information in the corresponding table changes.

One more thing to do is to respond to the View Route button event. Add the following code in the IBAction:

This will open the Maps app with your destination in view and display navigation directions.

Customising the Pin Colors

Now the application is complete, but there is still a small problem. It is impossible to distinguish which ones are displayed by us and which ones are the coordinates clicked by the user. In order to customize the display of pins, we specify the delegate of MKMapViewDelegate as ViewController and implement its protocol. Add the following code:

pinTintColor is a new property introduced in iOS that can set the color of the pin. As you can see, we set the color of the pin coordinates clicked by the user to red. The pin color of the destination set at the beginning is set to blue. This makes it easy to distinguish the starting point set by the user from the preset destination point.

Further reading

To learn more about the new features of MapKit mentioned in this article, please watch session 206, What's New in MapKit, from WWDC 2015. In addition, you can download the demo of this article on github.