Sorry, you need to enable JavaScript to visit this website.

Annotations

Annotations

You can place custom images on the map using TTAnnotation.
You can do that with a TTAnnotationManager which can be obtained from TTMapView.
Use a one of factory method from TTAnnotation to create an annotation, then pass it to manager.

You can display icons using a two of different types:

  • Focal (default) - where the icon always stands vertically even when the map is rotated. All nine callout anchor points are supported with this annotation type.

  • Decal - where icon sticks to the map even when the map is rotated. Only one callout anchor point is supported for decal TTAnnotationAnchorBottom

  • Draggable markers – allow your users to drag and drop a marker around the map

Mixing icons of focal and decal modes is generally unsupported and advised against, as there are unresolvable depth-sorting issues and the results
will not always look correct. It is safe to mix some modes, however, such as either of the decal modes with any of the standing modes.
For performance purposes, it is recommended to use the same tag for same images so they can be reused from cache.

Sample use case: In your app, you want to display a number of annotations, to mark places on the map.
Use the code snippet below to display a single annotation at specific coordinates on the map

 



image

Focal annotations examples

image

Decal annotations examples

 

_

let annotation = TTAnnotation(coordinate: cooridnate)
mapView.annotationManager.add(annotation)
TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate];
[self.mapView.annotationManager addAnnotation:annotation];

 

_

let annotation = TTAnnotation(coordinate: cooridnate)
annotation.isDraggable = true
mapView.annotationManager.add(annotation)
TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate];
annotation.isDraggable = YES;
[self.mapView.annotationManager addAnnotation:annotation];

 

Animated markers

Thanks to this feature you can use GIFs as marker icons. For this purpose, you need to place your images
in the assets folder and then use them in the following way:

_

let customIcon = TTAnnotationImage.createGIF(withName: "gif_annotation")!
let annotation = TTAnnotation(coordinate: cooridnate, annotationImage: customIcon, anchor: .bottom, type: .decal)
mapView.annotationManager.add(annotation)
TTAnnotationImage *customIcon = [TTAnnotationImage createGIFWithName:@"gif_annotation"];
TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate annotationImage:customIcon anchor:TTAnnotationAnchorBottom type:TTAnnotationTypeDecal];
[self.mapView.annotationManager addAnnotation:annotation];

 

Annotation anchor

You have a possibility to change the anchoring point for your icon. The anchor specifies which point of an annotation image is attached to the map.
The annotation will rotate around this anchoring point when rotating the map.
You can use the default image representation of an annotation which is attached to the bottom height center width.
You can change this behavior by TTAnnotationAnchor enumeration.
E.g. if you want to use a crosshair annotation image, you should set the anchor to TTAnnotationAnchorCenter

Annotation selected

You can implement an observable of annotation selected event. You can do that with the global delegate TTAnnotationDelegate
for all annotations that has to be registered on TTAnnotationManager as following

Annotation click listener

Maps SDK allows to observe annotation selected event.
There is one global delegate TTAnnotationDelegate for all annotations that has to be registered on TTAnnotationManager as followed.

_

mapView.annotationManager.delegate = self
self.mapView.annotationManager.delegate = self;

 

_

func annotationManager(_ manager: TTAnnotationManager, annotationSelected annotation: TTAnnotation) {
    //handle annotation selected event
}
- (void)annotationManager:(id<TTAnnotationManager>)annotationManager annotationSelected:(TTAnnotation *)annotation {
    //handle annotation selected event
}