Marker Collection Display Icon

In this guide you will learn how to show locations, or POIs (points of interest) on a map using an icon image, and optionally draw a polyline connecting the POIs.

Setup

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

Download the Maps & Navigation SDK for Android archive file

Download the MarkerCollectionDisplayIcon 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.

How it works

You can open the MainActivity.kt file to see how rendering icons on a map to indicate POIs works.

private fun getBitmap(drawableRes: Int): Bitmap? {
     val drawable = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
         ResourcesCompat.getDrawable(resources, drawableRes, theme)
     } else {
         ContextCompat.getDrawable(this, drawableRes)
     }
     drawable ?: return null
     val canvas = Canvas()
     val bitmap = Bitmap.createBitmap(
         drawable.intrinsicWidth,
         drawable.intrinsicHeight,
         Bitmap.Config.ARGB_8888
     )
     canvas.setBitmap(bitmap)
     drawable.setBounds(0, 0, drawable.intrinsicWidth, drawable.intrinsicHeight)
     drawable.draw(canvas)
     return bitmap
}

The icon bitmap image is obtained from the resources included with the project, located in res/drawable, and specified using an int id, as this project includes more than one bitmap image.

private fun toPngByteArray(bmp: Bitmap): ByteArray {
     val stream = ByteArrayOutputStream()
     bmp.compress(Bitmap.CompressFormat.PNG, 100, stream)
     val byteArray: ByteArray = stream.toByteArray()
     bmp.recycle()
     return byteArray
}

This function is used to convert the image to a PNG bytearray, as PNG images are lossless, like bitmaps, but are also compressed.

override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     binding = ActivityMainBinding.inflate(layoutInflater)
     setContentView(binding.root)
     val mapSurface = binding.gemSurface
     mapSurface.onDefaultMapViewCreated = { mapView ->
         val predefinedPlaces = arrayListOf(
             Pair("Subway", Coordinates(45.75242654325917, 4.828547972110576)),
             Pair("McDonald's", Coordinates(45.75291679094701, 4.828855627148713)),
             Pair("Two Amigos", Coordinates(45.75295718457783, 4.828377481057234)),
             Pair("Le Jardin de Chine", Coordinates(45.75272771410631, 4.828376649181688)),
         )
         /* Image and text */
         val imageTextsCollection = MarkerCollection(EMarkerType.Point, "Restaurants Nearby")
         for (place in predefinedPlaces) {
             Marker().apply {
                 setCoordinates(arrayListOf(place.second))
                 name = place.first
                 imageTextsCollection.add(this)
             }
         }
         val image = getBitmap(R.drawable.ic_restaurant_foreground)?.let {
             Image.produceWithDataBuffer(DataBuffer(toPngByteArray(it)), EImageFileFormat.Png)
         }
         val imageTextsSettings = MarkerCollectionRenderSettings(image)
         imageTextsSettings.labelTextSize = 2.0 //mm
         imageTextsSettings.labelingMode = EMarkerLabelingMode.Item
         mapView.preferences?.markers?.add(imageTextsCollection, imageTextsSettings)
         /* Polyline */
         val polylineCollection = MarkerCollection(EMarkerType.Polyline, "Polyline")
         Marker().apply {
             for (place in predefinedPlaces)
                 add(place.second)
             polylineCollection.add(this)
         }
         val polylineSettings = MarkerCollectionRenderSettings(polylineInnerColor = Rgba.blue())
         polylineSettings.polylineInnerSize = 1.5 //mm
         mapView.preferences?.markers?.add(polylineCollection, polylineSettings)
         /* Center map on result */
         mapView.centerOnCoordinates(predefinedPlaces[0].second, 80)
     }
     if (!Util.isInternetConnected(this)) {
         Toast.makeText(this, "You must be connected to internet!", Toast.LENGTH_LONG).show()
     }
}

The MainActivity overrides the onCreate() function which checks that internet access is available, and then, when the map is instantiated, defines an array containing 4 POI (points of interest - restaurants in this case) coordinate pairs - name, latitude, longitude:

mapSurface.onDefaultMapViewCreated = { mapView ->

val predefinedPlaces = arrayListOf(

Next, the icon image is added to the name and coordinates of each POI:

val imageTextsCollection = MarkerCollection(EMarkerType.Point, "Restaurants Nearby")

for (place in predefinedPlaces) {

Next, a polyline is added, connecting the restaurants with a path going linearly through each, once:

val polylineCollection = MarkerCollection(EMarkerType.Polyline, "Polyline")

Marker().apply {

for (place in predefinedPlaces)

The color and width of the polyline are set:

val polylineSettings = MarkerCollectionRenderSettings(polylineInnerColor = Rgba.blue())

polylineSettings.polylineInnerSize = 1.5 //mm

The map is then centered on the first POI in the list (index 0):

mapView.centerOnCoordinates(predefinedPlaces[0].second, 80)

As the other POIs are nearby, they are all in view.

Android Examples

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