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 e.g. to render circles round cities with radiuses indicating zones of deliveries. The details on the example implementation of shapes rendering are described below.

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
about performance and number of shapes in use. You should use as few shapes as
possible, and hide or dispose the ones that are not being displayed.

To create shape overlays:

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

 

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

 

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

 

To register for click events:

tomtomMap.addOnCircleClickListener(onCircleClickListener);
tomtomMap.addOnPolygonClickListener(onPolygonClickListener);
tomtomMap.addOnPolylineClickListener(onPolylineClickListener);

 

To unregister from click events:

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

 



image

Polygon overlay

image

Polyline overlay

image

Circle overlay