---
title: ASMapNode
layout: docs
permalink: /docs/map-node.html
prevPage: video-node.html
nextPage: control-node.html
---

`ASMapNode` allows you to easily specify a geographic region to show to your users.  

### Basic Usage

Let's say you'd like to show a snapshot of San Francisco.  All you need are the coordinates.

<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>

<div class = "code">
<pre lang="objc" class="objcCode">
ASMapNode *mapNode = [[ASMapNode alloc] init];
mapNode.style.preferredSize = CGSizeMake(300.0, 300.0);

// San Francisco
CLLocationCoordinate2D coord = CLLocationCoordinate2DMake(37.7749, -122.4194);

// show 20,000 square meters
mapNode.region = MKCoordinateRegionMakeWithDistance(coord, 20000, 20000);
</pre>

<pre lang="swift" class = "swiftCode hidden">
let mapNode = ASMapNode()
mapNode.style.preferredSize = CGSize(width: 300.0, height: 300.0)

// San Francisco
let coord = CLLocationCoordinate2DMake(37.7749, -122.4194)

// show 20,000 square meters
mapNode.region = MKCoordinateRegionMakeWithDistance(coord, 20000, 20000)
</pre>
</div>
</div>

<img width = "300" src = "/static/images/basicMap.png"/>

The region value is actually just one piece of a property called `options` of type `MKMapSnapshotOptions`.


### MKMapSnapshotOptions

A map node's main components can be defined directly through its `options` property.  The snapshot options object contains the following:

<ul>
	<li>An <code>MKMapCamera</code>: used to configure altitude and pitch of the camera</li>
	<li>An <code>MKMapRect</code>: basically a CGRect</li>
	<li>An <code>MKMapRegion</code>: Controls the coordinate of focus, and the size around that focus to show</li>
	<li>An <code>MKMapType</code>: Can be set to Standard, Satellite, etc.</li>
</ul>

To do something like changing your map to a satellite map, you just need to create an options object and set its properties accordingly.

<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>

<div class = "code">
<pre lang="objc" class="objcCode">
MKMapSnapshotOptions *options = [[MKMapSnapshotOptions alloc] init];
options.mapType = MKMapTypeSatellite;
options.region = MKCoordinateRegionMakeWithDistance(coord, 20000, 20000);

mapNode.options = options;
</pre>
<pre lang="swift" class = "swiftCode hidden">
let options = MKMapSnapshotOptions()
options.mapType = .satellite
options.region = MKCoordinateRegionMakeWithDistance(coord, 20000, 20000)

mapNode.options = options
</pre>
</div>
</div>

Results in:

<img width = "300" src = "/static/images/satelliteMap.png"/>

One thing to note is that setting the options value will overwrite a previously set region.

### Annotations

To set annotations, all you need to do is assign an array of annotations to your `ASMapNode`.

Say you want to show a pin directly in the middle of your map of San Francisco.

<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>

<div class = "code">
<pre lang="objc" class="objcCode">
MKPointAnnotation *annotation = [[MKPointAnnotation alloc] init];
annotation.coordinate = CLLocationCoordinate2DMake(37.7749, -122.4194);

mapNode.annotations = @[annotation];
</pre>
<pre lang="swift" class = "swiftCode hidden">
let annotation = MKPointAnnotation()
annotation.coordinate = CLLocationCoordinate2DMake(37.7749, -122.4194)

mapNode.annotations = [annotation]
</pre>
</div>
</div>

<img width = "300" src = "/static/images/mapWithAnnotation.png"/>

No problem.

### Live Map Mode

Chaning your map node from a static view of some region, into a fully interactable cartographic playground is as easy as:

<div class = "highlight-group">
<span class="language-toggle"><a data-lang="swift" class="swiftButton">Swift</a><a data-lang="objective-c" class = "active objcButton">Objective-C</a></span>

<div class = "code">
<pre lang="objc" class="objcCode">
mapNode.liveMap = YES;
</pre>
<pre lang="swift" class = "swiftCode hidden">
mapNode.liveMap = true
</pre>
</div>
</div>

This enables "live map mode" in which the node will use an <a href = "https://developer.apple.com/library/mac/documentation/MapKit/Reference/MKMapView_Class/">MKMapView</a> to render an interactive version of your map.

<img width = "300" src = "/static/images/liveMap.gif"/>

As with UIKit views, the `MKMapView` used in live map mode is not thread-safe.

### MKMapView Delegate

If live map mode has been enabled and you need to react to any events associated with the map node, you can set the `mapDelegate` property.  This delegate should conform to the <a href = "https://developer.apple.com/library/ios/documentation/MapKit/Reference/MKMapViewDelegate_Protocol/index.html">MKMapViewDelegate</a> protocol.