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 Pub
flutter_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),
),
),
);
},
),
),
],
),
);
}
See the example/
folder for a working example app.
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.
Run this command:
With Flutter:
$ flutter pub add flutter_map_marker_cluster
This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get
):
dependencies:
flutter_map_marker_cluster: ^1.2.0
Alternatively, your editor might support flutter pub get
. Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';
import 'package:flutter/material.dart';
import 'package:flutter_map_marker_cluster_example/clustering_many_markers_page.dart';
import 'package:flutter_map_marker_cluster_example/clustering_page.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Clustering Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const ClusteringPage(),
routes: <String, WidgetBuilder>{
ClusteringPage.route: (context) => const ClusteringPage(),
ClusteringManyMarkersPage.route: (context) =>
const ClusteringManyMarkersPage(),
},
);
}
}
Download details:
Author: lpongetti
Source: https://github.com/lpongetti/flutter_map_marker_cluster