flutter_map Docs
Project Links💝 Support Us
v5
v5
  • flutter_map
  • How Does It Work?
    • Raster vs Vector Tiles
  • Supporters
  • Getting Started
    • Installation
    • Quickstart
    • Examples
    • Migrating To v5
  • Usage
    • Base Widget
    • Options
    • Layers
    • Controller
    • Event Handling
    • Full API Reference
  • Layers
    • Tile Layer
      • Tile Providers
    • Marker Layer
    • Polygon Layer
    • Polyline Layer
    • Circle Layer
    • Overlay Image Layer
    • Attribution Layer
    • WMS Usage
  • Plugins
    • Plugins List
    • Making A Plugin
      • Creating New Tile Providers
      • Creating New Layers
  • Tile Servers
    • Using Mapbox
    • Using Thunderforest
    • Using Stadia Maps
    • Offline Mapping
    • Other Options
  • Frequently Asked Questions
  • Contributing
  • Credits
Powered by GitBook

© flutter_map Authors & Maintainers

On this page

Was this helpful?

Export as PDF
  1. Usage

Layers

PreviousOptionsNextController

Last updated 1 year ago

Was this helpful?

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) to shapes on top of them (Polygon Layer), and even just your own custom layers (Creating New Layers).

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.

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.

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 AttributionLayers.

Do not use nonRotatedChildren to enforce a non-rotatable map/TileLayer.

Instead, use interactiveFlags: . These apply to the entire map and all layers.

Layers
Permanent Rules
Example FlutterMap, containing a Marker, Polyline, Polygon, and RichAttributionLayer on top of a TileLayer
Example Flutter Map widget, showing an OpenStreetMap map, with multiple shapes overlaid on it