Skip to main content
plugins

Plugins

Extension packages build on package:flutter_unified_map/plugin_api.dart, in the spirit of flutter_map's own plugin API. The first one is the marker cluster.

Marker clustering​

flutter_unified_map_marker_cluster — GitHub — animates clusters on the native maps with the API of flutter_map_marker_cluster: MarkerClusterLayerWidget, MarkerClusterLayerOptions, animated split and merge, spiderfy. On web, Windows and Linux it runs the real flutter_map_marker_cluster inside the map (through FlutterMapLayer), so the clustering looks the same everywhere.

Its demo is one cluster over Brussels: zoom in and the pins dispatch over the area, zoom out and they pack back into the one cluster —

One cluster over Brussels: zoom in and its pins dispatch over the area, zoom out and they pack back into one

— and when zooming cannot split pins that share one point, a tap on their cluster spiderfies it: the pins glide out on a spiral, each with a leg back to the cluster, and a map tap folds them back in.

The cluster spiderfied: pins spread on a spiral with legs

MarkerClusterLayerWidget(
  options: MarkerClusterLayerOptions(
    markers: markers,
    maxClusterZoom: 10,
    onClusterTap: (controller, cluster) => controller.animateTo(
      dest: cluster.latLng,
      zoom: cluster.zoom + 2,
    ),
  ),
)

Creating plugins​

  • a layer is a MapLayerState: it receives an id, publishes markers through MarkerPublisher (rasterised once per icon key), and pushes its shapes to the platform with each frame's diff;
  • MapLayerHost exposes the camera (liveCamera while moving, idleCamera when settled), integerZoom, and setFlutterMapLayers for backends that can host flutter_map's own layer widgets;
  • markers animate through MarkerTransition (appearFrom, disappearTo, glide) with the platform's easing.

The marker cluster package is the reference implementation — read its source alongside the API.

Sharing code with a flutter_map app​

FlutterMapLayer(child: ...) puts a raw flutter_map layer inside UnifiedMap: drawn inside the map on web, Windows and Linux; ignored on the native maps (Android, iOS, macOS). Use it to share code with an existing flutter_map app while the native backends take over.