johnpryan/flutter_map


A Flutter map widget inspired by Leaflet

License: BSD-3-Clause

Language: Dart

Keywords: dart, flutter, leaflet


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(),
              ),
            ),
          ],
        ),
      ],
    );
  }

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

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

Project Statistics

Sourcerank 12
Repository Size 7.94 MB
Stars 1,002
Forks 282
Watchers 43
Open issues 86
Dependencies 21
Contributors 57
Tags 0
Created
Last updated
Last pushed

Top Contributors See all

John Ryan Alex tomwyr Kamil Kenneth Gulbrandsøy Lorenzo Pongetti Evo Stamatov escamoteur kimlet Victor Choueiri Vincent Långström Alfanhui Julian Berger Raimund Wege wozza Luis Andrés Jara Castillo Un artisan du Code mortenboye csjames Jan Boon

Packages Referencing this Repo

flutter_map
A Dart implementation of Leaflet for Flutter apps
Latest release 0.8.2 - Updated - 1K stars

Interesting Forks See all

imaNNeoFighT/flutter_map
A Flutter map package based on leaflet
Dart - BSD-2-Clause - Last pushed - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2020-01-07 15:25:47 UTC

Login to resync this repository