A Dart Implementation Of Leaflet.makercluster for Flutter Apps

Usage 

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),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

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: 

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.

Use this package as a library

Depend on it

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.

Import it

Now in your Dart code, you can use:

import 'package:flutter_map_marker_cluster/flutter_map_marker_cluster.dart';

example/lib/main.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

#flutter #android #ios