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

Markers

Markers

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

The main marker features are as following:

  • 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 feature below 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.

MarkerBuilder markerBuilder = new MarkerBuilder(position)
        .icon(Factory.fromResources(getContext(), R.drawable.ic_favourites))
        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)))
        .tag("more information in tag").iconAnchor(MarkerAnchor.Bottom)
        .decal(true); //By default is false
tomtomMap.addMarker(markerBuilder);

Examples are below:



image

Icon Marker

image

Decal Marker

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

MarkerBuilder markerBuilder = new MarkerBuilder(position)
        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)));
tomtomMap.addMarker(markerBuilder);

Marker selected

You can implement an observable of marker selected event. You can do that with the global listener OnMarkerClickedListener for all markers that has to be registered on MarkerSettings as following:

tomtomMap.addOnMarkerClickListener(this);

 

For that purpose the passed object has to implement the below interface:

interface OnMarkerClickListener {
    /**
     * Called when the user clicks on the marker.
     *
     * @param marker Selected marker.
     */
    void onMarkerClick(@NonNull Marker marker);
}

 

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

tomtomMap.removeMarkers();

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

  • Remove all markers with the tag "tag".

tomtomMap.removeMarkerByTag("tag");
  • Remove marker by id.

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 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, 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.

MarkerBuilder markerBuilder = new MarkerBuilder(position)
        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)))
        .draggable(true);
tomtomMap.addMarker(markerBuilder);

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

As an example you can create listener like this one:

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

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

    @Override
    public void onDragging(@NonNull Marker marker) {
        Timber.d("onMarkerDragging(): " + marker.toString());
    }
};

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

tomtomMap.getMarkerSettings().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:

MarkerBuilder markerBuilder = new MarkerBuilder(position)
    .icon(Icon.Factory.fromAssets(view.getContext(), SAMPLE_GIF_ASSET_PATH));
tomtomMap.addMarker(markerBuilder);

Marker anchoring

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 as presented in the figure below.
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

MarkerBuilder markerBuilder = new MarkerBuilder(position)
        .icon(Factory.fromResources(getContext(), R.drawable.ic_favourites))
        .markerBalloon(new SimpleMarkerBalloon(positionToText(position)))
        .tag("more information in tag").iconAnchor(MarkerAnchor.Bottom)
        .decal(true); //By default is false
tomtomMap.addMarker(markerBuilder);

All possible anchors are define in the enum:

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

import java.io.Serializable;

/**
 * The anchor property of the marker. Following values are possible:
 * (-0.5,0)       (0, 0)    (0.5,0)
 * TopLeft          Top     TopRight
 * (-0.5,-0.5f)  (0,-0.5f)  (0.5,-0.5f)
 * Left           Center    Right
 * (-0.5,-1f)   (0,-1)    (0.5,-1f)
 * BottomLeft     Bottom    BottomRight
 */
public enum MarkerAnchor implements Serializable {

    Center(0f, -0.5f), Left(-0.5f, -0.5f), Right(0.5f, -0.5f), Top(0, 0), Bottom(0, -1f),
    TopLeft(-0.5f, 0), TopRight(0.5f, 0), BottomLeft(-0.5f, -1f), BottomRight(0.5f, -1f);

    public float xIconOffset;
    public float yIconOffset;

    MarkerAnchor(float xIconOffset, float yIconOffset) {
        this.xIconOffset = xIconOffset;
        this.yIconOffset = yIconOffset;
    }
}

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 icons in your image to keep the edges from blending
together as the icons are scaled.