Tải bản đầy đủ
6 Displaying Traffic, Scale, and Compass Indicators on the Map

6 Displaying Traffic, Scale, and Compass Indicators on the Map

Tải bản đầy đủ

Set the following properties of your map view to true:
• showsCompass
• showsTraffic
• showsScale

Place a map view on your view and set the appropriate constraints on it so that it
stretches across the width and height of your view controller’s view. This is really
optional, but useful so the user can see the map view properly on all devices. Then
follow the steps outlined in Recipe 12.4 to place an annotation on the map. Write
code similar to the following in a method such as viewDidLoad:
map.showsCompass = true
map.showsTraffic = true
map.showsScale = true

The results will be similar to those shown in Figure 12-5. The scale is shown on the
top left and the compass on the top right. You have to rotate the map for the compass
to appear.

12.6 Displaying Traffic, Scale, and Compass Indicators on the Map



Figure 12-5. Map with scale, compass, and traffic

12.7 Providing an ETA for Transit Transport Type
You want your app to provide routing options to users when they are in the iOS Maps



Chapter 12: Maps and Location

You will need to mark your app as a routing app and construct an instance of the
MKDirectionsRequest class. Set the transportType property of that request to
Transit and send your request to Apple to calculate an estimated time of arrival
(ETA), using the calculateETA(completionHandler:) method of the MKDirections
We use Geo JSON files here, so be sure to read the spec for that for‐
mat before proceeding with this recipe.

Create a single view application. Then head to the Capabilities tab in Xcode, enable
the Maps section, and mark the routing options that you believe your app will be able
to provide (see Figure 12-6). I’ve enabled all these items for demonstration purposes.
You probably wouldn’t want to enable all of these in your app.

Figure 12-6. Transportation routing options
Create a new Directions.geoJson file in your app and then head over to GeoJson.io to
create the polygon that defines your routing coverage area. Then copy and paste the
generated content and place it in the aforementioned file in your project. Now go and
edit your target’s scheme. Under Run and then Options, find the Routing App Cover‐
age file section and select your file (see Figure 12-7).

12.7 Providing an ETA for Transit Transport Type



Figure 12-7. Here I am selecting the routing coverage file for my project
You can always go to GeoJsonLint to validate your Geo JSON files.

