base on Simple Flutter clustering library for Google Maps [](https://pub.dartlang.org/packages/google_maps_cluster_manager) # Flutter Cluster Manager for Google Maps  A Flutter package to cluster items on a [Google Maps](https://pub.dev/packages/google_maps_flutter) widget based on Geohash. Highly inspired by [clustering_google_maps](https://pub.dev/packages/clustering_google_maps) ## Usage To use this package, add `google_maps_cluster_manager` as a [dependency in your pubspec.yaml file](https://flutter.io/platform-plugins/). ### Getting Started Your map items has to use `ClusterItem` as a mixin (or extends this class) and implements the `LatLng location` getter. ```dart class Place with ClusterItem { final String name; final LatLng latLng; Place({required this.name, required this.latLng}); @override LatLng get location => latLng; } ``` To start with Cluster Manager, you have to initialize a `ClusterManager` instance. ```dart ClusterManager<Place>( _items, // Your items to be clustered on the map (of Place type for this example) _updateMarkers, // Method to be called when markers are updated markerBuilder: _markerBuilder, // Optional : Method to implement if you want to customize markers levels: [1, 4.25, 6.75, 8.25, 11.5, 14.5, 16.0, 16.5, 20.0], // Optional : Configure this if you want to change zoom levels at which the clustering precision change extraPercent: 0.2, // Optional : This number represents the percentage (0.2 for 20%) of latitude and longitude (in each direction) to be considered on top of the visible map bounds to render clusters. This way, clusters don't "pop out" when you cross the map. stopClusteringZoom: 17.0 // Optional : The zoom level to stop clustering, so it's only rendering single item "clusters" ); ``` When your `GoogleMapController` is created, you have to set the `mapId` with the `setMapId` method : ```dart _manager.setMapId(controller.mapId); ``` You are able to add an new item to the map by calling `addItem` method on your `ClusterManager` instance. You can also completely change the items on your maps by calling `setItems` method. You can customize the icon of a cluster by using `Future<Marker> Function(Cluster<T extends ClusterItem>) markerBuilder` parameter. ```dart static Future<Marker> Function(Cluster) get markerBuilder => (cluster) async { return Marker( markerId: MarkerId(cluster.getId()), position: cluster.location, onTap: () { print(cluster.items); }, icon: await getClusterBitmap(cluster.isMultiple ? 125 : 75, text: cluster.isMultiple? cluster.count.toString() : null), ); }; static Future<BitmapDescriptor> getClusterBitmap(int size, {String text?}) async { final PictureRecorder pictureRecorder = PictureRecorder(); final Canvas canvas = Canvas(pictureRecorder); final Paint paint1 = Paint()..color = Colors.red; canvas.drawCircle(Offset(size / 2, size / 2), size / 2.0, paint1); if (text != null) { TextPainter painter = TextPainter(textDirection: TextDirection.ltr); painter.text = TextSpan( text: text, style: TextStyle( fontSize: size / 3, color: Colors.white, fontWeight: FontWeight.normal), ); painter.layout(); painter.paint( canvas, Offset(size / 2 - painter.width / 2, size / 2 - painter.height / 2), ); } final img = await pictureRecorder.endRecording().toImage(size, size); final data = await img.toByteData(format: ImageByteFormat.png); return BitmapDescriptor.fromBytes(data.buffer.asUint8List()); } ``` Every cluster (even one item clusters) is rendered by the library as a `Cluster<T extends ClusterItem>` object. You can differentiate single item clusters from multiple ones by using the `isMultiple` variable (or the `count` variable). This way, you can create different markers icon depending on the type of cluster. You can create multiple managers for a single map, see the `multiple.dart` example. ## Complete Basic Example See the `example` directory for a complete sample app. ", Assign "at most 3 tags" to the expected json: {"id":"9654","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"