> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/ja/flutter/maps/llms.txt)

# Annotations

Add annotations to the map using point, line, polygon, and circle shapes using the [`AnnotationManager`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/AnnotationManager-class.html) with the Mapbox Maps SDK for Flutter. Create annotation managers based on the type of annotation that you're interested in. Every `AnnotationManager` 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`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/PointAnnotation-class.html) can display any image at a fixed geographic coordinate.

Annotations are added after the initial map is loaded by using the [`onMapCreated`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/MapWidget/onMapCreated.html) 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):

```dart
import 'dart:typed_data';
import 'package:flutter/services.dart';
import 'package:flutter/material.dart';
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatefulWidget {
const MyApp({super.key});

@override
State createState() => MyAppState();
// This widget is the root of your application.
}

class MyAppState extends State<MyApp> {
late MapboxMap mapboxMap;
PointAnnotationManager? pointAnnotationManager;

@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);
}

@override
Widget build(BuildContext context) {
  WidgetsFlutterBinding.ensureInitialized();

  // Pass your access token to MapboxOptions so you can load a map
  String ACCESS_TOKEN = const String.fromEnvironment("ACCESS_TOKEN");
  MapboxOptions.setAccessToken(ACCESS_TOKEN);

  // Define options for your camera
  CameraOptions camera = CameraOptions(
      center: Point(coordinates: Position(-74.00913, 40.75183)),
      zoom: 9.6,
      bearing: 0,
      pitch: 30);

  return MaterialApp(
    title: 'Flutter Demo',
    home: MapWidget(
      cameraOptions: camera,
      onMapCreated: _onMapCreated,
    ),
  );
}
}
```

![Point annotation on an iOS device](https://docs.mapbox.com/ja/assets/ideal-img/maps-guides-markers-annotation.ca24526.480.png)

## Other shapes

The Mapbox Maps SDK for Flutter supports putting other shapes on the map including circles using [`CircleAnnotationManager`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/CircleAnnotationManager-class.html), polylines using [`PolylineAnnotationManager`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/PolylineAnnotationManager-class.html), and polygons using [`PolygonAnnotationManager`](https://docs.mapbox.com/flutter/maps/api/latest/mapbox_maps_flutter/PolygonAnnotationManager-class.html). 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.

> **Related content (example): [Add circle annotations to the map](https://docs.mapbox.com/flutter/maps/examples/circle_annotations/)**
> 
> This example shows how to add circle annotations to a map, by placing visual indicators that mark a specific location.

> **Note: Examples App on GitHub**
> 
> You can explore more full-featured annotations examples in the Maps SDK for Flutter Examples App on [GitHub](https://github.com/mapbox/mapbox-maps-flutter/tree/main/example).