controller.onFeatureTapped does not work as expected

[metafounder]

I've followed the example/lib/layer.dart, however after adding a circle layer and a symbol layer is not possible to click on features.
It is worth mentioning that onCircleTapped and onSymbolTapped (with addCircle and addSymbol ) seem to be working fine.

I've tested only web.

[✓] Flutter (Channel stable, 2.5.2, on macOS 11.6 20G165 darwin-x64, locale en-GB)
• Flutter version 2.5.2 at /engineering/flutter/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 3595343e20 (7 weeks ago), 2021-09-30 12:58:18 -0700
• Engine revision 6ac856380f
• Dart version 2.14.3

mapbox_gl: ^0.14.0

Expected:

Added a controller.onFeatureTapped => when hover over circles and symbols (layers) the mouse cursor changes to pointer and click event must be caught.

Actual:

When hover over circles and symbols the mouse cursor does not change to pointer and click events on features do not seem possible.

[felix-ht]

There are two options to add vector data to the map.

The first one is trough annotations. These are Circle Line Fill and Symbol. You do this by calling controller.addLine controller.addCircle and so on. Tap events for this are received trough adding a callback to controller.onLineTapped controller.onCircleTapped - for annotations you will never receive a controller.onFeatureTapped event.

The other option is to go trough geojson. Add a source with controller.addGeoJsonSource and then add the layers based on it e.g. with controller.addLineLayer. If you can see the layer on the map, click events on features can be received through controller.onFeatureTapped. If you want to use the results in you app be sure that all features have a unique "id" field, so you can match it to whatever you have in the app.

[metafounder]

The annotations => working as expected, no issues there.

However, the geojson path is the one I took.

1. defined a FeatureCollection - with unique int ids:

final _points = {
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "id": 1,
        "properties": <String, dynamic>{},
        "geometry": {
          "type": "Point",
          "coordinates": ["10.184", "50.684"]
        }
      },
    ]
  };

2. added it into onStyleLoaded:

Future<void> onStyleLoaded() async {
    await controller.addGeoJsonSource("points", _points);

    await controller.addCircleLayer(
      "points",
      "circles",
      CircleLayerProperties(
        circleRadius: 10,
        circleColor: Colors.yellow.toHexStringRGB(),
      ),
    );
 }

3. then :

  void onMapCreated(MapboxMapController controller) {
    this.controller = controller;
    controller.onFeatureTapped.add(onFeatureTap);
  }

4. lastly:

  void onFeatureTap(dynamic featureId) {
    print(featureId.toString());
  }

Result:

I see the circle layer on the map, however no way to click on it or receive clicks on features through controller.onFeatureTapped.

Again: this is strictly the web I am referring to. I did not test this on mobile.

I noticed something which may be useful: if I set up onMapClick => clicking on my circle actually catches a map click event and onMapClick gets called.

[metafounder]

@felix-ht which version of mapbox-gl-js are you using?

Is there a place where I can find compatibility versions list between mapbox_gl and mapbox-gl-js?

[felix-ht]

if you want to you can test with https://github.com/flutter-mapbox-gl/maps/tree/fix-web-issues and check if this fixes your issues - this is certainly faster than waiting for it to be merged and released

[metafounder]

I confirm that the issue is now fixed on fix-web-issues . I will use this for now, it will be great if this will be in the next release. thanks felix