Skip to content

Marker Annotations

Markers are a way to show data on the map with labels and/or icons.

Markers

Basic Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
late final MapController _controller;

@override
Widget build(BuildContext context) {
  return MapLibreMap(
    options: MapOptions(center: Geographic(lon: 9.17, lat: 47.68)),
    onEvent: (event) async {
      switch (event) {
        case MapEventMapCreated():
          _controller = event.mapController;
        case MapEventStyleLoaded():
          // add marker image to map
          final response =
          await http.get(Uri.parse(LayersSymbolPage.imageUrl));
          final bytes = response.bodyBytes;
          await _controller.addImage('marker', bytes);
        case MapEventClick():
        // add a new marker on click
          setState(() {
            _points.add(Point(event.point));
          });
        default:
        // ignore all other events
          break;
      }
    },
    layers: [
      MarkerLayer(
        points: <Point>[
          Point(Geographic(lon: 9.17, lat: 47.68)),
          Point(Geographic(lon: 9.17, lat: 48)),
          Point(Geographic(lon: 9, lat: 48)),
          Point(Geographic(lon: 9.5, lat: 48)),
        ],
        textField: 'Marker',
        textAllowOverlap: true,
        iconImage: 'marker',
        iconSize: 0.08,
        iconAnchor: IconAnchor.bottom,
        textOffset: const [0, 1],
      ),
    ],
  );
}

That's it! You can add multiple MarkerLayers with different properties.

Update

To add, remove or alter annotation layers, just use setState() like you'd do with Flutter widgets.

Check out the example app if you want to see how things come together.

Style & Layout

The MarkerLayer has a lot of parameters you can use for styling.

If you need more powerful customizations for your Markers, you can use the more low level SymbolLayer.