[Bug]: queryRenderedFeaturesAtPoint is inconsistent when using onLongPress on MapView

[fractalscape13]

Mapbox Implementation

Mapbox

Mapbox Version

default

React Native Version

0.73.2

Platform

iOS, Android

@rnmapbox/maps version

10.1.14

Standalone component to reproduce

import React from 'react';
import {SafeAreaView} from 'react-native';
import Mapbox, {MapView} from '@rnmapbox/maps';

const MAPBOX_ACCESS_TOKEN = 'your-mapbox-access-token';
const BASE_STYLE = 'mapbox://styles/mapbox/streets-v11';

Mapbox.setAccessToken(MAPBOX_ACCESS_TOKEN);

function App(): React.JSX.Element {
  const mapRef = React.useRef<MapView>(null);
  const onLongPress = async (e: { geometry: any; }) => {
    const geometry = e.geometry;
    const features = await mapRef.current?.queryRenderedFeaturesAtPoint(
      [geometry.coordinates[0], geometry.coordinates[1]],
      {layers: ['waterbody_ids_layer']},
    );
    const waypointWaterbodyId =
      features?.features[0]?.properties?.waterbody_id || undefined;
    console.log('waypointWaterbodyId-->>>', waypointWaterbodyId);
  };

  return (
    <SafeAreaView style={{flex: 1}}>
      <MapView
        ref={mapRef}
        style={{flex: 1}}
        onLongPress={onLongPress}
        styleURL={BASE_STYLE}>
        <Mapbox.Camera
          animationMode="flyTo"
          defaultSettings={{
            centerCoordinate: [-93.5667, 44.9333],
            zoomLevel: 12,
            pitch: 0,
            heading: 0,
          }}
        />
        <Mapbox.VectorSource
          onPress={e =>
            console.log(
              'VectorSource-->>>',
              e.features[0]?.properties?.waterbody_id,
            )
          }
          id="waterbody_ids"
          url="mapbox://omniafishing.omnia-waterbodies"
          tileUrlTemplates={[
            `https://api.mapbox.com/v4/omniafishing.omnia-waterbodies/{z}/{x}/{y}.vector.pbf?access_token=${MAPBOX_ACCESS_TOKEN}`,
          ]}>
          <Mapbox.FillLayer
            id="waterbody_ids_layer"
            sourceLayerID="waterbodies"
            style={{
              fillOpacity: 1,
              fillColor: 'hotpink',
            }}
          />
        </Mapbox.VectorSource>
      </MapView>
    </SafeAreaView>
  );
}

export default App;

Observed behavior and steps to reproduce

The "onPress" method directly on the "Mapbox.VectorSource" component works as expected. I get the id logged correctly every time, very consistently.

The "onLongPress" on the parent "MapView" component calls "queryRenderedFeaturesAtPoint" and tries to pull the data from the VectorSource layer. It usually returns "undefined", but if I zoom in to a lake and move around a bit, eventually the longPress will give me the correct data. Then sometimes it will give me the same data when I am not pressing on the layer. Then it will go back to undefined. It's inconsistent but if you zoom in and move around a bit, it will work sometimes.

Expected behavior

Expected behavior is that the queryRenderedFeaturesAtPoint will return the data from the point where the long press happened from the VectorSource layer referenced by id in the "layers" key/value par.

Notes / preliminary analysis

No response

Additional links and references

No response

[vigor-13]

I found a solution for this issue. The problem is that iOS and Android handle screen coordinates differently in the Mapbox SDK.

Here's how to fix it:

const getFeature = async (point: [number, number]) => {
  const mapRef = mapRef.current;
  
  // Fix for queryRenderedFeaturesAtPoint coordinate issue on Android
  // iOS and Android process screen coordinates differently
  let queryPoint = point;
  if (Platform.OS === 'android') {
    // Convert screen coords to geo coords and back to screen coords
    // This ensures proper internal coordinate transformation in the SDK
    const geoCoord = await mapRef.getCoordinateFromView(point);
    const screenPoint = await mapRef.getPointInView(geoCoord);
    queryPoint = [screenPoint[0], screenPoint[1]];
  }
  
  const feature = await mapRef.queryRenderedFeaturesAtPoint(queryPoint);
  return feature;
};

This works because the double conversion through getCoordinateFromView and getPointInView forces the Android SDK to correctly transform the coordinates through its internal coordinate systems.

[fractalscape13]

After revisiting this, it looks like the issue for me was that when zoomed out, the press is targeting non-waterbody layers (parks, protected areas, etc) possibly because the waterbody layer isn't actually rendered, even though I can see it.