Skip to content

Draw and Fly To Polyline

In this guide you will learn how to render an interactive map, draw a polyline on the map, and fly to the location of the polyline.

Setup

First, get an API key token, see the Getting Started guide.

Download the Maps & Navigation SDK for Android archive file

Download the DrawPolyline project archive file or clone the project with Git

See the Configure Android Example guide.

Run the example

In Android Studio, from the File menu, select Sync Project with Gradle Files

An android device should be connected via USB cable.
Press SHIFT+F10 to compile, install and run the example on the android device.

Android example screenshot

Android example screenshot

The example draws a polyline on the map and flies to it.
Displays an interactive map which is fully 3D, supporting pan, pinch-zoom, rotate and tilt.

How it works

Android example screenshot

You can open the MainActivity.kt file to see how the polyline is drawn on the map.

 1// Kotlin code
 2private fun flyToPolyline() {
 3  SdkCall.execute {
 4  /*
 5  Make a VectorDataSource and a VectorItem that will be stored in it.
 6  You can create multiple vector items that can be added in the same data source.
 7  */
 8    val vectorDataSource =
 9      MarkerCollection(EMarkerType.Polyline.value, "My polylines data source")
10    val marker = Marker()
11
12    // Add the necessary coordinates to the vector item.
13    marker.add(Coordinates(52.360234, 4.886782))
14    marker.add(Coordinates(52.360495, 4.886266))
15    marker.add(Coordinates(52.360854, 4.885539))
16    marker.add(Coordinates(52.361184, 4.884849))
17    marker.add(Coordinates(52.361439, 4.884344))
18    marker.add(Coordinates(52.361593, 4.883986))
19
20    // Add the vector item to the vector data source.
21    vectorDataSource.add(marker)
22
23    // Make a list of settings that will decide how each data source will be displayed on the map.
24    val settings = MarkerCollectionDisplaySettings()
25    settings.setImage(Image())
26
27    // Add the vector data source to the desired map view so it can be displayed.
28    mainMapView?.preferences()?.markers()?.add(vectorDataSource, settings)
29
30    val area = vectorDataSource.getArea()
31    if (area != null) {
32      val animation = Animation()
33      animation.setType(EAnimation.Fly)
34
35      // Center the map on a specific area using the provided animation.
36      mainMapView?.centerOnArea(area, -1, Xy(), animation)
37    }
38  }
39}

In the flyToPolyline() function a MarkerCollection is created. Coordinates for the polyline perimeter are added to a Marker, which is then added to the MarkerCollection instance.

This is then added to the map. Then the bounding box area of the polyline is obtained using the getArea() function.

Finally, centerOnArea() flies the camera to the bounding box containing the polyline, such that the entire polyline fits in the viewport.

Android Examples

Maps SDK for Android Examples can be downloaded or cloned with Git