Skip to content

flutter_map

Note

This documentation is not a comprehensive introduction to Flutter and assumes some familiarity. We would refer you to the official documentation for more info. We have also uploaded a comprehensive example illustrating a full-screen map with annotations, interaction, and clustering.

Don't forget to sign up for a free Stadia Maps account so you can try this on your own device!

Get Started With a Free Account

flutter_map is a Flutter-first map library built from the ground up (not a wrapper for an existing native library), and boasts broad cross-platform compatibility due to its design. It is loosely inspired by Leaflet, a JavaScript raster map library, and features a wide range of plugins.

Quickstart

Warning

All mobile and desktop applications involve making requests using an API key. You must take care to secure this, especially if your app reaches end user outside your organization. See our authentication docs for more details.

First, add the library to your pubspec under dependencies. In addition to flutter_map, you probably need latlong2 (for specifying coordinates) and url_launcher (for linking to an attribution page).

pubspec.yaml
dependencies:
  ...
  flutter_map: ^3.0.0
  latlong2: ^0.8.1
  url_launcher: ^6.1.6

You're now ready to instantiate a FlutterMap widget and add it to your app! Here is an example of how to use it with a Stadia Maps raster style.

const styleUrl = "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png";
const apiKey = "YOUR-API-KEY";  // TODO: Replace this with your own API key. Sign up for free at https://client.stadiamaps.com/.
FlutterMap(
  options: MapOptions(
      center: LatLng(59.438484, 24.742595),
      zoom: 14,
      keepAlive: true
  ),
  nonRotatedChildren: [
    AttributionWidget.defaultWidget(
      source: 'Stadia Maps © OpenMapTiles © OpenStreetMap contributors',
      onSourceTapped: () async {
        if (!await launchUrl(Uri.parse("https://stadiamaps.com/attribution"))) {
          if (kDebugMode) {
            print('Could not launch url');
          }
        }
      },
    )
  ],
  children: [
    TileLayer(
      urlTemplate:
      "$styleUrl?api_key={api_key}",
      additionalOptions: {
        "api_key": apiKey
      },
      maxZoom: 20,
      maxNativeZoom: 20,
    )
  ],
)

Tip

You can browse our map style library for additional map styles, or create your own. Any of our raster styles will work out of the box, but the vector plugin does not support certain advanced styling expressions present in most Stadia Maps styles.

If you want to use vector styles with flutter_map, we recommend creating a custom style and testing ensure that it renders as you expect. You are free to use our styles as a base, but we are aware that labels currently do not render due to the use of some unsupported expression types, so you will need to simplify these to select a single name tag for the moment.

Flutter Maps Screenshot

Example Repository

We have published a full example repository on GitHub which visualizes a set of earthquake data. This is analogous to the clustering example for MapLibre GL JS.

Next Steps

For more details on how to use flutter_map, refer to the official package documentation.

And of course, don't forget to sign up for a free Stadia Maps account, so you can try this on your own device!

Get Started With a Free Account