flutter_map

Experimental

A flutter implementation of leaflet.

Usage

Add flutter_map to your pubspec:

dependencies:
  flutter_map: ^0.0.1

Configure the map using MapOptions and layer options:

  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(51.5, -0.09),
        zoom: 13.0,
      ),
      layers: [
        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',
          },
        ),
        MarkerLayerOptions(
          markers: [
            Marker(
              width: 80.0,
              height: 80.0,
              point: LatLng(51.5, -0.09),
              builder: (ctx) =>
              Container(
                child: FlutterLogo(),
              ),
            ),
          ],
        ),
      ],
    );
  }

see the flutter_map_example/ folder for a working example app.

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:

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 the additionalOptions map.

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:

FlutterMap(
  options: MapOptions(
    center: LatLng(56.704173, 11.543808),
    minZoom: <offline map minimum zoom>,
    maxZoom: <offline map maximum zoom>,
    zoom: 13.0,
    swPanBoundary: LatLng(56.6877, 11.5089),
    nePanBoundary: LatLng(56.7378, 11.6644),
  ),
  layers: [
    TileLayerOptions(
      offlineMode: true,
      maxZoom: <offline map maximum zoom>,
      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.

Features

This package is under active development. The following roadmap is focused on the features we require at AppTree. We welcome any contributions for items both on and off of the roadmap.

IhorKlimov/flutter_map

flutter_map

Usage

Mapbox tiles

Offline maps

Features