Skip to main content

Annotations

Additional Developer Resources

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 any image at a fixed geographic coordinate.

Annotations are added after the initial map is loaded by using the onMapCreated callback. This example loads assets/custom-icon.png and adds it to the map at the coordinates -74.00913, 40.75183 (near New York City):

main.dart
 
  @override
 
  _onMapCreated(MapboxMap mapboxMap) async {
 
    this.mapboxMap = mapboxMap;
 
    pointAnnotationManager =
 
        await mapboxMap.annotations.createPointAnnotationManager();
 

 
    // Load the image from assets
 
    final ByteData bytes =
 
        await rootBundle.load('assets/custom-icon.png');
 
    final Uint8List imageData = bytes.buffer.asUint8List();
 

 
    // Create a PointAnnotationOptions
 
    PointAnnotationOptions pointAnnotationOptions = PointAnnotationOptions(
 
      geometry: Point(coordinates: Position(-74.00913, 40.75183)), // Example coordinates
 
      image: imageData,
 
      iconSize: 3.0
 
    );
 

 
    // Add the annotation to the map
 
    pointAnnotationManager?.create(pointAnnotationOptions);
 
  }

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.

Examples App on GitHub

You can explore more full-featured annotations examples in the Maps SDK for Flutter Examples App on GitHub.

Additional Developer Resources
Was this page helpful?