markers fail to expand at lower zoom levels

[MitchellQ]

At certain zoom levels the markers don't separate when tapped
sometimes the user can still pinch to zoom in separating the markers
other times the user can can tap a marker and the animation will complete but the fab will not transition out completely (this might be intended functionality)

examples
group a (2 markers zoom level x)

• map centers when tapped but doesn't zoom and separate
• user zooms in markers separate

group b (2 markers zoom level x)

• map doesn't center markers separate fab button is half faded out
• user zooms in and markers recombine when you tap again first interaction repeats

group c (4 markers zoom level x)

• map centers when tapped but doesn't zoom and separate
• user zooms in markers separate

map options

        maxZoom: 18.0,
        zoom: 16.0,

MarkerCluster

          height: 40,
          width: 40,
          fitBoundsOptions: FitBoundsOptions(
            padding: EdgeInsets.all(40),
          ),

any help would be appreciated in resolving these

[lpongetti]

Plase create an example.
Center and zoom are relative to point of marker's cluster. It doesnt necessarily separate the cluster. Try also to remove fitboundsoption

[lpongetti]

Another thing, try to change maxClusterRadius

[MitchellQ]

I created a repo https://github.com/MitchellQ/map-example this shows my issue more clearly

this is my complete MarkerCluster

            maxClusterRadius: 100,
            height: 40,
            width: 40,
            // fitBoundsOptions: FitBoundsOptions(
            //   padding: EdgeInsets.all(40),
            // ),

setting ClusterRadius to 39 resolves the issue but at that radius there seems to be little point in using it

[lpongetti]

fitBoundsOptions: FitBoundsOptions(
maxZoom: 18,
),

[lpongetti]

i released 0.1.6
try this:

class _HomeState extends State<Home> {
  MapController mapController;
  List<Point> points = [
    Point(-45.463604, 167.154470),
    Point(-45.463431, 167.154813),
    Point(-45.463619, 167.155961),
    Point(-45.462799, 167.156884),
    Point(-45.462791, 167.157560),
    Point(-45.463905, 167.157861),
  ];

  ///Generates the markers that get placed on the map
  List<Marker> getMarkers() {
    List<Marker> markers = List<Marker>();

    for (Point point in points) {
      markers.add(
        Marker(
          width: 45.0,
          height: 45.0,
          anchorPos: AnchorPos.align(AnchorAlign.center),
          point: LatLng(point.x, point.y),
          builder: (context) => Container(
                child: IconButton(
                  padding: EdgeInsets.all(0),
                  icon: Icon(Icons.access_alarm),
                  color: Theme.of(context).accentColor,
                  iconSize: 45.0,
                  onPressed: null,
                ),
              ),
        ),
      );
    }

    return markers;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Map Example"),
      ),
      body: FlutterMap(
        mapController: mapController,
        options: MapOptions(
          center: LatLng(-45.463983, 167.155695),
          minZoom: 14.0,
          maxZoom: 18.0,
          zoom: 16.0,
          swPanBoundary: LatLng(-45.486373, 167.134838),
          nePanBoundary: LatLng(-45.441585, 167.176552),
          plugins: [
            MarkerClusterPlugin(),
          ],
        ),
        layers: [
          TileLayerOptions(
            tileProvider: MBTilesImageProvider.fromAsset("assets/map.mbtiles"),
            backgroundColor: Color(0xFF262626),
            maxZoom: 18.0,
            tms: true,
          ),
          MarkerClusterLayerOptions(
            maxClusterRadius: 100,
            height: 45,
            width: 45,
            anchorPos: AnchorPos.align(AnchorAlign.center),
            fitBoundsOptions: FitBoundsOptions(
              maxZoom: 18,
            ),
            markers: getMarkers(),
            showPolygon: false,
            builder: (context, markers) {
              return FloatingActionButton(
                child: Text(markers.length.toString()),
                onPressed: null,
              );
            },
          ),
        ],
      ),
    );
  }
}

[lpongetti]

0.2.0+1 correct very important bugs

[MitchellQ]

This works resolves most of the issues however there is still one marker that does not separate when you change zoom levels either manually zooming into max or by tapping a group of markers.

when you click the marker it does separate but the marker cluster icon does not fade out completely

[lpongetti]

Its not an issue but a functionality... If a cluster cant be separate because markers are too close also in max zoom possible, it will show markers with spiflderfy function.. see leaflet markercluster

[MitchellQ]

OK awesome thanks