arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Using Stadia Maps

circle-info

'flutter_map' is in no way associated or related with Stadia Maps.

Stadia Maps' home page: stadiamaps.comarrow-up-right Stadia Maps' pricing page: stadiamaps.com/pricingarrow-up-right Stadia Maps' documentation page: docs.stadiamaps.comarrow-up-right

Stadia Maps is a popular tiered-payment (with free-tier) tile provider solution, especially for generic mapping applications. Setup with 'flutter_map' is relatively straightforward, but this page provides an example anyway.

hashtag
Pre-made Styles

Stadia Maps offers a variety of out of the box, that don't require customization.

For normal usage with raster tiles, use the Raster URL for the style you like, then follow the instructions.

For more information about using the vector tiles, see .

hashtag
Custom Styles

You can find details on Stadia Maps' support for custom styles at the bottom of the .

hashtag
Usage

hashtag
Normal (raster)

You should remove the 'api_key' (found at the end of the URL) from the URL for readability. Instead, pass it to additionalOptions.

hashtag
Vector Usage

Stadia Maps' also provides vector tiles. For more information about using vector tiles, please see .

However, please note that this method of integration is still experimental. Many of the Stadia Maps styles utilize advanced features of the Mapbox GL JSON style language which are not yet well-supported.

If you are interested in contributing to this, please join the .

map stylesarrow-up-right
map styles documentationarrow-up-right
Discord serverarrow-up-right
Normal (raster)
Vector Usage
FlutterMap(
    options: MapOptions(
      center: LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    nonRotatedChildren: [
        AttributionWidget.defaultWidget(
            source: 'Stadia Maps © OpenMapTiles © OpenStreetMap contributors',
            onSourceTapped: () async {
                // Requires 'url_launcher'
                if (!await launchUrl(Uri.parse("https://stadiamaps.com/attribution"))) {
                    if (kDebugMode) print('Could not launch URL');
                }
            },
        )
    ],
    children: [
      TileLayer(
        urlTemplate: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key={api_key}",
        additionalOptions: {
            "api_key": "<API-KEY>",
        },
        userAgentPackageName: 'com.example.app',
        maxNativeZoom: 20,
      ),
    ],
);
Using Vector Tiles