Multiple Popups Shown in Single Cluster when Zoomed Out

[SyedMuhammadRehan]

I am clustering the markers using your package, and it is working fine. However, I am facing an issue where initially, when it creates clusters, it works fine and shows a single popup. When we zoom out and create a single cluster, it shows multiple popups, as shown in the picture.

Here is my code. Please let me know if I am doing something wrong and provide guidance on how to resolve this issue.

  MarkerClusterLayerWidget(
              options: MarkerClusterLayerOptions(
                  disableClusteringAtZoom: 10,
                  padding: const EdgeInsets.only(top: 0),
                  spiderfyCircleRadius: 10,
                  maxClusterRadius: 40,
                  size: const Size(40, 40),
                  popupOptions: PopupOptions(
                    popupSnap: PopupSnap.markerTop,
                    popupController: _popupController,
                    popupBuilder: (_, markerss) => Padding(
                      padding: const EdgeInsets.only(top: 10),
                      child: Container(
                        margin: const EdgeInsets.only(top: 30),
                        decoration: BoxDecoration(
                            border: Border.all(
                                width: context.isDarkTheme ? 1 : 0,
                                color: context.isDarkTheme
                                    ? Colors.black
                                    : const Color(0xffECECEC)),
                            color: context.isDarkTheme
                                ? Colors.black
                                : Colors.white,
                            borderRadius: BorderRadius.circular(10)),
                        child: ConstrainedBox(
                          constraints: const BoxConstraints(
                            minWidth: 100, // Minimum width of the popup
                            maxWidth:
                                300, // Maximum width, after this it will not grow
                            minHeight: 50, // Minimum height of the popup
                            maxHeight:
                                400, // Maximum height, after this it will become scrollable
                          ),
                          child: Stack(
                            children: [
                              SingleChildScrollView(
                                child: Container(
                                  // Add top margin for the scrollable content
                                  padding: const EdgeInsets.all(8),
                                  child: Column(
                                    mainAxisSize: MainAxisSize.min,
                                    children: [
                                      const SizedBox(
                                          height:
                                              20), // Space for the close button
                                      //   content here
                                      for (var i = 0;
                                          i < markerssss.length;
                                          i++)
                                        Text("${markerssss[i]}"),
                                      // Add more content if needed
                                    ],
                                  ),
                                ),
                              ),
                              Positioned(
                                right: 0,
                                top: 0,
                                child: GestureDetector(
                                  onTap: () => _popupController.hideAllPopups(),
                                  child: const Icon(Icons.close,
                                      color: Colors.black),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                  markers: markers,
                  builder: (context, multimark) => MouseRegion(
                        onHover: (event) async {
                          markerssss.clear();
                          _popupController.showPopupsOnlyFor(multimark);

                          markerssss.addAll(multimark);

                          // Show popup for the first marker in the cluster
                        },
                        // onExit: (event) {
                        // _popupController.hideAllPopups(); // Hide popup
                        // },
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.blue,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Center(
                            child: Text(
                              multimark.length.toString(),
                              style: const TextStyle(color: Colors.white),
                            ),
                          ),
                        ),
                      )),
            ),

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.