alejandrojose2018 / clustering_google_maps

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

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.