Working with a Stack and positioned elements

[travislondon]

I am trying to create positioned widgets on top of the map. Below is an example.

What I see is that Mapbox canvas is "greedy" and mouse events are ignored when over some of the positioned elements. The same is true for the cursor. For instance when over an element that is on top of the Map the cursor remains as the "hand". In the example you will notice some calls to disable some of this, but event with this the cursor never changes.

Is there a better way to add custom widgets within the Map area? I notice that the attribution and Mapbox buttons work fine.

Looking for guidance or direction on how I can contribute a fix for this if this is indeed a bug.

Stack(children: [
                          MapboxMap(
                            accessToken: _accessToken,
                            dragEnabled: !super.disableMouseInteraction,
                            scrollGesturesEnabled:
                                !super.disableMouseInteraction,
                            doubleClickZoomEnabled:
                                !super.disableMouseInteraction,
                            myLocationEnabled: !kIsWeb,
                            zoomGesturesEnabled: !super.disableMouseInteraction,
                            rotateGesturesEnabled:
                                !super.disableMouseInteraction,
                            tiltGesturesEnabled: !super.disableMouseInteraction,
                            onStyleLoadedCallback: _onStyleLoaded,
                            styleString:
                                'mapbox://styles/mapbox/$style', // Mapbox map style URL
                            onMapCreated: (controller) {
                              _controller = controller;
                            },
                            compassEnabled: false,
                            initialCameraPosition: CameraPosition(
                              target: center,
                              zoom: 3.8,
                            ),
                            minMaxZoomPreference:
                                MinMaxZoomPreference(super.minZoom, null),
                          ),
                          Align(
                              alignment: Alignment.topCenter,
                              child: Padding(
                                padding: const EdgeInsets.only(top: 16.0),
                                child: GeoSearch(handleSearch: performSearch),
                              ))

[Andrew-Ludeke]

Hi, Travis,

I had a similar problem to yours when compiling for web. I'm not sure if this is the same problem you're facing, but I'll outline what I found in case it helps.

From what I could tell, flutter-mapbox-gl renders the map inside an HtmlElementView widget, and it's this widget which is the root cause for the greedy consumption of gestures. This problem is prevalent enough to warrant its own plugin: Pointer Interceptor. Wrapping the overlaid controls in a PointerInterceptor as prescribed by this package fixed the problem for me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[aardrop]

@Andrew-Ludeke using that plugin work for you or is it something we need to add to the code base?