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.

Close-up polyline

Zoomed out polyline

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.

In the flyToPolyline() function:

• A MarkerCollection instance is created.
• A Markerpopulated with the coordinate pairs defining the polyline's perimeter is added to that collection.
• The collection is rendered on the map via MarkerCollectionRenderSettings.
• The collection’s bounding box is retrieved (markerCollection.area).
• If the bounding box is non-null, it is passed to mapView.centerOnArea(), which animates the camera to frame the entire polyline within the viewport.

MainActivity.kt

private fun flyToPolyline() = SdkCall.execute {
    gemSurfaceView.mapView?.let { mapView ->
        /* 
        Make a MarkerCollection and a Marker item that will be stored in the collection.
        You can create multiple Marker items that can be added in the same collection.
         */
        val markerCollection = MarkerCollection(EMarkerType.Polyline, "My marker collection")
        
        // Define a market item and add the necessary coordinates to it.
        val marker = Marker().apply {
            add(52.360234, 4.886782)
            add(52.360495, 4.886266)
            add(52.360854, 4.885539)
            add(52.361184, 4.884849)
            add(52.361439, 4.884344)
            add(52.361593, 4.883986)
        }
        
        // Add the marker item to the collection.
        markerCollection.add(marker)
        
        // Make a list of settings that will decide how each marker collection will be displayed on the map.
        val settings = MarkerCollectionRenderSettings(
            polylineInnerColor = Rgba.magenta(),
            polylineOuterColor = Rgba.black()
        ).apply {
            polylineInnerSize = 1.25
            polylineOuterSize = 0.75
        }
        
        // Add the collection to the desired map view so it can be displayed.
        mapView.preferences?.markers?.add(markerCollection, settings)
        
        // Center the map on this marker collection's area.
        markerCollection.area?.let { mapView.centerOnArea(it) }
    }
}

MainActivity overrides onCreate() which checks that internet access is available, and when the map is initialized, calls the flyToPolyline() function.

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) 
{
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    gemSurfaceView = findViewById(R.id.gem_surface)

    EspressoIdlingResource.increment()
    SdkSettings.onMapDataReady = onMapDataReady@{ isReady ->
        if (!isReady) return@onMapDataReady

        // Defines an action that should be done when the map is ready.
        flyToPolyline()
        lifecycleScope.launch {
            delay(3000)
            EspressoIdlingResource.decrement()
        }
    }

    SdkSettings.onApiTokenRejected = {/* 
        The TOKEN you provided in the AndroidManifest.xml file was rejected.
        Make sure you provide the correct value, or if you don't have a TOKEN,
        check the magiclane.com website, sign up/sign in and generate one. 
         */
        showDialog("TOKEN REJECTED")
    }

    if (!Util.isInternetConnected(this))
    {
        showDialog("You must be connected to the internet!")
    }

    onBackPressedDispatcher.addCallback(this){
        finish()
        exitProcess(0)
    }
}