Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lpongetti/flutter_map_marker_cluster
Provides beautiful animated marker clustering functionality for flutter_map. Inspired by Leaflet.markercluster
https://github.com/lpongetti/flutter_map_marker_cluster
clustering leaflet map marker markercluster
Last synced: 10 days ago
JSON representation
Provides beautiful animated marker clustering functionality for flutter_map. Inspired by Leaflet.markercluster
- Host: GitHub
- URL: https://github.com/lpongetti/flutter_map_marker_cluster
- Owner: lpongetti
- License: bsd-3-clause
- Created: 2019-06-05T19:02:49.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-03-10T14:26:19.000Z (8 months ago)
- Last Synced: 2024-03-10T15:36:08.109Z (8 months ago)
- Topics: clustering, leaflet, map, marker, markercluster
- Language: Dart
- Homepage:
- Size: 43 MB
- Stars: 229
- Watchers: 7
- Forks: 193
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flutter Map Marker Cluster
[](https://pub.dartlang.org/packages/flutter_map_marker_cluster) 
A Dart implementation of Leaflet.markercluster for Flutter apps.
This is a plugin for [flutter_map](https://github.com/johnpryan/flutter_map) package
## Usage
Add flutter_map and flutter_map_marker_cluster to your pubspec:
```yaml
dependencies:
flutter_map: any
flutter_map_marker_cluster: any # or the latest version on Pub
```
[flutter_map](https://github.com/fleaflet/flutter_map/releases) package removed old layering system with v3.0.0 use `MarkerClusterLayerWidget` as member of `children` parameter list and configure it using `MarkerClusterLayerOptions`.
```dart
@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: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
),
MarkerClusterLayerWidget(
options: MarkerClusterLayerOptions(
maxClusterRadius: 45,
size: const Size(40, 40),
alignment: Alignment.center,
padding: const 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:
[](https://ko-fi.com/lorenzopongetti)
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.