> For the complete documentation index, see [llms.txt](https://docs.fleaflet.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fleaflet.dev/v3/tile-servers/using-stadia-maps.md).

# Using Stadia Maps

{% hint style="info" %}
'flutter\_map' is in no way associated or related with Stadia Maps.

Stadia Maps' home page: [stadiamaps.com](https://stadiamaps.com/)\
Stadia Maps' pricing page: [stadiamaps.com/pricing](https://stadiamaps.com/pricing/)\
Stadia Maps' documentation page: [docs.stadiamaps.com](https://docs.stadiamaps.com/)
{% endhint %}

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.

## Pre-made Styles

Stadia Maps offers a variety of [map styles](https://docs.stadiamaps.com/themes) 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 [#normal-raster](#normal-raster "mention") instructions.

For more information about using the vector tiles, see [#vector-usage](#vector-usage "mention").

## Custom Styles

You can find details on Stadia Maps' support for custom styles at the bottom of the [map styles documentation](https://docs.stadiamaps.com/themes/#custom-styles).

## Usage

### 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`.

```dart
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,
      ),
    ],
);
```

### Vector Usage

Stadia Maps' also provides vector tiles. For more information about using vector tiles, please see [Raster vs Vector Tiles](/v3/getting-started/explanation/raster-vs-vector-tiles.md#using-vector-tiles).&#x20;

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 [Discord server](https://discord.gg/egEGeByf4q).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.fleaflet.dev/v3/tile-servers/using-stadia-maps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.