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

Shapes

Shapes

Allow your users to draw shapes like circles, polygons, and polylines on your map to mark different areas on the map.

Sample use case: You are developing an app for a delivery company and need to illustrate ranges of the transportation area around different cities. What you need to do is render circles around cities with radiuses indicating zones of deliveries. The details on the example implementation of shapes rendering follows.

The TomtomMap supports several shape overlays which can be easily created by using corresponding overlay builders. These are:

  • PolygonBuilder

  • PolylineBuilder

  • CircleBuilder

Shape overlays are immutable. That is, once they have been created their shape cannot be changed. Visibility and color can be changed. If you want to change a shape, you must remove the existing shape and replace it with a new one. It is the responsibility of the framework user to take care of performance and the number of shapes in use. You should use as few shapes as possible, and hide or dispose of the ones that are not being displayed.

To create shape overlays:

_

Polygon polygon = PolygonBuilder.create()
        .coordinates(coordinates)
        .color(color)
        .build();

tomtomMap.getOverlaySettings().addOverlay(polygon);
val polygon = PolygonBuilder.create()
        .coordinates(coordinates)
        .color(color)
        .build()

tomtomMap.overlaySettings.addOverlay(polygon)

 

_

Polyline polyline = PolylineBuilder.create()
        .coordinates(coordinates)
        .color(color)
        .build();

tomtomMap.getOverlaySettings().addOverlay(polyline);
val polyline = PolylineBuilder.create()
        .coordinates(coordinates)
        .color(color)
        .build()

tomtomMap.overlaySettings.addOverlay(polyline)

 

_

Circle circle = CircleBuilder.create()
        .fill(true)
        .radius(radiusM)
        .position(position)
        .color(color)
        .build();

tomtomMap.getOverlaySettings().addOverlay(circle);
val circle = CircleBuilder.create()
        .fill(true)
        .radius(CIRCLE_RADIUS_IN_METERS)
        .position(position)
        .color(color)
        .build()

tomtomMap.overlaySettings.addOverlay(circle)

 

To register click events:

_

tomtomMap.addOnCircleClickListener(onCircleClickListener);
tomtomMap.addOnPolygonClickListener(onPolygonClickListener);
tomtomMap.addOnPolylineClickListener(onPolylineClickListener);
tomtomMap.addOnCircleClickListener { infoTextView.displayAsToast(getString(R.string.toast_circle_clicked)) }
tomtomMap.addOnPolygonClickListener { infoTextView.displayAsToast(getString(R.string.toast_polygon_clicked)) }
tomtomMap.addOnPolylineClickListener { infoTextView.displayAsToast(getString(R.string.toast_polyline_clicked)) }

 

To unregister click events:

_

tomtomMap.removeOnCircleClickListeners();
tomtomMap.removeOnPolygonClickListeners();
tomtomMap.removeOnPolylineClickListeners();
tomtomMap.removeOnCircleClickListeners()
tomtomMap.removeOnPolygonClickListeners()
tomtomMap.removeOnPolylineClickListeners()

 

image

Polygon overlay

image

Polyline overlay

image

Circle overlay