Overlays

The TomTom Map Display module allows you to draw different shapes on the map.

Circles

You can draw a circle on the map by specifying:

• Coordinates for the center.
• Radius of the circle.
• Circle color.

The Map Display module provides a few predefined colors but you can also create you custom ones using Color class.

1val fillColor = Color(0.99f, 0.93f, 0.83f, 0.5f)
2val outlineColor = Color(0.93f, 0.62f, 0f, 0.6f)
3val circleOptions = CircleOptions(
4    GeoPoint(52.367956, 4.897070),
5    radius = 3000.0,
6    radiusUnit = RadiusUnit.METERS,
7    fillColor = fillColor,
8    outlineColor = outlineColor,
9    outlineRadius = 100.0
10)
11val circle = tomTomMap.addCircle(circleOptions)

The TomTomMap.addCircle(CircleOptions) method returns a Circle object. Use it to update the circle’s properties, or call its Circle.remove() method to remove it from the map.

All circles added to the TomTomMap instance are stored in a read-only circles property.

To remove all the circles from the map at once, call its TomTomMap.removeCircles() method.

tomTomMap.removeCircles()

Use the OnCircleClickListener to listen for click events performed on any circle added to the map. Add the listener to the TomTomMap object. Then whenever a Circle is clicked, the OnCircleClickListener.onCircleClicked(Circle) method is called with that specific Circle instance as a parameter.

1val onCircleClickListener =
2    OnCircleClickListener { circle: Circle -> /* YOUR CODE GOES HERE */ }
3tomTomMap.addOnCircleClickListener(onCircleClickListener)

The OnCircleClickListener can be removed when it is no longer needed.

tomTomMap.removeOnCircleClickListener(onCircleClickListener)

Polygons

The Map Display module also supports drawing polygons on the map. Drawing a polygon requires at least 3 vertices to be specified. The coordinates of a polygon are provided as a list of GeoPoint objects, listed in counter-clockwise order.

In addition to defining the shape of the figure, you can specify its fill color and display an image inside it. To preserve the size of the original image, set the isImageOverlay property to false. If the image is smaller than the polygon, it will be tiled. To scale the image to cover the whole polygon, set it to true.

If you add an image inside the polygon together with the fillColor, their pixels will be multiplied. By default, the fillColor property is set to blue. To preserve the original image colors, change it to white.

1val fillColor = Color(0.0F, 0.0F, 1.0F, 0.5F)
2val polygonOptions = PolygonOptions(
3    listOf(
4        GeoPoint(latitude = 52.33744437330409, longitude = 4.84036333215833),
5        GeoPoint(latitude = 52.3374581784774, longitude = 4.88185047814447),
6        GeoPoint(latitude = 52.32935816673911, longitude = 4.910078096170823),
7        GeoPoint(latitude = 52.381705486736315, longitude = 4.893630047460435),
8        GeoPoint(latitude = 52.385294680380866, longitude = 4.846939597146335)
9    ),
10    outlineColor = Color.BLUE,
11    outlineWidth = 2.0,
12    fillColor = fillColor,
13)
14val polygon = tomTomMap.addPolygon(polygonOptions)

The TomTomMap.addPolygon(PolygonOptions) method returns a Polygon object. Use it to modify the shape’s properties, or call its Polygon.remove() method to remove it from the map. To remove all the polygons from the map at once, use the TomTomMap.removePolygons() method.

Use the OnPolygonClickListener to listen for click events performed on any polygon added to the map. Add the listener to the TomTomMap object. Then whenever a Polygon is clicked, the OnPolygonClickListener.onPolygonClicked(Polygon) method is called with that specific Polygon instance as a parameter.

1val onPolygonClickListener =
2    OnPolygonClickListener { polygon: Polygon -> /* YOUR CODE GOES HERE */ }
3tomTomMap.addOnPolygonClickListener(onPolygonClickListener)

Remove the listener when you no longer need to observe click events on polygons.

tomTomMap.removeOnPolygonClickListener(onPolygonClickListener)

Polylines

A Polyline is a continuous line composed of one or more line segments. Each endpoint of the line segments in a Polyline is a coordinate on the map. Set the list of Polyline coordinates using the PolylineOptions class.

The list should contain at least two points.

You can also define the appearance of a Polyline by setting its color and width. Polyline width can be defined as a single value (which will be the same for all zoom levels), or different polyline widths can be set for different zoom levels. The width will be then interpolated for all the zoom levels in between. Line widths for zoom levels outside of the specified range will be clamped to the nearest specified value.

In addition to setting the color and width of the Polyline, you can change the shape of its ends. There are several different shapes that you can apply to the start and end of the line. They are defined as CapTypes.

1val lineColor = Color(0.2f, 0.6f, 1.0f)
2val outlineColor = Color(0f, 0.3f, 0.5f)
3val polylineOptions = PolylineOptions(
4    listOf(
5        GeoPoint(latitude = 52.33744437330409, longitude = 4.84036333215833),
6        GeoPoint(latitude = 52.3374581784774, longitude = 4.88185047814447),
7        GeoPoint(latitude = 52.32935816673911, longitude = 4.910078096170823),
8    ),
9    lineColor = lineColor,
10    lineWidths = listOf(WidthByZoom(10.0)),
11    outlineColor = outlineColor,
12    outlineWidths = listOf(WidthByZoom(1.0)),
13    lineStartCapType = CapType.INVERSE_DIAMOND,
14    lineEndCapType = CapType.DIAMOND
15)
16val polyline = tomTomMap.addPolyline(polylineOptions)

To display a polyline on the map, use TomTomMap.addPolyline(PolylineOptions) method with PolylineOptions describing desired polyline properties. Use the returned Polyline object to modify its properties or remove it from the map. If you want to remove all polylines from the map use the TomTomMap.removePolylines() method.

tomTomMap.removePolylines()

Use the OnPolylineClickListener to listen for click events performed on any Polyline added to the map. Add the listener to the TomTomMap object. Then whenever a Polyline is clicked, the OnPolylineClickListener.onPolylineClicked(Polyline) method is called with that specific Polyline instance as a parameter.

1val onPolylineClickListener =
2    OnPolylineClickListener { polyline: Polyline -> /* YOUR CODE GOES HERE */ }
3tomTomMap.addOnPolylineClickListener(onPolylineClickListener)

Remove a previously set listener by calling the TomTom.removeOnPolylineClickListener(OnPolylineClickListener) with the listener instance as a parameter.

tomTomMap.removeOnPolylineClickListener(onPolylineClickListener)

Removing overlays

Remove all the shapes added to the map with the TomTomMap.removeAllShapes() method.

tomTomMap.removeAllShapes()

Next steps

Since you have learned how to draw different shapes on the map, here are the recommended next steps:

• Add a marker
• Route planning
• Working with traffic