# Marker Layer

You can add single point features - including arbitrary widgets - to maps using `MarkerLayer` and `Marker`s.

{% hint style="success" %}
No more image only markers! [Unlike *other* ](https://github.com/flutter/flutter/issues/24213)😉[^1][ popular mapping libraries](https://github.com/flutter/flutter/issues/24213), we allow usage of any widget as the marker.
{% endhint %}

<div data-full-width="true"><figure><img src="https://852902308-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSFuYRJZsfLx0EidjdMud%2Fuploads%2FbAf2OvB3xZmDlW0ml8pY%2FMarker%20Demo.png?alt=media&#x26;token=3a28caac-2b65-44f8-87e0-a51cbe1c296b" alt=""><figcaption><p>A variety of <code>Marker</code>s on a rotated map</p></figcaption></figure></div>

{% embed url="<https://pub.dev/documentation/flutter_map/latest/flutter_map/MarkerLayer-class.html>" %}

{% embed url="<https://pub.dev/documentation/flutter_map/latest/flutter_map/Marker-class.html>" %}

```dart
MarkerLayer(
  markers: [
    Marker(
      point: LatLng(30, 40),
      width: 80,
      height: 80,
      child: FlutterLogo(),
    ),
  ],
),
```

{% hint style="warning" %}
Excessive use of markers may create performance issues.

Consider using a clustering plugin to merge nearby markers together, reducing the work that needs to be done when rendering: [#marker-clustering](https://docs.fleaflet.dev/plugins/list#marker-clustering "mention").
{% endhint %}

## Alignment

The marker widget will be centered over the geographic coordinate by default. However, this can be changed with the `alignment` argument, which aligns the widget relative to the point.

The center of rotation when `rotate` is `true` will be the point.

The default alignment for all `Marker`s within a `MarkerLayer` can be set by changing the same property on the `MarkerLayer`.

## Rotation

It is possible to enable the `Marker` to automatically counter-rotate to the camera's rotation, to ensure it remains facing upwards, via the `rotate` argument.

The default alignment for all `Marker`s within a `MarkerLayer` can be set by changing the same property on the `MarkerLayer`.

{% hint style="info" %}
There is no built-in support to rotate markers to a specific degree. However, this is easy to implement through a rotating widget, such as `Transform.rotate`.
{% endhint %}

## Handling Gestures

There is no built-in support to handle gestures on `Marker`s, such as taps. However, this is easy to implement using a standard `GestureDetector`.

[^1]: [Google Maps \*wink \*wink](https://github.com/flutter/flutter/issues/24213)