Developer
THIS SDK ISDEPRECATED.

We rolled out a new and better SDK for you.

CHECK IT OUT

Markers

Utilize different Maps SDK marker features to provide engaging functionality in your mobile app.

The main marker features are:

  • Customizable marker icons: Use the default TomTom marker, or favorite icons, or use your own.
  • Simple and decal marker mode: Choose how the marker is rendered on the map.
  • Draggable markers: Allow your users to drag and drop a marker around the map.
  • Animated markers: Use GIFs as marker icons.

You can find details of each of the marker features following the examples on this page.

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

1MarkerBuilder markerBuilder = new MarkerBuilder(position)
2        .icon(Icon.Factory.fromResources(context, R.drawable.ic_favourites))
3        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)))
4        .tag("more information in tag").iconAnchor(MarkerAnchor.Bottom)
5        .decal(true) //By default is false
6tomtomMap.addMarker(markerBuilder);
1val markerBuilder = MarkerBuilder(position)
2    .icon(icon)
3    .markerBalloon(SimpleMarkerBalloon(positionToText(position)))
4    .tag(SERIALIZABLE_MARKER_TAG)
5    .iconAnchor(MarkerAnchor.Bottom)
6    .decal(true) //By default is false
7tomtomMap.addMarker(markerBuilder)

Examples are shown in the following code snippet:

image

Icon Marker

image

Decal Marker

Create a simple marker with a default icon and add it to the map; only the location needs to be specified:

1MarkerBuilder markerBuilder = new MarkerBuilder(position)
2        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)));
3tomtomMap.addMarker(markerBuilder);
1val markerBuilder = MarkerBuilder(position)
2    .markerBalloon(SimpleMarkerBalloon(positionToText(position)))
3tomtomMap.addMarker(markerBuilder)

Marker selected

You can implement an observable marker selected event. You can do that with the global listener OnMarkerClickedListener for all markers that have to be registered on MarkerSettings as shown in the following code snippets:

tomtomMap.addOnMarkerClickListener(this);
tomtomMap.addOnMarkerClickListener(markerListener)

For that purpose, the passed object has to implement the following interface:

1interface OnMarkerClickListener {
2    /**
3     * Called when the user clicks on the marker.
4     *
5     * @param marker Selected marker.
6     */
7    void onMarkerClick(@NonNull Marker marker);
8}

You can remove all markers from the map in this way:

tomtomMap.removeMarkers();
tomtomMap.removeMarkers()

You can remove all the markers one-by-one in this way:

  • Remove all markers with the tag "tag".
tomtomMap.removeMarkerByTag("tag");
tomtomMap.removeMarkerByTag("tag")
  • Remove marker by id.
tomtomMap.removeMarkerByID(1);
tomtomMap.removeMarkerByID(1)

Simple and decal marker modes

  • 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 the icon sticks to the map even when the map is rotated. Only one callout anchor point is supported for decal MarkerAnchor - Bottom.

Mixing icons of different 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.

Non-decal icons may optionally cast a shadow on the map. You will need to leave additional empty space between icons in your drawable if you specify a non-zero blur amount.

Draggable markers

Thanks to this feature your users are able move existing markers around the map. They long-click on a marker that is on the map to start dragging it, then they drop the marker on a selected position by releasing the finger from the screen.

In order to do that you need to set 'draggable' to true:

1MarkerBuilder markerBuilder = new MarkerBuilder(position)
2        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)))
3        .draggable(true);
4tomtomMap.addMarker(markerBuilder);
1val markerBuilder = MarkerBuilder(position)
2    .markerBalloon(SimpleMarkerBalloon(positionToText(position)))
3    .draggable(true)
4tomtomMap.addMarker(markerBuilder)

It is also possible to register to receive the Marker’s dragging callbacks.

As an example you can create a listener like this one:

1TomtomMapCallback.OnMarkerDragListener onMarkerDragListener = new TomtomMapCallback.OnMarkerDragListener() {
2    @Override
3    public void onStartDragging(@NonNull Marker marker) {
4        Timber.d("onMarkerDragStart(): " + marker.toString());
5        displayMessage(R.string.marker_dragging_start_message, marker.getPosition().getLatitude(), marker.getPosition().getLongitude());
6    }
7

8    @Override
9    public void onStopDragging(@NonNull Marker marker) {
10        Timber.d("onMarkerDragEnd(): " + marker.toString());
11        displayMessage(R.string.marker_dragging_end_message, marker.getPosition().getLatitude(), marker.getPosition().getLongitude());
12    }
13

14    @Override
15    public void onDragging(@NonNull Marker marker) {
16        Timber.d("onMarkerDragging(): " + marker.toString());
17    }
18};
1private var onMarkerDragListener: TomtomMapCallback.OnMarkerDragListener = object : TomtomMapCallback.OnMarkerDragListener {
2    override fun onStartDragging(marker: Marker) {
3        displayMessage(R.string.marker_dragging_start_message, marker.position.latitude, marker.position.longitude)
4    }
5

6    override fun onStopDragging(marker: Marker) {
7        displayMessage(R.string.marker_dragging_end_message, marker.position.latitude, marker.position.longitude)
8    }
9

10    override fun onDragging(marker: Marker) {
11    }
12}

