Awesome
flutter_map
A Dart implementation of Leaflet for Flutter apps.
Usage
Add flutter_map to your pubspec:
dependencies:
flutter_map: any # or the latest version on Pub
Configure the map using MapOptions
and layer options:
Widget build(BuildContext context) {
return new FlutterMap(
options: new MapOptions(
center: new LatLng(51.5, -0.09),
zoom: 13.0,
),
layers: [
new TileLayerOptions(
urlTemplate: "https://api.tiles.mapbox.com/v4/"
"{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
additionalOptions: {
'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
'id': 'mapbox.streets',
},
),
new MarkerLayerOptions(
markers: [
new Marker(
width: 80.0,
height: 80.0,
point: new LatLng(51.5, -0.09),
builder: (ctx) =>
new Container(
child: new FlutterLogo(),
),
),
],
),
],
);
}
Run the example
See the example/
folder for a working example app.
To run it, in a terminal cd into the folder.
Then execute ulimit -S -n 2048
(ref).
Then execute flutter run
with a running emulator.
Mapbox Tiles
You can use map tiles from a number of free and paid map suppliers, or you can host your own map tiles.
The example uses OpenStreetMap tiles, which are free but can be slow.
Use TileLayerOptions to configure other tile providers, such as mapbox:
Widget build(ctx) {
return TileLayerOptions(
urlTemplate: "https://api.mapbox.com/v4/"
"{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
additionalOptions: {
'accessToken': '<PUT_ACCESS_TOKEN_HERE>',
'id': 'mapbox.streets',
},
);
}
To use, you'll need a mapbox key:
- Create a Mapbox account to get an API key
- Open
leaflet_flutter_example/lib/main.dart
and paste the API key into theadditionalOptions
map
Offline maps
Follow this guide to grab offline tiles<br>
Once you have your map exported to .mbtiles
, you can use mbtilesToPng to unpack into /{z}/{x}/{y}.png
.
Move this to Assets folder and add asset directories to pubspec.yaml
. Minimum required fields for offline maps are:
Widget build(ctx) {
return FlutterMap(
options: MapOptions(
center: LatLng(56.704173, 11.543808),
zoom: 13.0,
swPanBoundary: LatLng(56.6877, 11.5089),
nePanBoundary: LatLng(56.7378, 11.6644),
),
layers: [
TileLayerOptions(
tileProvider: AssetTileProvider(),
urlTemplate: "assets/offlineMap/{z}/{x}/{y}.png",
),
],
);
}
Make sure PanBoundaries are within offline map boundary to stop missing asset errors.<br>
See the flutter_map_example/
folder for a working example.<br>
Note that there is also FileTileProvider()
, which you can use to load tiles from the filesystem.
Plugins
- flutter_map_marker_cluster: Provides Beautiful Animated Marker Clustering functionality
Roadmap
For the latest roadmap, please see the Issue Tracker