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 one of factory methods from ** TTAnnotation** to create an annotation, then pass it to manager.

You can display icons using two 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 an 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 the 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 following code snippet to display a single annotation at specific coordinates on the map.

let annotation = TTAnnotation(coordinate: cooridnate)
mapView.annotationManager.add(annotation)

TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate]
[self.mapView.annotationManager addAnnotation:annotation];

1let annotation = TTAnnotation(coordinate: cooridnate)
2annotation.selectable = false
3annotation.isDraggable = true
4mapView.annotationManager.add(annotation)

1TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate];
2annotation.selectable = NO;
3annotation.isDraggable = YES;
4[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:

1let customIcon = TTAnnotationImage.createGIF(withName: "gif_annotation")!
2let annotation = TTAnnotation(coordinate: cooridnate, annotationImage: customIcon, anchor: .bottom, type: .decal)
3annotation.selectable = false
4mapView.annotationManager.add(annotation)

1TTAnnotationImage *customIcon = [TTAnnotationImage createGIFWithName:@"gif_annotation"];
2TTAnnotation *annotation = [TTAnnotation annotationWithCoordinate:coordinate annotationImage:customIcon anchor:TTAnnotationAnchorBottom type:TTAnnotationTypeDecal];
3annotation.selectable = NO;
4[self.mapView.annotationManager addAnnotation:annotation];

Annotation anchor

You can 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. For example, if you want to use a crosshair annotation image, you should set the anchor to ** TTAnnotationAnchorCenter**

Annotation selected

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

Annotation click listener

The Maps SDK allows you to observe an annotation selected event. There is one global delegate ** TTAnnotationDelegate** for all annotations that has to be registered on TTAnnotationManager as shown in the following example:

mapView.annotationManager.delegate = self

self.mapView.annotationManager.delegate = self;

1func annotationManager(_: TTAnnotationManager, annotationSelected _: TTAnnotation) {
2    // handle annotation selected event
3}

1- (void)annotationManager:(id<TTAnnotationManager>)annotationManager annotationSelected:(TTAnnotation *)annotation {
2    // handle annotation selected event
3}