arrow-left
All pages
gitbookPowered by GitBook
1 of 3

Loading...

Loading...

Loading...

Recommended Options

hashtag
Center (center)

Takes a LatLng object, specifying the latitude and longitude of the center of the map when it is first built. For example:

will put the map at 'Null Islandarrow-up-right' on first build, where the Prime Meridian and Equator intersect at 0 deg Latitude and 0 deg Longitude.

Defaults to LatLng(50.5, 30.51).

hashtag
Zooms (zoom, minZoom, maxZoom)

Takes doubles, but should usually be set initially to integers (in double format).

For an explanation of zoom levels, see the page.

zoom specifies what the zoom level of the map should be when it is first built, defaulting to level 13. maxZoom specifies what the maximum zoom level can be, and should depend on your use case and/or tile server. minZoom specifies what the minimum zoom level can be, and should usually be set to 0/null default.

circle-exclamation

Note that many tile servers will not support past a zoom level of 18. Always specify the maxZoom below the maximum zoom level of the server, to avoid your users seeing a void of grey tiles.

The OpenStreetMap Tile Server supports up to level 19, and a small amount of other servers support up to level 22.

hashtag
Boundaries (bounds, maxBounds)

Takes LatLngBounds to restrict the map view within a rectangular area.

bounds is only effective on first build, and is an alternative to using center and zoom to initialise the map. maxBounds is persistent and prevents the view moving outside of the area. For example:

will make the map center on London at first, and ensure that the gray void around the world cannot appear on screen (in the default projection).

circle-exclamation

Always specify your center within your boundaries to avoid errors. Boundaries will take preference over center.

hashtag
Rotation (rotation)

Takes a double specifying the bearing of the map when it is first built. For example:

will put the South of the map at the top of the device.

Defaults to 0(°).

hashtag
Keep Alive (keepAlive)

If you are using a more complex layout in your application - such as using the map inside a ListView, a PageView, or a tabbed layout - you may find that the map resets when it appears/scrolls back into view. This option is designed to prevent that.

Takes a bool flag, toggling whether the internal map state should wantKeepAlive.

Defaults to false.

circle-exclamation

Overuse of this option may lead to performance issues.

It prevents the Flutter VM from freeing up as much memory, and it must remain processing any events that may happen to it.

        center: LatLng(0.0, 0.0),
How Does It Work?
        zoom: 13.0,
        maxZoom: 19.0,
        bounds: LatLngBounds(
            LatLng(51.74920, -0.56741),
            LatLng(51.25709, 0.34018),
        ),
        maxBounds: LatLngBounds(
            LatLng(-90, -180.0),
            LatLng(90.0, 180.0),
        ),
        rotation: 180.0,
        keepAlive: true,

Other Options

Visit the Full API Reference for the full list of available options

hashtag
Interactivity Settings (interactiveFlags)

Takes an integer bitfield, which can be treated similar to enumerables. For example:

allows/enables all interactions except for rotation (keeping the map at the heading specified by rotation).

The flags below are available:

Flag
Description

Use & for 'AND' logic and ~ for 'NOT' logic. Combining these two gates, as shown in the example, can lead to many combinations, each easy to put together.

Defaults to enabling all interactions (all).

hashtag
Scroll Wheel Settings (enableScrollWheel & scrollWheelVelocity)

Used together to enable scroll wheel scrolling, and set it's sensitivity/speed.

The first parameter takes a bool, enabling or disabling scroll wheel zooming. The second takes a double, which is used as a multiplier for changing the zoom level internally.

Defaults to true and 0.005.

hashtag
When Position Changed (onPositionChanged)

Takes a function with two arguments. Gets called whenever the map position is changed, even if it is not changed by the user.

hashtag
When Map Tapped (onTap)

Takes a function with one argument. Gets called whenever the the user taps/clicks/presses on the map.

hashtag
When Map Ready (onMapReady)

See before using this callback.

This callback can be registered if you need to do something with the map controller as soon as the map is available and initialized; generally though it isn't needed and the map is available after first build.

Takes a function with zero arguments. Gets called from the initState() method of the FlutterMap.

        InteractiveFlag.all & ~InteractiveFlag.rotate

doubleTapZoom

Enables zooming with a double tap (prevents onTap from firing)

rotate

Enables rotating the map with a twist gesture

all

Enables all interactions

none

Disables all interactions

drag

Enables panning with one finger

pinchMove

Enables panning with two or more fingers

flingAnimation

Enables fling animation when drag/pinchMove have enough 'Fling Velocity'

pinchZoom

Enables zooming with a pinch gesture

        enableScrollWheel: true,
        scrollWheelVelocity: 0.005,
        onPositionChanged: (MapPosition position, bool hasGesture) {
            // Your logic here. `hasGesture` dictates whether the change
            // was due to a user interaction or something else. `position` is
            // the new position of the map.
        }
        onTap: (TapPosition position, LatLng location) {
            // Your logic here. `location` dictates the coordinate at which the user tapped.
        }

Options

The options property takes a MapOptions() object.

FlutterMap(
    options: MapOptions(
        ...
    ),
);

This is where you'll configure most of your global map settings, but not settings that depend on, or affect a specific, map layer.

None of the options are required, but the options property on the FlutterMap() is required.

Recommended Optionschevron-rightOther Optionschevron-right
Usage In initState()