Flutter Map Marker Cluster
A Dart implementation of Leaflet.markercluster for Flutter apps. This is a plugin for flutter_map package
|
Usage
Add flutter_map and flutter_map_marker_cluster to your pubspec:
dependencies:
flutter_map: any
flutter_map_marker_cluster: any # or the latest version on Pubflutter_map package removed old layering system with v3.0.0 use MarkerClusterLayerWidget as member of children parameter list and configure it using MarkerClusterLayerOptions.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Clustering Many Markers Page')),
drawer: buildDrawer(context, ClusteringManyMarkersPage.route),
body: FlutterMap(
options: MapOptions(
center: LatLng((maxLatLng.latitude + minLatLng.latitude) / 2,
(maxLatLng.longitude + minLatLng.longitude) / 2),
zoom: 6,
maxZoom: 15,
),
children: <Widget>[
TileLayer(
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: const ['a', 'b', 'c'],
),
MarkerClusterLayerWidget(
options: MarkerClusterLayerOptions(
maxClusterRadius: 45,
size: const Size(40, 40),
anchor: AnchorPos.align(AnchorAlign.center),
fitBoundsOptions: const FitBoundsOptions(
padding: EdgeInsets.all(50),
maxZoom: 15,
),
markers: markers,
builder: (context, markers) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blue),
child: Center(
child: Text(
markers.length.toString(),
style: const TextStyle(color: Colors.white),
),
),
);
},
),
),
],
),
);
}Run the example
See the example/ folder for a working example app.
Supporting Me
A donation through my Ko-Fi page would be infinitly appriciated:
but, if you can't or won't, a star on GitHub and a like on pub.dev would also go a long way!
Every donation gives me fuel to continue my open-source projects and lets me know that I'm doing a good job.