mirror of
https://github.com/Swiftgram/Telegram-iOS.git
synced 2025-06-16 05:55:20 +00:00
9bc996374f
git-subtree-dir: submodules/AsyncDisplayKit git-subtree-mainline: d06f423e0ed3df1fed9bd10d79ee312a9179b632 git-subtree-split: 02bedc12816e251ad71777f9d2578329b6d2bef6
147 lines
4.9 KiB
Markdown
Executable File
147 lines
4.9 KiB
Markdown
Executable File
---
|
|
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.
|
|
|
|
|
|
|
|
|