Skip to content
A Flutter map widget inspired by Leaflet
Dart Other
  1. Dart 99.2%
  2. Other 0.8%
Branch: master
Clone or download
Pull request Compare This branch is even with johnpryan:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
lib
test
.gitignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
analysis_options.yaml
flutter_map.iml
pubspec.yaml

README.md

BuildStatus Pub

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.

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

Roadmap

For the latest roadmap, please see the Issue Tracker

You can’t perform that action at this time.