Skip to main content

Annotations

Add annotations to the map using point, line, polygon, and circle shapes using MapboxMap’s AnnotationManager. Create annotation managers based on the type of annotation that you're interested in. Every annotation manager handles a collection of annotations. Once a manager has been created, you can create and add individually styled instances of the corresponding annotation type.

Benefits:

  • Built-in interaction support like tapping on annotations.
  • No external data file necessary.
  • Every annotation can be individually styled.
  • Every annotation layer can be adjusted to be above or below another layer.
  • Same performance benefits as using style layers.

Limitations:

  • No default image available.
  • Inefficient for adding many features to the map.

Markers

A PointAnnotation can display custom marker images at a developer-specified geographic coordinate.

// Initialize a 5 point annotations using custom icons
mapboxMap.annotations.createPointAnnotationManager().then((pointAnnotationManager) async {
final ByteData bytes =
await rootBundle.load('assets/symbols/custom-icon.png');
final Uint8List list = bytes.buffer.asUint8List();
var options = <PointAnnotationOptions>[];
for (var i = 0; i < 5; i++) {
options.add(PointAnnotationOptions(
geometry: createRandomPoint().toJson(), image: list));
}
pointAnnotationManager?.createMulti(options);
});

Other shapes

MapboxMap supports putting other shapes on the map including circles using CircleAnnotationManager, polylines using PolylineAnnotationManager, and polygons using PolygonAnnotationManager. These annotations work like the point annotations described above, but do not require an image. The options available for each type of annotation varies and you can find a full list in the API reference documentation.

Was this page helpful?