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 GeoCoordinate(52.367956, 4.897070),5 radius = 3000.0,6 radiusUnit = RadiusUnit.METERS,7 fillColor = fillColor,8 outlineColor = outlineColor,9 outlineRadius = 100.010)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 GeoCoordinate
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.
1val fillColor = Color(0.0F, 0.0F, 1.0F, 0.5F)2val polygonOptions = PolygonOptions(3 listOf(4 GeoCoordinate(latitude = 52.33744437330409, longitude = 4.84036333215833),5 GeoCoordinate(latitude = 52.3374581784774, longitude = 4.88185047814447),6 GeoCoordinate(latitude = 52.32935816673911, longitude = 4.910078096170823),7 GeoCoordinate(latitude = 52.381705486736315, longitude = 4.893630047460435),8 GeoCoordinate(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.
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 CapType
s.
1val lineColor = Color(0.2f, 0.6f, 1.0f)2val outlineColor = Color(0f, 0.3f, 0.5f)3val polylineOptions = PolylineOptions(4 listOf(5 GeoCoordinate(latitude = 52.33744437330409, longitude = 4.84036333215833),6 GeoCoordinate(latitude = 52.3374581784774, longitude = 4.88185047814447),7 GeoCoordinate(latitude = 52.32935816673911, longitude = 4.910078096170823),8 ),9 lineColor = lineColor,10 lineWidth = 10.0,11 outlineColor = outlineColor,12 outlineWidth = 1.0,13 lineStartCapType = CapType.INVERSE_DIAMOND,14 lineEndCapType = CapType.DIAMOND15)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()