Clustering for Flutter Google Maps #

A Flutter package that recreate clustering technique in a Google Maps widget.

Developers Preview Status #

The package recreate the CLUSTERING technique in a Google Maps. It's work with data recordered in a dababase SQLite. I use sqflite (DB TECHNIQUE) It's work with a list of LatLngAndGeohash object. (MEMORY TECHNIQUE)

Usage #

To use this package, add clustering_google_maps as a dependency in your pubspec.yaml file.

For a better performance, at every zoom variation on the map, the package performs a specific query on the SQLite database, but you can force update with updateMap() method.

Getting Started #

DB TECHNIQUE #

To work properly, you must have the data of the points saved in a SQLite database. Latitude, longitude and the string of geohash. These three parameters are necessary for correct operation. If you have not saved the GEOHASH, I suggest you install GEOHASH plugin and save the value of Geohash in the points table of db.

For this solution you must use the db constructor of ClusteringHelper:

ClusteringHelper.forDB(...); 

MEMORY TECHNIQUE #

To work properly you must have a list of LatLngAndGeohash object. LatLngAndGeohash is a simple object with Location and Geohash property, the last is generated automatically; you need only location of the point.

For this solution you must use the MEMORY constructor of ClusteringHelper:

ClusteringHelper.forMemory(...); 

Aggregation Setup #

Yuo can customize color, range count and zoom limit of aggregation. See this class: AggregationSetup.

Future Implementations #

• To further improve performance I am creating a way to perform sql queries only on the latlng bounding box displayed on the map.
• I will insert custom marker with number of points.

Quick Example for both solution #

import 'package:example/app_db.dart'; import 'package:example/fake_point.dart'; import 'package:flutter/material.dart'; import 'package:google_maps_flutter/google_maps_flutter.dart'; import 'package:clustering_google_maps/clustering_google_maps.dart'; class HomeScreen extends StatefulWidget { final List<LatLngAndGeohash> list; HomeScreen({Key key, this.list}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { ClusteringHelper clusteringHelper; final CameraPosition initialCameraPosition = CameraPosition(target: LatLng(0.000000, 0.000000), zoom: 0.0); Set<Marker> markers = Set(); void _onMapCreated(GoogleMapController mapController) async { print("onMapCreated"); clusteringHelper.mapController = mapController; if (widget.list == null) { clusteringHelper.database = await AppDatabase.get().getDb(); } clusteringHelper.updateMap(); } updateMarkers(Set<Marker> markers) { setState(() { this.markers = markers; }); } @override void initState() { if (widget.list != null) { initMemoryClustering(); } else { initDatabaseClustering(); } super.initState(); } // For db solution initDatabaseClustering() { clusteringHelper = ClusteringHelper.forDB( dbGeohashColumn: FakePoint.dbGeohash, dbLatColumn: FakePoint.dbLat, dbLongColumn: FakePoint.dbLong, dbTable: FakePoint.tblFakePoints, updateMarkers: updateMarkers, aggregationSetup: AggregationSetup(), ); } // For memory solution initMemoryClustering() { clusteringHelper = ClusteringHelper.forMemory( list: widget.list, updateMarkers: updateMarkers, aggregationSetup: AggregationSetup(markerSize: 150), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Clustering Example"), ), body: GoogleMap( onMapCreated: _onMapCreated, initialCameraPosition: initialCameraPosition, markers: markers, onCameraMove: (newPosition) => clusteringHelper.onCameraMove(newPosition, forceUpdate: false), onCameraIdle: clusteringHelper.onMapIdle, ), floatingActionButton: FloatingActionButton( child: widget.list == null ? Icon(Icons.content_cut) : Icon(Icons.update), onPressed: () { if (widget.list == null) { //Test WHERE CLAUSE clusteringHelper.whereClause = "WHERE ${FakePoint.dbLat} > 42.6"; } //Force map update clusteringHelper.updateMap(); }, ), ); } } 

See the example directory for a complete sample app.