MapLibreGL.VectorSource onPress returns no geometry on Android

[jimmyasyraf]

Steps to Trigger Behavior

1. On Android, add a VectorSource and provide an onPress prop like so

<MapLibreGL.VectorSource onPress={(event) => console.log(event.features)}>

2. Click on a feature and check the event returned

Expected Behavior

For each feature in event.features there should be geometry

Actual Behavior

For each feature in event.features it returns null for Android. In iOS it returns the geometry with no problem.

Environment

• Platform: Android (iOS works fine)
• OS version: Android 14
• Device type: Pixel 3A
• Emulator or Simulator: Yes and Physical device as well
• Development OS: macOS Sonoma 14.5
• @maplibre/maplibre-react-native Version: 9.0.1
• react-native Version: 0.73

Additional context

The event for onPress for <MapLibreGL.ShapeSource> for Android is fine too, it returns the geometry

EDIT: I'm only referring to the geometry returned in the onPress event (for Android). Visually, the layer is displayed perfectly fine in the map.

[KiwiKilian]

I can't reproduce with the current v10 pre-releases, can you try upgrading?

[jimmyasyraf]

@KiwiKilian I already did. I previously tried upgrading to 10.0.0-beta.1 and it still happens and now with the just released 10.0.0-beta.2, also still happens - onPress's event.features still returning null.

If it's not confidential, may I know what's the url or tileUrlTemplates (as well as the sourceLayerID and coordinate to zoom to) that you're using so that I can confirm that I can't reproduce it like you did? Then perhaps I can compare your vector tiles with mine, it's possible that my vector tiles are problematic. Nonetheless it still doesn't solve why my vector tile works fine for me on iOS but not on Android.

[KiwiKilian]

See the here updated example: https://github.com/maplibre/maplibre-react-native/pull/524/files#diff-4084478957dc154afe7df0124654c8135ef0cbfdf2f3916d8b249b0b95c821e5

You can try withing your app like this:

<MapLibreGL.MapView style={{ flex: 1 }}>
    <MapLibreGL.VectorSource
      id="maplibre-tiles"
      url="https://demotiles.maplibre.org/tiles/tiles.json"
      onPress={(event) => {
        console.log(
          `VectorSource onPress: ${event.features}`,
          event.features,
        );
      }}
    >
      <MapLibreGL.FillLayer
        id="countries"
        sourceLayerID="countries"
        style={{
          fillColor: "#ffffff",
          fillAntialias: true,
        }}
      />
    </MapLibreGL.VectorSource>
</MapLibreGL.MapView>

[KiwiKilian]

Ok, I've tested a bit more and it seems to be flaky in my example. Sometimes there is a geometry, other times it's null.

[jimmyasyraf]

@KiwiKilian yes I tested your example and was about to tell you that. Thanks for confirming that you're able to see it too

[github-actions]

🎉 This issue has been resolved in version 10.0.0-beta.9 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[tyrauber]

Thanks @jimmyasyraf for catching, debugging and fixing this! Most appreciated.