Annotation

This example demonstrates how to use annotation plugin to show icon on the map.

You will learn the following:

• How to install MapLibre Annotation Plugin for Android
• How to initialize the plugin
• How to draw icon on the map.

View complete source code on GitHub

The Annotation Plugin for Android simplifies the way to set and adjust the visual properties of annotations on a Mapbox map. The Mapbox Maps SDK for Android provides you with fine-grained control over the appearance and location of map annotations.

In this context, “annotations” means circles, polygons, lines, text, and icons. Using runtime styling and data-driven styling to create annotations can require a deep understanding of the SDK. This plugin obfuscates much of the required boilerplate code.

Note: A SymbolLayer is the style layer that is responsible for both map text and icons.

Install the Annotation Plugin

To start developing an application using the Annotation Plugin, you’ll need to add the appropriate dependencies inside of your build.gradle.

1. Start Android Studio.
2. Open up your project’s build.gradle.
3. Make sure that your project’s minSdkVersion is API 14 or higher.
4. Under dependencies, add a new build rule for the latest android-plugin-annotation-v9.
5. Click the Sync Project with Gradle Files near the toolbar in Studio.

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.maplibre.gl:android-plugin-annotation-v9:1.0.0'
}

Add icon to the style

In order to be able draw the icon on the map, we need to load the icon from android drawable and add it to the style. We will use BitmapUtils utility class for these purposes.

private fun addAirplaneImageToStyle(style: Style) {
        style.addImage(
            "airport",
            BitmapUtils.getBitmapFromDrawable(resources.getDrawable(R.drawable.ic_airplanemode_active_black_24dp))!!,
            true
        )
    }

Initialize the plugin and add icon to the map

The plugin includes manager classes for the various map layers available in the SDK. The manager classes are explained below and their constructors only require a MapboxMap object. You should initialize a manager class when the map is ready and the style has been loaded. So firstly we initialize the mapView in onViewCreated method.

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val mapTilerKey = Helper.getMapTilerKey(context!!)
        Helper.validateKey(mapTilerKey)
        val styleUrl = "https://api.maptiler.com/maps/streets-v2/style.json?key=${mapTilerKey}";

        // Create map view
        mapView = view.findViewById(R.id.annotationMapView)
        mapView?.onCreate(savedInstanceState)
        mapView?.getMapAsync { map ->

            // Navigate the map to the area with icon
            map.cameraPosition = CameraPosition.Builder()
                .target(LatLng(6.687337, 0.381457))
                .zoom(11.0)
                .build()

            // Load the style and add icon after style has been loaded
            map.setStyle(styleUrl) {
                addSymbolAnnotation(mapView!!, map, it)
            }
        }
    }

The plugin is initialized in addSymbolAnnotationMethod where we create SymbolManagerand use it to create SymbolOptions instance and the symbol (icon) itself.

private fun addSymbolAnnotation(mapView: MapView, mapboxMap: MapboxMap, style: Style) {

        // Add icon to the style
        addAirplaneImageToStyle(style);

        // Create a SymbolManager.
        val symbolManager = SymbolManager(mapView, mapboxMap, style)

        // Set non-data-driven properties.
        symbolManager.iconAllowOverlap = true
        symbolManager.iconIgnorePlacement = true

        // Create a symbol at the specified location.
        val symbolOptions = SymbolOptions()
            .withLatLng(LatLng(6.687337, 0.381457))
            .withIconImage("airport")
            .withIconSize(1.3f)

        // Use the manager to draw the annotations.
        symbolManager.create(symbolOptions)
    }