Using Mapbox

circle-info

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

Mapbox's Maps home page: mapbox.com/mapsarrow-up-right Mapbox's Maps pricing page: mapbox.com/pricing#mapsarrow-up-right Mapbox's Maps documentation: docs.mapbox.com/api/maps/static-tilesarrow-up-right

To integrate with 3rd party mapping libraries, Mapbox provides an alternative to the normal 'Style URL' for each map style (and any custom map styles).

The 'CARTO' 'Integration URL' contains all the information and placeholders that flutter_map requires to display a map. Tiles requested through this endpoint consume the 'Static Tiles API' quota.

Once you have the appropriate URL for your desired map style (see Styles), use it in a TileLayer's urlTemplate as normal.

Retina tiles (high-DPI) tiles are used by default ('@2x'). The maximum zoom level that Mapbox supports is 22, so it is recommended to set maxNativeZoom or maxZoom as such.

circle-exclamation

Styles

Custom (Studio)

Mapbox supports creating and using custom styled maps through Studio. These are compatible with flutter_map.

Once you've found a style that suits your needs, or created your own, make it public, then open the 'Share & develop' modal:

Scroll to the bottom of the modal, and select 'Third party'. Then from the drop down box, select 'CARTO'. Copy the 'Integration URL' to your clipboard, and use as above.

Prebuilt

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

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

Last updated

Was this helpful?