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(),
),
),
],
),
],
);
}
Azure Maps provider
Configure the map to use Azure Maps by using the following 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://atlas.microsoft.com/map/tile/png?api-version=1&layer=basic&style=main&tileSize=256&view=Auto&zoom={z}&x={x}&y={y}&subscription-key={subscriptionKey}",
additionalOptions: {
'subscriptionKey': '<YOUR_AZURE_MAPS_SUBSCRIPTON_KEY>'
},
),
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(),
),
),
],
),
],
);
}
To use Azure Maps you will need to setup an account and get a subscription key
Open Street Map provider
Configure the map to use Open Street Map by using the following 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://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
subdomains: ['a', 'b', 'c']
),
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.
Offline maps
Follow this guide to grab offline tiles
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.
See the flutter_map_example/ folder for a working example.
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
- user_location: A plugin to handle and plot the current user location in FlutterMap
Roadmap
For the latest roadmap, please see the Issue Tracker