Show EV reachable range

Range visualization can be used to visualize a reachable range for electric vehicles (EVs) as well as combustion vehicles.

Before you start check Calculating a reachable range guide.

Project setup

Add the dependency to your project’s build.gradle file:

1
implementation "com.tomtom.sdk.maps.visualization:range:1.26.4"

Initializing the Range Visualization module

Use the RangeVisualizationFactory method to create the rangevisualization object. It takes two arguments:

tomTomMap: a TomTomMap object.
defaultRangeStyle: A default RangeStyle that will be used for stylization of the range circles primitives

1
rangeVisualization =
2
    RangeVisualizationFactory.create(tomTomMap, defaultRangeStyle)

Displaying a reachable range

There are two ways to visualize a range on the map: . Circle - used to display a range as a reachable radius . Polygon - used to display a more detailed range

To display a reachable range, a Range object must be created and passed to the display method of RangeVisualization . Choose between two types of Range objects: NamedPolygons and NamedCircles

1
val circle1 = NamedCircle(name1, origin1, radius1)
2
val circle2 = NamedCircle(name2, origin2, radius2)
3
val circleRange = Range.NamedCircles(listOf(circle1, circle2))
4
rangeVisualization.display(circleRange)

1
val polygon1 = calculateRangeResponse.boundaries[Budget.Energy(Energy.kilowattHours(5))]
2
val polygon2 = calculateRangeResponse.boundaries[Budget.Energy(Energy.kilowattHours(10))]
3
when {
4
    polygon1 is RangeBoundary.Polygon && polygon2 is RangeBoundary.Polygon -> {
5
        val namedPolygon1 = NamedPolygon(name1, boundary = polygon1.points)
6
        val namedPolygon2 = NamedPolygon(name2, boundary = polygon2.points)
7
        val polygonRange = Range.NamedPolygons(listOf(namedPolygon1, namedPolygon2))
8
        rangeVisualization.display(polygonRange)
9
    }
10
}

ev range

Clearing the range

The range currently being visualized on the map can be cleared using the clear method of RangeVisualization:

1
rangeVisualization.clear()

Learn more

Since you have learned how to display Reachable range, here are recommendations for the next steps: