Mobile phones are by definition, mobile. A couple of interesting questions that come up when users are mobile are, "What's around me for dinner?" and
"Where can I get gasoline?" If you are a retailer or a company, you want to tell potential customers that there is a retail location near them. If you
are a user, you might also be interested in learning about how to go from where you are to a specific address. In this article we'll look at these and
associated features, so that we can provide them to users via mapping and location services to users in iOS apps.
A Few Preliminaries
In this article, we will use Apple's Map Kit framework to provide the app's mapping support and the Core Location framework to provide location
awareness. The support for Map Kit is within the MonoTouch.Map Kit namespace, and the support for location is within the MonoTouch.CoreLocation
namespace. The two namespaces are used together. You can download the code accompanying this article by clicking the Download button at the top of the
page.
If you're new to using MonoTouch, you might find it helpful to check out my article "
Guide to Building iOS Applications with MonoTouch for the .NET/C# Developer
." Additionally, a companion article to this one, "
MonoTouch Tutorial: Display Tabular Data in iPhone and iPad Apps
," covers how to display and retrieve data in iPhone and iPad apps.
Maps
Users want to know where they are. They would like to know street names and where they are in location to other people they know. In addition to
providing these capabilities in our app, we will need to get support for other items of location information. To provide these capabilities, we can use
iOS's support for mapping via the Map Kit framework and for location information via the Core Location framework.
First off, let's dive into Map Kit. Map Kit allows a developer to embed a map interface in an application. Map Kit provides many features that we would
expect, such as:
-
street-level information
-
satellite information
-
a combination of street-level and satellite information
-
the ability to zoom and pan the map programmatically
-
the ability to zoom and pan the map via touch events
-
annotating the map with custom information
Let's start using Map Kit. The first step is to create a new single-view iPhone project and open up the .xib file in the Xcode IDE, as shown in Figure
1.
Figure 1: Creating an iPhone project that uses Map Kit to add mapping to an app
You will need to add an MKMapView to the design surface and set up the necessary outlets. Along with doing this, developers will want to modify the
Map View attributes. Specifically, developers will want to pay attention to the type value. Developers can set the values to Map (default), Satellite,
or Hybrid. The type value can also be set programmatically via the .Map Kit property and the MKMapType enum.
By default, Map Kit will display a map like that in Figure 2 below, centered on a world location.
Figure 2: Default Map Kit map
Now that we've set up the map, let's go ahead and initialize it. We'll initialize the visible portion of a map with the .Region property of a map.
Note: MapIt is the name of the outlet for the map that the code will use.
MapIt.Region = new MKCoordinateRegion(new CLLocationCoordinate2D(lat, lon), new MKCoordinateSpan(latDelta, lonDelta));
Here's a little bit of background. Many of the online map systems, such as Google and Bing, use a map system where a map is defined as a center point
and a zoom level. The zoom level is typically an integer value with a minimum and maximum value based on a given location.
In iOS with MKMap Kit, an MKCoordinateRegion is what is passed to the region property. The two objects that make up the region are the center point and
the span that needs to be displayed. The center point is fairly self-explanatory. The span is similar to the width and height values of a rectangle
that will fit within the map's region. The span that is passed in is used as a starting point. Map Kit will use this region to determine the
appropriate zoom level. A zoom level is chosen that will display the entire span passed in. Zoom levels are not arbitrary, so the span that is passed
in will not be specifically displayed, merely used as a starting point. Once we have a center point and a span, we can initialize our map.
I'm sure that your next question is, "How do I programmatically move the map, as necessary?" This can be done one of two ways:
-
Method 1: Set the .Region property similarly to how we initialized the map. With the Region property, we'll define the center via the
CLLocationCoordinate. The next question is, "How large should the map be that is displayed?" This is done by setting the MKCoordinateSpan. In this
case, we'll initialize the span to show a .5 delta latitude and longitude.
-
Method 2: Set the center of the map via a call to the .SetCenterCoordinate() method.
Here's some code that will tie the initialization and the moving of the map together.
if ( !StartVal ) {
MapIt.SetCenterCoordinate(new CLLocationCoordinate2D(lat, lon), true);
}
else{
MapIt.Region = new MKCoordinateRegion(new CLLocationCoordinate2D(lat, lon),
new MKCoordinateSpan(.5, .5));
StartVal = false;
}
In this source code example, if our code has never initialized the map, then we'll set up the map via the call to set the .Region property. If the map
is already initialized, the call to SetCenterCoordinate will cause the map center to move. The CLLocationCordinate2D is fairly self-explanatory. It
represents the new center of the map. The final parameter is a bool. If the value is true, the change is animated. If the value is false, the change is
not animated. Since we want to have an attractive graphical display (and be cool in the iPhone world), we'll hard-code the value to true.
Finally, there are a few properties that are valuable when setting up a map:
-
UserInteractionEnabled. This is a Boolean property. When it is set to true, the map can respond to user interaction, such as a pinch or zoom.
-
ShowsUserLocation. This is a Boolean property. When it's set to true, the map will display the current user location. The location is displayed
via a small blue pin along with an animated circle around the location of the device that it has determined.