Skip to content

Modules.Map.Annotation

Represents a labeled point of interest on the map that the user can click on.

The Annotation object gives you low-level control over annotations that can be added to map view. An annotation must have its latitude and longitude properties set to appear on a map.

Use the Modules.Map.createAnnotation method to create an annotation. Starting with Alloy 1.4.0, use the <Annotation> Alloy element to define one in XML markup.

An annotation can also have a title, a subtitle, and two inset buttons or views on the left and right side of the title. All of these items are optional.

The controls on the left and right side of the annotation can be specified in one of two ways:

  • To display an image, set the leftButton or rightButton property to an image URL. (On iOS, you can also use a SystemButton constant to use one of the native system button icons.)

  • To add another type of view to the annotation, set the leftView or rightView property to a View object.

An annotation has two states: selected and deselected. A deselected annotation is marked by a pin image. When the user selects the pin, the full annotation is displayed.

You can specify a custom image for the map pin by setting the image property.

When the user clicks on an annotation, a click event is generated.

On iOS, You can add a click event listener to a specific annotation, or add a click event listener to the map view to receive click events from all annotations on the map.

On Android, you must add the click event listener to the map view; the annotation itself does not generate these events.

Extends: Titanium.Proxy · Since: 3.0.2, 3.2.0, 3.2.0, 9.2.0 · Platforms: android, iphone, ipad, macos

Properties #

annotationDisplayPriority#

Type: Number

The display priority of this annotation view.

An annotation view whose priority is set to MKFeatureDisplayPriorityRequired is always visible
on the map, whereas other priorities may result in the annotation view being hidden. Use
Modules.Map.FEATURE_DISPLAY_PRIORITY_REQUIRED, Modules.Map.FEATURE_DISPLAY_PRIORITY_DEFAULT_HIGH or
Modules.Map.FEATURE_DISPLAY_PRIORITY_DEFAULT_LOW.

canShowCallout#

Type: Boolean

Defines whether the annotation view is able to display extra information in a callout bubble.

When this is set to true, the annotation view shows the callout bubble on selection.
Set this to false to disabled the showing of the callout bubble on selection.
This must be set before the annotation is added to the map.

If this value is undefined, the value is treated as explicit true.

centerOffset#

Type: Point

Defines a center offset point for the annotation.

By default, the center point of an annotation view is placed at the coordinate point of the
associated annotation. Use this property to reposition the annotation view as needed.
Positive offset values move the annotation view down and right, while negative values
move it up and left.

clusterIdentifier#

Type: String

An identifier that determines whether the annotation view participates in clustering.

The default value of this property is null, which prevents the annotation view from being clustered
with other annotation views. Setting the property to a non null value it to participate in clustering.
Clustering occurs when there is a collision between multiple annotation views with the same identifier
on the map surface. The annotation views involved in the collision are removed from the map view and
replaced by a clustering annotation view, which displays the title from one of the annotations and
provides access to the other annotations.

collisionMode#

Type: Number

The collision mode to use when interpreting the collision frame rectangle.

customView#

Type: Titanium.UI.View

Defines a custom view to be used by the annotation.

Must be set during creation. User interaction is disabled on the view.
No view interaction events (click, touchstart etc) will be fired.

draggable#

Type: Boolean

Determines whether the pin can be dragged by the user.

When an annotation is draggable, it can be moved by the user by long pressing on the pin.

hidden#

Type: Boolean

Determines whether the annotation is hidden or not.

image#

Type: String, Titanium.Blob

Image to use for the the pin.

Must be set during creation. This is ignored if the customView property is set.

latitude#

Type: Number

Latitude of the annotation, in decimal degrees.

leftButton#

Type: String

Left button image on the annotation, specified as an image URL.

leftView#

Type: Titanium.UI.View

Left view that is displayed on the annotation.

This is ignored if the leftButton property is set.

longitude#

Type: Number

Longitude of the annotation, in decimal degrees.

markerAnimatesWhenAdded#

Type: Boolean

Boolean indicating whether the marker animates into position onscreen.

markerColor#

Type: String

The background color of the marker balloon.

The default value of this property is undefined, which applies the standard color that is appropriate
for the current map style.

markerGlyphColor#

Type: String

The color to apply to the glyph text or image.

