MapLibreParticleLab/platform/android/docs/annotations/marker-annotations.md

Annotation: Marker

This guide will show you how to add Markers in the map.

Annotation is an overlay on top of a Map. In package org.maplibre.android.annotations, it has the following subclasses:

1. Marker
2. Polyline
3. Polygon

A Marker shows an icon image at a geographical location. By default, marker uses a provided image as its icon.

Or, the icon can be customized using IconFactory to generate an Icon using a provided image.

For more customization, please read the documentation about MarkerOptions.

In this showcase, we continue the code from the Quickstart, rename Activity into JsonApiActivity, and pull the GeoJSON data from a free and public API. Then add markers to the map with GeoJSON:

1. In your module Gradle file (usually <project>/<app-module>/build.gradle), add okhttp to simplify code for making HTTP requests.

dependencies {
    ...
    implementation 'com.squareup.okhttp3:okhttp:4.10.0'
    ...
}

2. Sync your Android project the with Gradle files.

3. In JsonApiActivity we add a new variable for MapLibreMap. It is used to add annotations to the map instance.

--8<-- "MapLibreAndroidTestApp/src/main/java/org/maplibre/android/testapp/activity/annotation/JsonApiActivity.kt:top"

4. Call mapview.getMapSync() in order to get a MapLibreMap object. After maplibreMap is assigned, call the getEarthQuakeDataFromUSGS() method to make a HTTP request and transform data into the map annotations.

--8<-- "MapLibreAndroidTestApp/src/main/java/org/maplibre/android/testapp/activity/annotation/JsonApiActivity.kt:mapAsync"

5. Define a function getEarthQuakeDataFromUSGS() to fetch GeoJSON data from a public API. If we successfully get the response, call addMarkersToMap() on the UI thread.

--8<-- "MapLibreAndroidTestApp/src/main/java/org/maplibre/android/testapp/activity/annotation/JsonApiActivity.kt:getEarthquakes"

6. Now it is time to add markers into the map.
   • In the addMarkersToMap() method, we define two types of bitmap for the marker icon.
   • For each feature in the GeoJSON, add a marker with a snippet about earthquake details.
   • If the magnitude of an earthquake is bigger than 6.0, we use the red icon. Otherwise, we use the blue one.
   • Finally, move the camera to the bounds of the newly added markers

--8<-- "MapLibreAndroidTestApp/src/main/java/org/maplibre/android/testapp/activity/annotation/JsonApiActivity.kt:addMarkers"

7. Here is the final result. For the full contents of JsonApiActivity, please visit source code of our Test App.