Displaying Maps in iPad Applications and Monitoring Changes using the Map Kit

Displaying Maps and Monitoring Changes using the Map Kit

Beginning iPad Application Development bookThe iPhone SDK 3.2 ships with the Map Kit framework, a set of libraries that work with the Google Mobile Maps Service. You can use the Map Kit to display maps within your iPad application, as well as to display your current location. In fact, you can enable the Map Kit to track your current location simply by setting a single property and Map Kit will then automatically display your current location as you move.

In the following Try It Out, you will get started with the Map Kit. In particular, you will use the Map Kit to display your current location on the map.

Try It Out Getting Started with Map Kit

codefile MapKit.zip available for download at Wrox.com

1. Using Xcode, create a View-based Application project and name it MapKit.

2. Add the MapKit.framework framework to the Frameworks folder of the project (see Figure 18-1).

iPad Application development MapKit.framework 

Figure 18-1

3. Double-click the MapKitViewController.xib file to edit it in Interface Builder.

4. Populate the View window with the following views (see Figure 18-2):

  • MapView

  • Round Rect Button (label it as Show My Location)

iPad Application development MapKitViewController.xib view 

Figure 18-2

5. In the MapKitViewController.h file, add in the following bold statements:

#import <UIKit/UIKit.h>

 

#import <MapKit/MapKit.h> 

@interface MapKitViewController : UIViewController {

 

    IBOutlet UIButton *btnShowLocation;

    IBOutlet MKMapView *mapView;

}

 

@property (nonatomic, retain) UIButton *btnShowLocation;

@property (nonatomic, retain) MKMapView *mapView; 

-(IBAction) showLocation:(id) sender; 

@end

6. In Interface Builder, perform the following actions:

  • Control-click and drag the File’s Owner item and drop it over the MapView. Select mapView.

  • Control-click and drag the File’s Owner item and drop it over the Show My Location button. Select btnShowLocation.

  • Control-click and drag the Show My Location button and drop it over the File’s Owner item. Select showLocation:.

7. In the MapKitViewController.m file, add in the following bold statements:

#import "MapKitViewController.h"

 

@implementation MapKitViewController

 

@synthesize btnShowLocation;

@synthesize mapView; 

-(IBAction) showLocation:(id) sender {

 

    if ([[btnShowLocation titleForState:UIControlStateNormal]

             isEqualToString:@"Show My Location"]) {

        [btnShowLocation setTitle:@"Hide My Location"

            forState:UIControlStateNormal];

        mapView.showsUserLocation = YES;

    } else {

        [btnShowLocation setTitle:@"Show My Location"

            forState:UIControlStateNormal];

        mapView.showsUserLocation = NO;

    }

– (void)dealloc {

    [mapView release];

    [btnShowLocation release]; 

    [super dealloc];

}

8. Press Command-R to test the application on the iPhone Simulator. You should now be able to see the map. Tap the Show My Location button to view your current location (see Figure 18-3). You can also zoom out of the map by pinching it and zoom in by spreading your two fingers apart on the screen.

NOTE: The map may take up to 20 seconds to locate your current location. Also, the location that is displayed in the iPhone Simulator is locked on the Apple HQ in Cupertino, CA and not your actual location.

iPad Map Application development simulator

Figure 18-3

How It Works

To show your current location on the map, you simply set the showsUserLocation of the MKMapView object to YES:

        mapView.showsUserLocation = YES;

The map will automatically obtain the device’s location using the Core Location framework (discussed in the second part of this chapter). As long as the showsUserLocation property is set to YES, the map will continually update to display the user’s location.

Note that this property merely specifies whether the user’s location is displayed on the map (represented as a throbbing blue circle); it does not center the map to display the user’s location. Hence, if you are viewing the map of another location, your current location indicator may not be visible on the map.

Observe that as you can pinch the map to zoom it in or out. As you change the zoom level of the map, it is important that you keep track of this information so that when the user restarts the application you can display the map using the previous zoom level.

In the following Try It Out, you keep track of the map zoom level as the user changes the zoom level.

Try It Out Printing Out the Zoom Level of the Map

1. Using the MapKit project created in the previous section, edit the MapKitViewController.h file and add in the following bold statement:

#import <UIKit/UIKit.h>

 

#import <MapKit/MapKit.h>

 

@interface MapKitViewController : UIViewController

    <MKMapViewDelegate> { 

    IBOutlet UIButton *btnShowLocation;

    IBOutlet MKMapView *mapView;

}

 

@property (nonatomic, retain) UIButton *btnShowLocation;

@property (nonatomic, retain) MKMapView *mapView;

 

-(IBAction) showLocation:(id) sender;

 

@end

2. In the MapKitViewController.m file, add in the following bold statements:

– (void)viewDidLoad {

    //—connect the delegate of the MKMapView object to

    // this view controller programmatically; you can also connect

    // it via Interface Builder—

    mapView.delegate = self;

    mapView.mapType = MKMapTypeHybrid; 

    [super viewDidLoad];

}

 

-(void)mapView:(MKMapView *)mv regionWillChangeAnimated:(BOOL)animated {

 

    //—print out the region span – aka zoom level—

    MKCoordinateRegion region = mapView.region;

    NSLog([NSString stringWithFormat:@"%f",region.span.latitudeDelta]);

    NSLog([NSString stringWithFormat:@"%f",region.span.longitudeDelta]); 

}

3. Press Command-R to test the application on the iPhone Simulator. Zoom in and out of the map and observe the values printed out on the Debugger Console window (see Figure 18-4).

iPad Application iPhone Simulator Debugger Console window

Figure 18-4

How It Works

Whenever you change the zoom level of the map, the mapView:regionWillChangeAnimated: event will be fired. Hence, implement the event handler for this event if you want to know when a map is pinched. The mapView:regionWillChangeAnimated: event is defined in the MKMapViewDelegate protocol, so you need to implement this protocol in the View Controller:

@interface MapKitViewController : UIViewController

    <MKMapViewDelegate> {

The region displayed by the map is defined by the region property, which is a structure of type MKCoordinateRegion.

    //—print out the region span – aka zoom level—

    MKCoordinateRegion region = mapView.region;

The MKCoordinateRegion structure contains a member called center (of type CLLocationCoordinate2D) and another member called span, of type MKCoordinateSpan. The MKCoordinateSpan structure in turn contains two members — latitudeDelta and longitudeDelta (both of type CLLocationDegrees, which is a double):

    NSLog([NSString stringWithFormat:@"%f",region.span.latitudeDelta]);

    NSLog([NSString stringWithFormat:@"%f",region.span.longitudeDelta]);

Both members define the amount of distance to display for the map:

  • latitudeDelta—One degree of latitude is approximately 111 kilometers (69 miles).

  • longitudeDelta—One degree longitude spans a distance of approximately 111 kilometers (69 miles) at the equator but shrinks to 0 kilometers at the poles.

Examine the value of these two structures as you zoom in and out of the map — they are a good indicator for the zoom level of the map.

This article is excerpted from chapter 18 "Displaying Maps" of the book Beginning iPad Application Development by Wei-Meng Lee (ISBN: 978-0-470-64165-1, Wrox, 2010, Copyright Wiley Publishing Inc.)

Tags:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *