Using Mapbox

PreviousCreating New Layers NextUsing Stadia Maps

Last updated 2 years ago

Was this helpful?

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 .

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 .

Then make the map style public, and open the share dialog, as seen below:

Scroll to the bottom of the dialog, and select Third Party. Then from the drop down box, select 'CARTO':

You'll then need to copy the URL and use it in 'flutter_map', like in the code below.

Usage

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.

FlutterMap(
    options: MapOptions(
      center: LatLng(51.5, -0.09),
      zoom: 13.0,
    ),
    nonRotatedChildren: [
        // This does NOT fulfill Mapbox's requirements for attribution
        // See https://docs.mapbox.com/help/getting-started/attribution/
        AttributionWidget.defaultWidget(
            source: '© Mapbox © OpenStreetMap',
            onSourceTapped: () async {
                // Requires 'url_launcher'
                if (!await launchUrl(Uri.parse("https://docs.mapbox.com/help/getting-started/attribution/"))) {
                    if (kDebugMode) print('Could not launch URL');
                }
            },
        )
    ],
    children: [
      TileLayer(
        urlTemplate: "https://api.mapbox.com/styles/v1/<user>/<tile-set-id>/tiles/<256/512>/{z}/{x}/{y}@2x?access_token={access_token}",
        additionalOptions: {
            "access_token": "<ACCESS-TOKEN>",
        },
        userAgentPackageName: 'com.example.app',
      ),
    ],
);