Using Mapbox
'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:
Mapbox is a popular pay-as-you-go tile provider solution, especially for commercial applications. However, setup with 'flutter_map' can be a bit finicky, so this page is here to help you get going with Mapbox. Note that these methods use up your 'Static Tiles API' quota.

Pre-made 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.

Custom Styles

First, create a custom map Style in the Studio. You can personalise to your heart's content, or leave it at default for a more vanilla feeling. You'll also need an access token.
Then make the map style public, and open the share dialog, as seen below:
Opening the Sharing dialog
Scroll to the bottom of the dialog, and select Third Party. Then from the drop down box, select 'CARTO':
Retrieving the appropriate URL
You'll then need to copy the URL and use it in 'flutter_map', like in the code below.


You should remove the 'access_token' (found at the end of the URL, usually beginning with 'pk.') from the URL for readability. Instead, pass it to additionalOptions.
options: MapOptions(
center: LatLng(51.5, -0.09),
zoom: 13.0,
nonRotatedChildren: [
// This does NOT fulfill Mapbox's requirements for attribution
// See
source: '© Mapbox © OpenStreetMap',
onSourceTapped: () async {
// Requires 'url_launcher'
if (!await launchUrl(Uri.parse(""))) {
if (kDebugMode) print('Could not launch URL');
children: [
urlTemplate: "<user>/<tile-set-id>/tiles/<256/512>/{z}/{x}/{y}@2x?access_token={access_token}",
additionalOptions: {
"access_token": "<ACCESS-TOKEN>",
userAgentPackageName: '',
Please note that choosing either 256x256 or 512x512 (default) pixel tiles will impact pricing: see the documentation.
Export as PDF
Copy link
Edit on GitHub
On this page
Pre-made Styles
Custom Styles