<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Just2us &#187; mapkit</title>
	<atom:link href="http://blog.just2us.com/tag/mapkit/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.just2us.com</link>
	<description>discuss on technology &#38; application development</description>
	<lastBuildDate>Sat, 04 Feb 2012 06:55:58 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>How to use MapKit</title>
		<link>http://blog.just2us.com/2010/05/how-to-use-mapkit/</link>
		<comments>http://blog.just2us.com/2010/05/how-to-use-mapkit/#comments</comments>
		<pubDate>Sat, 22 May 2010 16:15:52 +0000</pubDate>
		<dc:creator>samwize</dc:creator>
				<category><![CDATA[Development]]></category>
		<category><![CDATA[How-to]]></category>
		<category><![CDATA[mapkit]]></category>

		<guid isPermaLink="false">http://just2us.com/?p=393</guid>
		<description><![CDATA[
			
				
			
		
Apple seems to lack a MapKit programming guide. I have to look through the MapKit reference, search on the Internet, and read blog articles in order to do a few simple tasks with MapKit.
I thought it would be great if there is a MapKit programming guide, similar to the Push Notification Service programming guide provided [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fblog.just2us.com%2F2010%2F05%2Fhow-to-use-mapkit%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fblog.just2us.com%2F2010%2F05%2Fhow-to-use-mapkit%2F&amp;source=samwize&amp;style=normal&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Apple seems to lack a MapKit programming guide. I have to look through the MapKit reference, search on the Internet, and read blog articles in order to do a <em>few simple tasks</em> with MapKit.</p>
<p>I thought it would be great if there is a MapKit programming guide, similar to the <a href="http://developer.apple.com/iphone/library/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Introduction/Introduction.html">Push Notification Service programming guide</a> provided by Apple. </p>
<p>But there isn’t. So I am here writing one for developers who are interested to use MapKit for that <em>few simple tasks</em>. This post contains 8 code snippets for 8 tasks.</p>
<p>&#160;</p>
<h4>1. Adding a map view</h4>
<p>If you simply want to add a map to your view, simply create a MKMapView object and insert it. That’s our first big step!</p>
</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span>viewDidLoad <span style="color: #002200;">&#123;</span>
	<span style="color: #002200;">&#91;</span>super viewDidLoad<span style="color: #002200;">&#93;</span>;
	<span style="color: #11740a; font-style: italic;">// Init our map view </span>
	mapView <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>MKMapView alloc<span style="color: #002200;">&#93;</span> initWithFrame<span style="color: #002200;">:</span>self.view.bounds<span style="color: #002200;">&#93;</span>;
	<span style="color: #002200;">&#91;</span>self.view insertSubview<span style="color: #002200;">:</span>mapView atIndex<span style="color: #002200;">:</span><span style="color: #2400d9;">0</span><span style="color: #002200;">&#93;</span>;
<span style="color: #002200;">&#125;</span></pre></div></div>

<p>&#160;</p>
<h4>2. Configuring the map</h4>
<p>With a map, you could now configure various aspects by setting the mapView properties. Examples below:</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;">	<span style="color: #11740a; font-style: italic;">// Set the map type such as Standard, Satellite, Hybrid</span>
	mapView.mapType <span style="color: #002200;">=</span> MKMapTypeStandard;
&nbsp;
	<span style="color: #11740a; font-style: italic;">// Config user interactions</span>
	mapView.zoomEnabled <span style="color: #002200;">=</span> <span style="color: #a61390;">NO</span>;
	mapView.scrollEnabled <span style="color: #002200;">=</span> <span style="color: #a61390;">YES</span>;
&nbsp;
	<span style="color: #11740a; font-style: italic;">// Set the region and zoom level</span>
	MKCoordinateRegion region;
	MKCoordinateSpan span;
	CLLocationCoordinate2D location;
	location.latitude <span style="color: #002200;">=</span> <span style="color: #2400d9;">1.302851</span>; <span style="color: #11740a; font-style: italic;">// Singapore!</span>
	location.longitude <span style="color: #002200;">=</span> <span style="color: #2400d9;">103.85523</span>;
	span.latitudeDelta <span style="color: #002200;">=</span> <span style="color: #2400d9;">0.02</span>;
	span.longitudeDelta <span style="color: #002200;">=</span> <span style="color: #2400d9;">0.02</span>;
	region.span <span style="color: #002200;">=</span> span;
	region.center <span style="color: #002200;">=</span> location;
	<span style="color: #11740a; font-style: italic;">// Set to that region with an animated effect</span>
	<span style="color: #002200;">&#91;</span>mapView setRegion<span style="color: #002200;">:</span>region animated<span style="color: #002200;">:</span>TRUE<span style="color: #002200;">&#93;</span>;
	<span style="color: #11740a; font-style: italic;">// Lastly, set the MKMapViewDelegate (we will use this later) </span>
	mapView.delegate <span style="color: #002200;">=</span> self;</pre></div></div>

<p>&#160;</p>
<h4>3. Showing the user&#8217;s location</h4>
<p>To show the user&#8217;s location on the map, we set this one special property.</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;">	mapView.showsUserLocation <span style="color: #002200;">=</span> <span style="color: #a61390;">YES</span>;</pre></div></div>

</p>
<p>&#160;</p>
<h4>4. Creating custom annotations/landmarks</h4>
<p>If you want to display some landmarks, aka annotations, on the map, you will need to create your annotation class that implement the MKAnnotation protocols. </p>
<p>Say you want to display some shops on the map, this is want you would do. </p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #11740a; font-style: italic;">// ShopAnnotation.h</span>
<span style="color: #a61390;">@interface</span> ShopAnnotation <span style="color: #002200;">:</span> <span style="color: #400080;">NSObject</span> &lt;mkannotation&gt; <span style="color: #002200;">&#123;</span>
	Shop <span style="color: #002200;">*</span>shop; <span style="color: #11740a; font-style: italic;">// Assuming this class contains info about a shop</span>
<span style="color: #002200;">&#125;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #11740a; font-style: italic;">// ShopAnnotation.m	</span>
<span style="color: #11740a; font-style: italic;">// Required to implement</span>
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span>CLLocationCoordinate2D<span style="color: #002200;">&#41;</span>coordinate <span style="color: #002200;">&#123;</span>
	CLLocationCoordinate2D theCoordinate;
	theCoordinate.latitude <span style="color: #002200;">=</span> shop.latitude;
	theCoordinate.longitude <span style="color: #002200;">=</span> shop.longitude;
	<span style="color: #a61390;">return</span> theCoordinate; 
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #11740a; font-style: italic;">// Optional</span>
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #400080;">NSString</span> <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>title <span style="color: #002200;">&#123;</span>
    <span style="color: #a61390;">return</span> shop.name;
<span style="color: #002200;">&#125;</span>
&nbsp;
<span style="color: #11740a; font-style: italic;">// Optional</span>
<span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #400080;">NSString</span> <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>subtitle <span style="color: #002200;">&#123;</span>
    <span style="color: #a61390;">return</span> shop.address;
<span style="color: #002200;">&#125;</span></pre></div></div>

<p>&#160;</p>
<h4>5. Adding annotations to the map</h4>
<p>To add the annotations to the map, you would create the ShopAnnotation earlier and add them to mapView.</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;">	<span style="color: #a61390;">for</span> <span style="color: #002200;">&#40;</span>Shop <span style="color: #002200;">*</span>shop <span style="color: #a61390;">in</span> allMyShops<span style="color: #002200;">&#41;</span> <span style="color: #002200;">&#123;</span>
		ShopAnnotation <span style="color: #002200;">*</span>shopAnnotation <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>ShopAnnotation alloc<span style="color: #002200;">&#93;</span> initWithShop<span style="color: #002200;">:</span>shop<span style="color: #002200;">&#93;</span> autorelease<span style="color: #002200;">&#93;</span>;
		<span style="color: #002200;">&#91;</span>mapView addAnnotation<span style="color: #002200;">:*</span>shopAnnotation <span style="color: #002200;">&#93;</span>;
	<span style="color: #002200;">&#125;</span></pre></div></div>

<p>&#160;</p>
<h4>6. Handling the annotation views</h4>
<p>Annotations are not views. After you added your annotations to the map, you would still need to provide its views. The mapView delegate methods will be called to ask for your annotations’ VIEWS. You will need to create the view and return it for mapView to display. </p>
<p>In our example, we create a MKPinAnnotationView, which is a standard pin that you see in Maps app. You could otherwise create your custom view that extends MKAnnotationView.</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span>MKAnnotationView <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>mapView<span style="color: #002200;">:</span><span style="color: #002200;">&#40;</span>MKMapView <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>theMapView viewForAnnotation<span style="color: #002200;">:</span><span style="color: #002200;">&#40;</span><span style="color: #a61390;">id</span> &lt;mkannotation&gt;<span style="color: #002200;">&#41;</span>annotation <span style="color: #002200;">&#123;</span>
	<span style="color: #11740a; font-style: italic;">// If it's the user location, just return nil.</span>
	<span style="color: #a61390;">if</span> <span style="color: #002200;">&#40;</span><span style="color: #002200;">&#91;</span>annotation isKindOfClass<span style="color: #002200;">:</span><span style="color: #002200;">&#91;</span>MKUserLocation class<span style="color: #002200;">&#93;</span><span style="color: #002200;">&#93;</span><span style="color: #002200;">&#41;</span>
		<span style="color: #a61390;">return</span> <span style="color: #a61390;">nil</span>;
	<span style="color: #11740a; font-style: italic;">// If it is our ShopAnnotation, we create and return its view</span>
	<span style="color: #a61390;">if</span> <span style="color: #002200;">&#40;</span><span style="color: #002200;">&#91;</span>annotation isKindOfClass<span style="color: #002200;">:</span><span style="color: #002200;">&#91;</span>ShopAnnotation class<span style="color: #002200;">&#93;</span><span style="color: #002200;">&#93;</span><span style="color: #002200;">&#41;</span> <span style="color: #002200;">&#123;</span>
		<span style="color: #11740a; font-style: italic;">// try to dequeue an existing pin view first</span>
		<span style="color: #a61390;">static</span> <span style="color: #400080;">NSString</span><span style="color: #002200;">*</span> shopAnnotationIdentifier <span style="color: #002200;">=</span> <span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;ShopAnnotationIdentifier&quot;</span>;
		MKPinAnnotationView<span style="color: #002200;">*</span> pinView <span style="color: #002200;">=</span> <span style="color: #002200;">&#40;</span>MKPinAnnotationView <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span><span style="color: #002200;">&#91;</span>mapView dequeueReusableAnnotationViewWithIdentifier<span style="color: #002200;">:</span>shopAnnotationIdentifier <span style="color: #002200;">&#93;</span>;
		<span style="color: #a61390;">if</span> <span style="color: #002200;">&#40;</span><span style="color: #002200;">!</span>pinView<span style="color: #002200;">&#41;</span> <span style="color: #002200;">&#123;</span>
			<span style="color: #11740a; font-style: italic;">// If an existing pin view was not available, create one</span>
			MKPinAnnotationView<span style="color: #002200;">*</span> customPinView <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>MKPinAnnotationView alloc<span style="color: #002200;">&#93;</span> initWithAnnotation<span style="color: #002200;">:</span>annotation reuseIdentifier<span style="color: #002200;">:</span>shopAnnotationIdentifier<span style="color: #002200;">&#93;</span> autorelease<span style="color: #002200;">&#93;</span>;
			customPinView.pinColor <span style="color: #002200;">=</span> MKPinAnnotationColorRed;
			customPinView.animatesDrop <span style="color: #002200;">=</span> <span style="color: #a61390;">YES</span>;
			customPinView.canShowCallout <span style="color: #002200;">=</span> <span style="color: #a61390;">YES</span>;
&nbsp;
			<span style="color: #11740a; font-style: italic;">// add a detail disclosure button to the callout which will open a new view controller page</span>
			UIButton<span style="color: #002200;">*</span> rightButton <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span>UIButton buttonWithType<span style="color: #002200;">:</span>UIButtonTypeDetailDisclosure<span style="color: #002200;">&#93;</span>;
			customPinView.rightCalloutAccessoryView <span style="color: #002200;">=</span> rightButton;
&nbsp;
			<span style="color: #a61390;">return</span> customPinView;
		<span style="color: #002200;">&#125;</span> <span style="color: #a61390;">else</span> <span style="color: #002200;">&#123;</span>
			pinView.annotation <span style="color: #002200;">=</span> annotation;
		<span style="color: #002200;">&#125;</span>&lt;strike&gt;&lt;<span style="color: #002200;">/</span>strike&gt;&lt;strike&gt;&lt;<span style="color: #002200;">/</span>strike&gt;
		<span style="color: #a61390;">return</span> pinView;
	<span style="color: #002200;">&#125;</span>
<span style="color: #002200;">&#125;</span></pre></div></div>

<p>&#160; </p>
<h4>7. Selecting a pin</h4>
<p>When a user selects a pin and press the UIButtonTypeDetailDisclosure button within the callout, we can present more details about the annotation. Implement another MKMapViewDelegate to handle this.</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;"><span style="color: #002200;">-</span> <span style="color: #002200;">&#40;</span><span style="color: #a61390;">void</span><span style="color: #002200;">&#41;</span>mapView<span style="color: #002200;">:</span><span style="color: #002200;">&#40;</span>MKMapView <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>_mapView annotationView<span style="color: #002200;">:</span><span style="color: #002200;">&#40;</span>MKAnnotationView <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>view calloutAccessoryControlTapped<span style="color: #002200;">:</span><span style="color: #002200;">&#40;</span>UIControl <span style="color: #002200;">*</span><span style="color: #002200;">&#41;</span>control <span style="color: #002200;">&#123;</span>
	<span style="color: #11740a; font-style: italic;">// Handle it, such as showing another view controller</span>
<span style="color: #002200;">&#125;</span></pre></div></div>

<p>&#160;</p>
<h4>8. Open Maps app</h4>
<p>If want to provide a route from the user location to the selected annotation, you would need the help of iPhone’s Maps app. This means that your app will exit and Maps app will be opened, with you telling Maps the source and destination to route.</p>
<p>You can open Maps with the schema as such.</p>

<div class="wp_syntax"><div class="code"><pre class="objc" style="font-family:monospace;">	<span style="color: #400080;">NSString</span> <span style="color: #002200;">*</span>url <span style="color: #002200;">=</span> <span style="color: #002200;">&#91;</span><span style="color: #400080;">NSString</span> stringWithFormat<span style="color: #002200;">:</span><span style="color: #bf1d1a;">@</span><span style="color: #bf1d1a;">&quot;http://maps.google.com/maps?saddr=%f,%f&amp;amp;daddr=%f,%f&quot;</span>;, userLatitude, userLongitude, <span style="color: #002200;">&#91;</span>shop.latitude floatValue<span style="color: #002200;">&#93;</span>, <span style="color: #002200;">&#91;</span>shop.longitude floatValue<span style="color: #002200;">&#93;</span><span style="color: #002200;">&#93;</span>;
	<span style="color: #002200;">&#91;</span><span style="color: #002200;">&#91;</span>UIApplication sharedApplication<span style="color: #002200;">&#93;</span> openURL<span style="color: #002200;">:</span><span style="color: #002200;">&#91;</span><span style="color: #400080;">NSURL</span> URLWithString<span style="color: #002200;">:</span>url<span style="color: #002200;">&#93;</span><span style="color: #002200;">&#93;</span>;</pre></div></div>

<p>&#160;</p>
<p>With that, we have come to the end of <em>a few simple tasks</em> with MapKit!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.just2us.com/2010/05/how-to-use-mapkit/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>

