flutter_map is the most popular, non-commercially owned mapping library for Flutter - an open-source framework designed to build performant and beautiful multi-platform apps.
Adding a tile layer that uses Thunderforest is as easy as adding any other tile layer.
This can just be added into your project inside a build
method. Note that this is for flutter_map v3.0.0+ only.
return FlutterMap(
options: MapOptions(
center: LatLng(51.509364, -0.128928),
zoom: 9.2,
maxZoom: 22,
),
nonRotatedChildren: [
AttributionWidget.defaultWidget(
source: 'Maps: © Thunderforest | Data: © OpenStreetMap contributors',
onSourceTapped: null,
),
],
children: [
TileLayer(
urlTemplate: 'https://{s}.tile.thunderforest.com/{style}/{z}/{x}/{y}{r}.png?apikey={apiKey}',
subdomains: ['a', 'b', 'c'],
additionalOptions: {
'style': '<your-map-style>',
'apiKey': '<your-api-key>',
},
maxZoom: 22,
userAgentPackageName: '<your-application-package-name>',
),
],
)
You will need to change (to get started):
This setup will:
There’s so much more you can do and customise with flutter_map. Later on, you may want to customise your setup further, in which case, feel free to browse the official flutter_map documentation.
Note that if you choose to use the optional flutter_map_tile_caching plugin for bulk downloading, you must comply with our Bulk Downloading Terms.