Using Mapbox
Last updated
Last updated
© flutter_map Authors & Maintainers
'flutter_map' is in no way associated or related with Mapbox.
Mapbox's Maps home page: mapbox.com/maps Mapbox's Maps pricing page: mapbox.com/pricing#maps Mapbox's Maps documentation: docs.mapbox.com/api/maps/static-tiles
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.
Attribution is required, see docs.mapbox.com/help/getting-started/attribution.
Consider using the , which meets the requirements by supporting both logo and text attribution.
Mapbox supports creating and using custom styled maps through Studio.
Create a custom style using the editor
Click "Share...", or the share icon
Choose between Draft or Production
Scroll to the bottom of the dialog, and choose Third Party
Select "CARTO" from the dropdown menu
Click the copy button to copy the template URL
The URL includes an '@2x' string, which forces usage of high-definition tiles on all displays, without extra setup.
Mapbox offers a variety of ready-made map styles that don't require customization. An example URL can be found in the example here.
This URL should be used as above, although you may need to insert the placeholders manually.
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.
