flutter_map Docs
Project Links💝 Support Us
v7
v7
  • flutter_map
  • 🏗️Why Choose flutter_map?
  • 💝Supporters
  • ✏️Credits & Contributing
  • Getting Started
    • How Does It Work?
      • Raster vs Vector Tiles
    • Installation
    • Examples
    • v7 Information
  • Usage
    • Base Widget
    • Options
      • Interaction Options
      • Custom CRSs
    • Layers
    • Programmatic Interaction
      • Controllers & Cameras
      • External Custom Controllers
      • Listen To Events
    • Full API Reference
  • Layers
    • Tile Layer
      • Tile Providers
      • WMS Usage
    • Marker Layer
    • Polygon Layer
    • Polyline Layer
    • Circle Layer
    • Overlay Image Layer
    • Attribution Layer
    • Layer Interactivity
      • Hit Testing Behaviour
  • Tile Servers
    • Using Google Maps
    • Using Mapbox
    • Using Thunderforest
    • Using Tracestrack
    • Using Stadia Maps
    • Using Lima Labs
    • Using Bing Maps
    • Offline Mapping
    • Other Options
  • Plugins
    • Plugins List
    • Creating A Plugin
      • Creating New Tile Providers
      • Creating New Layers
Powered by GitBook

© flutter_map Authors & Maintainers

On this page
  • Integration
  • Custom Styles
  • Prebuilt Styles

Was this helpful?

Export as PDF
  1. Tile Servers

Using Mapbox

PreviousUsing Google MapsNextUsing Thunderforest

Last updated 7 months ago

Was this helpful?

'flutter_map' is in no way associated or related with Mapbox.

Mapbox's Maps home page: Mapbox's Maps pricing page: Mapbox's Maps documentation:

Tile providers that also provide their own SDK solution to display tiles will often charge a higher price to use 3rd party libraries like flutter_map to display their tiles. Just another reason to switch to an alternative provider.

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.

Integration

Custom Styles

Mapbox supports creating and using custom styled maps through Studio.

Before attempting to use your style, ensure it actually has layers, and not just a Basemap, which will not appear in the tiles. The image below shows a style which will not work. If you only see blank tiles, but no errors, this is likely the cause.

To create a new style based on the Standard style, choose a template when creating the new style.

  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, then paste it into your TileLayer

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

Other configurations

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

Adding Attribution

Prebuilt Styles

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

Configuring

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 for more information.

Attribution is required, and quite extensive compared to some alternatives: see .

Consider using the , which meets the requirements by supporting both logo and text attribution.

Mapbox offers a variety of ready-made map styles that don't require customization. An example URL can be found in .

docs.mapbox.com/help/getting-started/attribution
the example here
mapbox.com/maps
mapbox.com/pricing#maps
docs.mapbox.com/api/maps/static-tiles
RichAttributionWidget
Retina Mode
Retina Mode