The default value of this property is undefined, which applies the standard tint color for the
current map style.

markerGlyphImage#

Type: String, Titanium.Blob

The image displayed in the marker balloon.

Use this property or the Modules.Map.Annotation.markerGlyphText property to specify the marker balloon content.
If you specify both an image and text, the text is displayed.
The glyph image is displayed when the marker is in the normal state. Create glyph images as template
images so that the glyph tint color can be applied to it. Normally, you set the size of this image to
20 by 20 points on iOS. However, if you do not provide a separate selected image in the Modules.Map.Annotation.markerSelectedGlyphImage
property, make the size of this image 40 by 40 points on iOS. MapKit scales images that are larger or
smaller than those sizes.

markerGlyphText#

Type: String

The text to display in the marker balloon.

Use this property or the Modules.Map.Annotation.markerGlyphImage property to specify the marker balloon content.
If you specify both an image and text, the text is displayed.
The amount of space available for displaying your glyph text is limited. Specify no more than
two or three characters for any strings you assign to this property.

markerSelectedGlyphImage#

Type: String, Titanium.Blob

The image to display when the marker is selected.

The glyph image is displayed when the marker is in the selected state. This image is displayed only when the
marker is selected. If you specify an image for this property, you should also specify an image in the Modules.Map.Annotation.markerGlyphImage
property.
Create glyph images as template images so that the glyph tint color can be applied to it. Set the size of this image
to 40 by 40 points on iOS. MapKit scales images that are larger or smaller than those sizes.

markerSubtitleVisibility#

Type: Number

The visibility of the subtitle text rendered below the marker balloon.

The subtitle text is hidden when the marker is not selected. The text is shown when the marker
is selected. Use Modules.Map.FEATURE_VISIBILITY_ADAPTIVE, Modules.Map.FEATURE_VISIBILITY_VISIBLE or Modules.Map.FEATURE_VISIBILITY_HIDDEN.

markerTitleVisibility#

Type: Number

The visibility of the title text rendered below the marker balloon.

pincolor#

Type: Number, String

The color of the pin-annotation. Use the ANNOTATION_* constants for pre-
defined colors, e.g ANNOTATION_GREEN.

Note for iOS: Apps running iOS 9 and later can also specify a non-constant
value, e.g. "blue", "rgb(0, 0, 255 ,1)" or "#0000ff".

Pin color is ignored if a custom pin image is specified using Modules.Map.Annotation.image.

previewContext#

Type: Titanium.UI.iOS.PreviewContext

The preview context used in the 3D-Touch feature "Peek and Pop".

Preview context to present the "Peek and Pop" of a view. Use an configured instance
of Titanium.UI.iOS.PreviewContext here.

Note: This property can only be used on devices running iOS9 or later and supporting 3D-Touch.
It is ignored on older devices and can manually be checked using Titanium.UI.iOS.forceTouchSupported.

rightButton#

Type: String

Right button image on the annotation, specified as an image URL.

rightView#

Type: Titanium.UI.View

Right view that is displayed on the annotation.

This is ignored if the rightButton property is set.

showAsMarker#

Type: Boolean

Boolean to show an annotation view that displays a balloon-shaped
marker at the designated location.

Must be set during creation. This is ignored if the customView property is set.
See the example "Map Example With Marker Annotation and Clustering".

showInfoWindow#

Type: Boolean

Show or hide the view that is displayed on the annotation when clicked.

When this is false, clicking on the annotation will not center it on the map, but the
annotation will still be selected, thus triggering the click event.
If the annotation is selected, and the info window is hidden, then the next click
will deselect the annotation, thus will NOT show the info window, regardless of the current state of this property.

subtitle#

Type: String

Secondary title of the annotation view.

subtitleid#

Type: String

Key in the locale file to use for the subtitle property.

title#

Type: String

Primary title of the annotation view.

titleid#

Type: String

Key in the locale file to use for the title property.

Methods #

animate #

Animate annotation to new location.

Parameters:
NameTypeSummaryOptional
newLocationArray<Number>latitude and longitude where annotation will animate.No

rotate #

Rotate annotation on its location.

Parameters:
NameTypeSummaryOptional
angleNumberangle on which annotation will rotate.No

Titanium SDK Documentation