flutter_map

flutter_map is the most popular, non-commercially owned mapping library for Flutter - an open-source framework designed to build performant and beautiful multi-platform apps.

Adding a Thunderforest tile layer with flutter_map
Making further customisations to your set up
Bulk downloading
Related articles

With all Thunderforest plans, you can easily integrate with flutter_maps in just a few steps.

Add custom-made tile layers that support specific activities and business use cases
Enjoy full support and daily updates of all map styles

Adding a Thunderforest tile layer with flutter_map

Note that this is for flutter_map v3.0.0+ only.

return FlutterMap(
    options: MapOptions(
        center: LatLng(51.509364, -0.128928),
        zoom: 9.2,
        maxZoom: 22,
    ),
    nonRotatedChildren: [
        AttributionWidget.defaultWidget(
            source: 'Maps: © Thunderforest | Data: © OpenStreetMap contributors',
            onSourceTapped: null,
        ),
    ],
    children: [
        TileLayer(
            urlTemplate: 'https://{s}.tile.thunderforest.com/{style}/{z}/{x}/{y}{r}.png?apikey={apiKey}',
            subdomains: ['a', 'b', 'c'],
            additionalOptions: {
                'style': '<your-map-style>',
                'apiKey': '<your-api-key>',
            },
            maxZoom: 22,
            userAgentPackageName: '<your-application-package-name>',
        ),
    ],
)

2. Choose your map style

Thunderforest specialise in hand-curated activity maps, which support a wide variety of use cases.

Map styles include:

In this example, we’ve selected the ‘Outdoors’ map, which is carefully tailored to show hiking routes, ski runs, and topographical features.

            additionalOptions: {
                'style': 'outdoors',
                ...
            },

3. Add your API Key

API Keys are a token that you append to each request to identify that request is related to your account. They are a 32 character identifier, made of letters and numbers such as abcd1234abcd1234abcd1234abcd1234.

Why do we use API Keys? Read more here.

You can find your API Key on the dashboard of your account. If you don’t have an account, you can sign up for free.

4. Add your application package name

It’s important that you use a unique name for your application. This is usually based on the reverse domain name notation, using your own domain name and application name, for example:

            userAgentPackageName: 'com.example.appname',

This will ensure that you have set a valid User-Agent header, which is part of our terms, and is particularly useful for us to help you with any troubleshooting.

5. Modify your setup

Our example set up:

Adds a tile layer to a map, which uses our Map Tiles API
Uses retina tiles - remove {r} to disable
Distributes requests to the available subdomains
Sets the maximum zoom level to the maximum supported
Sets the initial center and initial zoom of the map to London

6. Credit appropriately

Attribution must be given to both “Thunderforest” and “OpenStreetMap contributors”.

Making further customisations to your set up

There’s so much more you can do and customise with flutter_map.

Browse the official flutter_map documentation for more information.

If you’d like to make custom changes to one of our map styles - adding your branding, emphasising specific features, and so on - we can help.

Bulk downloading

If you choose to use the optional flutter_map_tile_caching plugin for bulk downloading, you must comply with our Bulk Downloading Terms.

Our main stipulation is that you can bulk download only on our Small Business plan and upwards.