[BUG] onSymbolTapped not working

[ishafiul]

Platforms

all

Version of flutter maplibre_gl

0.20.0

Bug Description

I was trying to add a SymbolLayer to place some symbols. Now, I need to add a callback function to perform some operations when those symbols are tapped. However, for some reason, the tap event is not being registered. When I use controller.addSymbol, it works, but it doesn't work for controller.addSymbolLayer.

Steps to Reproduce

1. setup MapLibreMap
2. after map load add layers with symbol info
3. call onSymbolTapped event the

Expected Results

When a symbol is tapped, the expected result is for the onSymbolTapped function to be called.

Actual Results

it will print tapped from controller.onSymbolTapped.add

Code Sample

  // Generate features for all markers
  final List<Map<String, dynamic>> features = markers.map((marker) {
    final coordinates = [marker.geometry.longitude, marker.geometry.latitude];

    // Ensure geometry coordinates are valid
    if (coordinates.contains(null)) {
      throw Exception("Invalid geometry coordinates");
    }

    return {
      'type': 'Feature',
      'geometry': {'type': 'Point', 'coordinates': coordinates},
      'properties': {
        'title': "...", // Custom properties for each marker
      },
    };
  }).toList();

// Add GeoJSON source
  await controller.addSource(
    'markerSource',
    GeojsonSourceProperties(
      data: {
        'type': 'FeatureCollection',
        'features': features,
      },
    ),
  );

// Generate a random string for the marker name
  final name = generateRandomString(5);

// Ensure base marker is created successfully
  await _baseMarker(controller: controller, name: name);

// Add the symbol layer
  await controller.addLayer(
    'markerSource', // Source ID
    'markerLayer', // Layer ID
    SymbolLayerProperties(
      iconImage: name,
      iconSize: 0.18,
      iconAnchor: 'bottom',
      textField: ' ',
      iconAllowOverlap: true,
    ),
    enableInteraction: true,
  );

  controller.onSymbolTapped.add(
        (argument) {
      print("tapped");
    },
  );

[Josh-Dovey]

Have you tried using onFeatureTapped? As you are using geoJSON this may be the method you are looking for.

onFeatureTapped works for all kinds of geoJSON features. So say you added geoJSON points, lines, polygons etc, the onFeatureTapped would run for all of those layers.

After adding your geoJSON layers to the map, run the following code to add tap events to your symbols.

controller.onFeatureTapped.add((dynamic feature, Point<double> point, LatLng latLng) async {

}

[ishafiul]

Have you tried using onFeatureTapped? As you are using geoJSON this may be the method you are looking for.

onFeatureTapped works for all kinds of geoJSON features. So say you added geoJSON points, lines, polygons etc, the onFeatureTapped would run for all of those layers.

After adding your geoJSON layers to the map, run the following code to add tap events to your symbols.

controller.onFeatureTapped.add((dynamic feature, Point<double> point, LatLng latLng) async {

}

Thanks, it's working. Inside onFeatureTapped, queryRenderedFeatures is helping me solve this problem.