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 tile layer that uses Thunderforest is as easy as adding any other tile layer.

Example Full Widget

This can just be added into your project inside a build method. 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>',
        ),
    ],
)

You will need to change (to get started):

• Your desired map style - for example, ‘cycle’ or ‘outdoors’
• Your API key
• Your application package name - for example, ‘com.example.app’

This setup will:

• Add a tile layer to a map, which uses our Map Tiles API
• Use retina tiles - remove ‘{r}’ to disable
• Distribute requests to the available subdomains
• Set the maximum zoom level to the maximum supported
• Set the initial center and initial zoom of the map to London
• Credit appropriately
• Set a valid User-Agent header

Other Documentation

There’s so much more you can do and customise with flutter_map. Later on, you may want to customise your setup further, in which case, feel free to browse the official flutter_map documentation.

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