Skip to content

Widgets are removed too early from viewport #243

@YukiAttano

Description

@YukiAttano

I've noticed that Marker widgets created by the MarkerClusterLayerWidget are removed too early from the viewport.
This only happens for the right screen side.
The example below shows, that the MarkerLayer from flutter_map works correct:

Example Code
 @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        initialCenter: LatLng(_center.latitude, _center.longitude),
        initialZoom: 9.2,
      ),
      children: [
        TileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', // For demonstration only
          userAgentPackageName: "com.example", // Add your app identifier
        ),
        MarkerLayer(
          markers: widget.marker.map(
            (e) {
              return Marker(
                width: 200,
                height: 170,
                rotate: true,
                alignment: Alignment.topRight,
                point: LatLng(e.latitude, e.longitude),
                child: Visibility(visible: true, child: _Marker()),
              );
            },
          ).toList(),
          //  markers: widget.marker.map(
          //    (e) {
          //      return Marker(
          //        height: 5,
          //        width: 5,
          //        point: LatLng(e.latitude, e.longitude),
          //        child: DecoratedBox(
          //          decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
          //        ),
          //      );
          //    },
          //  ).toList(),
        ),
        MarkerClusterLayerWidget(
          options: MarkerClusterLayerOptions(
            maxClusterRadius: 100,
            size: const Size(40, 40),
            alignment: Alignment.center,
            padding: const EdgeInsets.all(150),
            rotate: true,
            spiderfyCluster: true,
            zoomToBoundsOnClick: true,
            showPolygon: false,
            markerChildBehavior: true,
            markers: widget.marker.map(
              (e) {
                return Marker(
                  width: 200,
                  height: 170,
                  rotate: true,
                  alignment: Alignment.topRight,
                  point: LatLng(e.latitude, e.longitude),
                  child: _Marker(),
                );
              },
            ).toList(),
            builder: (context, markers) {
              return DecoratedBox(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.red,
                ),
                child: Center(
                  child: Text(
                    markers.length.toString(),
                    style: const TextStyle(color: Colors.white),
                  ),
                ),
              );
            },
            maxZoom: 15,
            centerMarkerOnClick: false,
          ),
        ),
      ],
    );
  }
_Marker Widget
class _Marker extends StatelessWidget {
  const _Marker({super.key});

  @override
  Widget build(BuildContext context) {
    return ColoredBox(
      color: Colors.transparent,
      child: Align(
        alignment: Alignment.bottomLeft,
        child: IntrinsicWidth(
          child: Card(
            margin: EdgeInsets.zero,
            color: Colors.transparent,
            child: Padding(
              padding: EdgeInsets.all(4),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.hail),
                          Icon(Icons.search),
                        ],
                      ),
                      Text(
                        "ID: 10",
                        textAlign: TextAlign.right,
                      ),
                    ],
                  ),
                  Flexible(
                    child: Text("Example Text"),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

This video shows the behavior of the cluster layer:

cluster_layer_only.mp4

In this video, the cluster layer and the default tile layer are enabled both at the same time
so that the marker of both layer are overlapping.
The difference in opacity shows, that one marker is removed while the other correctly stays on screen.

both_layer.mp4

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions