A plugin for flutter_map that enables the use of vector tiles with slippy maps and Flutter

a plugin for flutter_map that enables the use of vector tiles with slippy maps and flutter.

loads vector tiles from a source such as mapbox or stadia maps, and renders them as a layer on a flutter_map.

tile rendering can be vector, mixed, or raster. mixed mode is default, since that provides an optimal trade-off between sharp visuals when idle, and smooth animation when zooming with a pinch gesture.

usage

class _myhomepagestate extends state<myhomepage> {
  @override
  widget build(buildcontext context) {
    return scaffold(
        appbar: appbar(
          title: text(widget.title),
        ),
        body: safearea(
            child: column(children: [
          flexible(
              child: fluttermap(
            options: mapoptions(
                center: latlng(49.246292, -123.116226),
                zoom: 10,
                maxzoom: 15,
                interactiveflags: interactiveflag.doubletapzoom |
                    interactiveflag.drag |
                    interactiveflag.pinchzoom |
                    interactiveflag.pinchmove,
                plugins: [vectormaptilesplugin()]),
            layers: <layeroptions>[
              // normally you would see tilelayeroptions which provides raster tiles
              // instead this vector tile layer replaces the standard tile layer
              vectortilelayeroptions(
                  theme: _maptheme(context),
                  tileprovider: memorycachevectortileprovider(
                      delegate: networkvectortileprovider(
                          urltemplate: _urltemplate(),
                          // this is the maximum zoom of the provider, not the
                          // maximum of the map. vector tiles are rendered
                          // to larger sizes to support higher zoom levels
                          maximumzoom: 14),
                      maxsizebytes: 1024 * 1024 * 2)),
            ],
          ))
        ])));
  }

  _maptheme(buildcontext context) {
    // maps are rendered using themes
    // to provide a dark theme do something like this:
    // if (mediaquery.of(context).platformbrightness == brightness.dark) return mydarktheme();
    return providedthemes.lighttheme();
  }

  string _urltemplate() {
    // stadia maps source https://docs.stadiamaps.com/vector/
    return 'https://tiles.stadiamaps.com/data/openmaptiles/{z}/{x}/{y}.pbf?api_key=$apikey';

    // mapbox source https://docs.mapbox.com/api/maps/vector-tiles/#example-request-retrieve-vector-tiles
    // return 'https://api.mapbox.com/v4/mapbox.mapbox-streets-v8/{z}/{x}/{y}.mvt?access_token=$apikey',
  }
}

see the example for details.

status

this plugin is fairly new and has not yet been broadly used. it’s feature complete enough to be a v1, but does
have performance issues on larger screens such as on a tablet or very old devices.