Using Stadia Maps
'flutter_map' is in no way associated or related with Stadia Maps.
Stadia Maps' home page: stadiamaps.com
Stadia Maps' pricing page: stadiamaps.com/pricing
Stadia Maps' documentation page: docs.stadiamaps.com
Stadia Maps is a popular tiered-payment (with free-tier) tile provider solution, especially for generic mapping applications. Setup with 'flutter_map' is relatively straightforward, but this page provides an example anyway.
For normal usage with raster tiles, use the Raster URL for the style you like, then follow the Normal (raster) instructions.
You can find details on Stadia Maps' support for custom styles at the bottom of the map styles documentation.
You should remove the 'api_key' (found at the end of the URL) from the URL for readability. Instead, pass it to
additionalOptions
.FlutterMap(
options: MapOptions(
center: LatLng(51.5, -0.09),
zoom: 13.0,
),
nonRotatedChildren: [
AttributionWidget.defaultWidget(
source: 'Stadia Maps © OpenMapTiles © OpenStreetMap contributors',
onSourceTapped: () async {
// Requires 'url_launcher'
if (!await launchUrl(Uri.parse("https://stadiamaps.com/attribution"))) {
if (kDebugMode) print('Could not launch URL');
}
},
)
],
children: [
TileLayer(
urlTemplate: "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png?api_key={api_key}",
additionalOptions: {
"api_key": "<API-KEY>",
},
userAgentPackageName: 'com.example.app',
maxNativeZoom: 20,
),
],
);
Stadia Maps' also provides vector tiles. For more information about using vector tiles, please see Using Vector Tiles.
However, please note that this method of integration is still experimental. Many of the Stadia Maps styles utilize advanced features of the Mapbox GL JSON style language which are not yet well-supported.
Last modified 5mo ago