Then register it to receive events related to dragging the marker over the map:

tomtomMap.getMarkerSettings().addOnMarkerDragListener(onMarkerDragListener);
tomtomMap.markerSettings.addOnMarkerDragListener(onMarkerDragListener)

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:

1MarkerBuilder markerBuilder = new MarkerBuilder(position)
2        .icon(createAnimatedIcon());
3tomtomMap.addMarker(markerBuilder);
1val markerBuilder = MarkerBuilder(position)
2    .icon(icon)
3tomtomMap.addMarker(markerBuilder)

Marker anchoring

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 as presented in the following figure. You can change this behavior by MarkerAnchor enumeration on the builder. E.g., if you want to use a crosshair annotation image, you should set the anchor to MarkerAnchor.Center

1MarkerBuilder markerBuilder = new MarkerBuilder(position)
2        .icon(Icon.Factory.fromResources(context, R.drawable.ic_favourites))
3        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)))
4        .tag("more information in tag").iconAnchor(MarkerAnchor.Bottom)
5        .decal(true); //By default is false
6tomtomMap.addMarker(markerBuilder);
1val markerBuilder = MarkerBuilder(position)
2    .icon(icon)
3    .markerBalloon(SimpleMarkerBalloon(positionToText(position)))
4    .tag(SERIALIZABLE_MARKER_TAG)
5    .iconAnchor(MarkerAnchor.Bottom)
6    .decal(true) //By default is false
7tomtomMap.addMarker(markerBuilder)

All possible anchors are defined in the enum:

1/**
2 * Copyright (c) 2015-2021 TomTom N.V. All rights reserved.
3 *
4 * This software is the proprietary copyright of TomTom N.V. and its subsidiaries and may be used
5 * for internal evaluation purposes or commercial use strictly subject to separate licensee
6 * agreement between you and TomTom. If you are the licensee, you are only permitted to use
7 * this Software in accordance with the terms of your license agreement. If you are not the
8 * licensee then you are not authorised to use this software in any manner and should
9 * immediately return it to TomTom N.V.
10 */
11package com.tomtom.online.sdk.map;
12

13import android.graphics.PointF;
14

15import com.tomtom.online.sdk.annotations.DeprecatedSince;
16

17import java.io.Serializable;
18

19/**
20 * The anchor property of the marker.
21 */
22public enum MarkerAnchor implements Serializable {
23

24    /**
25     * Value of(0,-0.5).
26     */
27    Center(0f, -0.5f),
28    /**
29     * Value of(-0.5,-0.5).
30     */
31    Left(-0.5f, -0.5f),
32

33    /**
34     * Value of(0.5,-0.5).
35     */
36    Right(0.5f, -0.5f),
37    /**
38     * Value of(0, 0).
39     */
40    Top(0, 0),
41

42    /**
43     * Value of(0,-1).
44     */
45    Bottom(0, -1f),
46

47    /**
48     * Value of(-0.5, 0).
49     */
50    TopLeft(-0.5f, 0),
51    /**
52     * Value of(0.5,0).
53     */
54    TopRight(0.5f, 0),
55

56    /**
57     * Value of(-0.5,-1).
58     */
59    BottomLeft(-0.5f, -1f),
60

61    /**
62     * Value of(0.5,-1).
63     */
64    BottomRight(0.5f, -1f);
65

66    /**
67     * Defines the icon offset in the x axis.
68     *
69     * @deprecated Replaced with a getter {@link MarkerAnchor#getIconOffset()}.
70     */
71    @Deprecated
72    @DeprecatedSince(date = "2020.11", replacedWith = "MarkerAnchor.getIconOffset()")
73    public float xIconOffset;
74

75    /**
76     * Defines the icon offset in the y axis.
77     *
78     * @deprecated Replaced with a getter {@link MarkerAnchor#getIconOffset()}.
79     */
80    @Deprecated
81    @DeprecatedSince(date = "2020.11", replacedWith = "MarkerAnchor.getIconOffset()")
82    public float yIconOffset;
83

84    /**
85     * Returns the icon offset in the x and y axis for the given {@link MarkerAnchor} value.
86     */
87    public PointF getIconOffset() {
88        return new PointF(xIconOffset, yIconOffset);
89    }
90

91    MarkerAnchor(float xIconOffset, float yIconOffset) {
92        this.xIconOffset = xIconOffset;
93        this.yIconOffset = yIconOffset;
94    }
95}

Marker performance

For performance purposes, it is recommended to combine multiple icons into a single drawable, and specify the sub-region of the icon you are interested in. If you use this approach, be sure to leave at least one empty pixel between the icons in your image to keep the edges from blending together as the icons are scaled.