This will allow the Maps app to open your app whenever the user asks for transit
information on the iOS Maps app. Now code the application(_:open
URL:options:) method of your app delegate and handle the routing request there:
func application(_ app: UIApplication,
open url: URL,
[UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
guard MKDirectionsRequest.isDirectionsRequest(url) else{
return false
// now we have the URL
let req = MKDirectionsRequest(contentsOf: url)
guard req.source != nil && req.destination != nil else{
return false
req.transportType = .transit
req.requestsAlternateRoutes = true



Chapter 12: Maps and Location

let dir = MKDirections(request: req)
dir.calculateETA {response, error in
guard let resp = response, error == nil else{
// handle the error
print("ETA response = \(resp)")
return true

Now open the Maps app and ask for directions from one location to another. If the
Maps app couldn’t handle the request, it will show a little “View Routing Apps” but‐
ton. Even if the Maps app wasn’t able to show the routing options, the user can always
press the little navigation button to open alternative routing apps (see Figure 12-8).
Your app will be displayed in the list of routing apps if the user asks for a routing
option you support, and if the starting and stopping points are within the shape you
defined in your Geo JSON file. When the user opens your app, your app delegate will
be informed and will calculate an ETA.

Figure 12-8. Our app, displayed in the list of routing apps

See Also
Recipe 12.5

12.7 Providing an ETA for Transit Transport Type



12.8 Launching the iOS Maps App in Transit Mode
You want to launch iOS’s Maps app in transit mode.

When calling the openMaps(with:launchOptions:) class method of MKMapItem, in
the options collection, set the value of the MKLaunchOptionsDirectionsModeKey key
to MKLaunchOptionsDirectionsModeTransit.

Let’s create a single view controller app and place a button on the view controller to
open a map. Set the title of this button to something like “Open Maps app in transit
mode.” Then hook it up to your view controller. For every coordinate of type CLLoca
tionCoordinate2D, you have to create an instance of MKPlacemark and then from the
placemark, create an instance of MKMapItem.
Here is the source map item:
let srcLoc = CLLocationCoordinate2D(latitude: 59.328564,
longitude: 18.061448)
let srcPlc = MKPlacemark(coordinate: srcLoc, addressDictionary: nil)
let src = MKMapItem(placemark: srcPlc)

Followed by the destination map item:
let desLoc = CLLocationCoordinate2D(latitude: 59.746148,
longitude: 18.683281)
let desPlc = MKPlacemark(coordinate: desLoc, addressDictionary: nil)
let des = MKMapItem(placemark: desPlc)

You can use the Get Latitude Longitude website to find the latitude
and longitude of any point on the map.

Now we can launch the app, under transit mode, with the source and the destination
let options = [
MKLaunchOptionsDirectionsModeKey : MKLaunchOptionsDirectionsModeTransit



Chapter 12: Maps and Location

MKMapItem.openMaps(with: [src, des], launchOptions: options)

See Also
Recipe 12.4

12.9 Showing Maps in Flyover Mode
You want to display your maps in a flyover state, where the regions on the map are
translated onto a 3D globe, rather than a 2D flattened map.

Set the mapType property of your MKMapView to either hybridFlyover or satellite

The flyover mode of a map view represents the map as if it were on a globe, rather
than flat. So keep that in mind when placing a camera on the map to show to the user.
Let’s start off with a single view controller app. Place a map view on your view and
hook it up to your code. I’ve named mine “map.” When your view gets loaded, make
sure that your map type is one of the aforementioned flyover modes:
map.mapType = .satelliteFlyover
map.showsBuildings = true

Then when your view appears on the screen, set the camera on your map:
let loc = CLLocationCoordinate2D(latitude: 59.328564,
longitude: 18.061448)
let altitude: CLLocationDistance = 500
let pitch: CGFloat = 45
let heading: CLLocationDirection = 90
let c = MKMapCamera(
lookingAtCenter: loc,
fromDistance: altitude, pitch: pitch, heading: heading)
map.setCamera(c, animated: true)

12.9 Showing Maps in Flyover Mode



Run this code on a real device (this doesn’t work very well on simulator) and you’ll
get a display along the lines of Figure 12-9.

Figure 12-9. The Stockholm Central Station is shown here under satellite flyover mode


| Chapter 12: Maps and Location


UI Testing

Apple added quite a good framework for UI testing in the latest Xcode. This is so
much fun, I am sure you are going to enjoy writing UI tests. UI tests go hand in hand
with accessibility, so knowing a bit about that is very useful, if not necessary.
When you are debugging accessibility-enabled apps on the simulator, you may want
to use a really handy dev tool that comes with Xcode: the Accessibility inspector
(Figure 13-1). You can find it by right-clicking Xcode’s icon in the Dock and then
choosing Accessibility Inspector from Open Developer Tool. The Accessibility
inspector allows you to move your mouse over items on the screen and then get
information about their accessibility properties, such as their values, identifiers, and
so on. I suggest that you use this program whenever you want to figure out the identi‐
fiers, labels, and values of UI components on your views.
In this chapter, we will have a look at how to write UI tests and evaluate the results.
We will use Xcode’s automated UI tests and also write some tests by hand.

13.1 Preparing Your Project for UI Testing
You either have an existing app or want to create a new app, and you want to ensure
that you have some UI testing capabilities built into your app so that you can get
started writing UI tests.


Figure 13-1. The Accessibility inspector shows information for a button on the screen, in
the simulator

If you have an existing project, simply add a new UI Test target to your project. If you
are creating a new project from scratch, you can add a UI Test target in the creation

If you are starting a new app from scratch, upon setting your project’s properties, you
will be given a chance to create a UI testing target (see Figure 13-2). Enable the
“Include UI Tests” option.
If you have an existing project and want to add a new UI testing target to it, create a
new target. In the templates screen, under iOS, choose Test and then “Cocoa Touch
UI Testing Bundle” (see Figure 13-3).


Chapter 13: UI Testing

Figure 13-2. The “Include UI Tests” option in the Xcode’s new project sheet
In the next screen, you will then be asked on which target inside your project you
want to create the UI testing target. Make sure that you choose the right target. You
can change this later, if you want, from the properties of your UI Test target (see
Figure 13-4).

13.1 Preparing Your Project for UI Testing