Using Mapbox
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:
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',
),
],
);
Please note that choosing either 256x256 or 512x512 (default) pixel tiles will impact pricing: see the documentation.
Last updated
Was this helpful?