# Layers

To display anything on the map, you'll need to include at least one "layer"!

Multiple layers can be used - similar to a `Stack` - each one showing different data in different ways, from actual map tiles ([tile-layer](https://docs.fleaflet.dev/v5/layers/tile-layer "mention")) to shapes on top of them ([polygon-layer](https://docs.fleaflet.dev/v5/layers/polygon-layer "mention")), and even just your own custom layers ([creating-new-layers](https://docs.fleaflet.dev/v5/plugins/making-a-plugin/creating-new-layers "mention")).

{% content-ref url="../layers" %}
[layers](https://docs.fleaflet.dev/v5/layers)
{% endcontent-ref %}

<figure><img src="https://3763054464-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEu7Wsb5fFesagMRRFtta%2Fuploads%2FoKy1tAxHqFujt8ZabAxm%2FExampleMap.png?alt=media&#x26;token=606a9cda-5515-4566-8e76-abfab303b9b1" alt="Example Flutter Map widget, showing an OpenStreetMap map, with multiple shapes overlaid on it"><figcaption><p>Example <code>FlutterMap</code>, containing a <code>Marker</code>, <code>Polyline</code>, <code>Polygon</code>, and <code>RichAttributionLayer</code> on top of a <code>TileLayer</code></p></figcaption></figure>

Each layer has its own configuration and handling, but can also access the map's state/configuration, as well as be controlled by it.

Layers are usually defined in the `children` property of the `FlutterMap` - as is with the `TileLayer`, for example.&#x20;

{% hint style="info" %}
Gesture handling is handled by the `children` in reverse order. The topmost/last layer will absorb (and optionally use) all gestures on the map. Therefore, there can only be one interactive layer.

It is recommended to place the `TileLayer` first/bottom, the interactive layer (if any) last/top, and other layers in between.

If the interactive layer is not the topmost layer, you must allow gestures to work their way down to it through all the layers above. To do this, wrap all these layers in `IgnorePointer` widgets, to prevent the layer from receiving/absorbing gestures.

Note that this does not apply to the map as a whole. The map will receive raw gestures, and manipulate the `children` via the map's state. Thus, individual layers may react to processed gestures from the state - in this way, they do not react to the incoming gestures themselves. This is why placing layers above the `TileLayer` does not impact its ability to respond to gestures.
{% endhint %}

However, the `nonRotatedChildren` property can be used for layers which shouldn't move with the map, but still require access to the map's state/configuration - for example, the `AttributionLayer`s.

{% hint style="warning" %}
Do not use `nonRotatedChildren` to enforce a non-rotatable map/`TileLayer`.

Instead, use `interactiveFlags`: [#permanent-rules](https://docs.fleaflet.dev/v5/options#permanent-rules "mention"). These apply to the entire map and all layers.
{% endhint %}