# Using Mapbox

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

Mapbox's Maps home page: [mapbox.com/maps](https://docs.fleaflet.dev/v6/tile-servers/www.mapbox.com/maps)\
Mapbox's Maps pricing page: [mapbox.com/pricing#maps](https://docs.fleaflet.dev/v6/tile-servers/www.mapbox.com/pricing#maps)\
Mapbox's Maps documentation: [docs.mapbox.com/api/maps/static-tiles](https://docs.mapbox.com/api/maps/static-tiles)
{% endhint %}

To display their map tiles, Mapbox usually provides a 'Style URL' for map styles. However, to integrate with 3rd-party APIs, they also provide a 'CARTO Integration URL', and tiles requested through this endpoint consume the 'Static Tiles API' quota. This URL needs no extra configuration to integrate with flutter\_map.

The maximum zoom level that Mapbox supports is 22, so it is recommended to set `maxNativeZoom` or `maxZoom` as such.

{% hint style="warning" %}
Attribution is required, see [docs.mapbox.com/help/getting-started/attribution](https://docs.mapbox.com/help/getting-started/attribution/).

Consider using the [Attribution Layer](/v6/layers/attribution-layer.md#richattributionwidget), which meets the requirements by supporting both logo and text attribution.
{% endhint %}

## Integration

### Custom Styles

Mapbox supports creating and using custom styled maps through Studio.

1. Create a custom style using the editor
2. Click "Share...", or the share icon
3. Choose between Draft or Production
4. Scroll to the bottom of the dialog, and choose Third Party
5. Select "CARTO" from the dropdown menu
6. Click the copy button to copy the template URL

<figure><img src="/files/UWza3L1nDeO25zgCP6nS" alt="" width="563"><figcaption></figcaption></figure>

#### Configuring [Retina Mode](/v6/layers/tile-layer.md#retina-mode)

The URL includes an '@2x' string, which forces usage of high-definition tiles on all displays, without extra setup.

Should you need to let flutter\_map interfere, and only use retina tiles on retina/high-density displays, replace it with the '{r}' placeholder, then see [Tile Layer](/v6/layers/tile-layer.md#retina-mode) for more information.

### Prebuilt Styles

Mapbox offers a variety of ready-made map styles that don't require customization. An example URL can be found in [the example here](https://docs.mapbox.com/api/maps/static-tiles/#example-request-retrieve-raster-tiles-from-styles).

This URL should be used as above, although you may need to insert the placeholders manually.


---

# Agent Instructions: 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:

```
GET https://docs.fleaflet.dev/v6/tile-servers/using-mapbox.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.