Querying features from imported style

[ajzbc]

Hello!

I'm trying to query layers that are included with the styleURL.

Basic example:

export default function MapScreen() {
  const map = useRef<MapView>(null);

  return (
    <View style={styles.page}>
      <View style={styles.container}>
        <MapView
          ref={map}
          style={styles.map}
          styleURL={"mapbox://styles/..../....."}
          onPress={async (e) => {
            const position =
              e.geometry.type === "Point"
                ? e.geometry.coordinates
                : [-106.452487, 47.962584];

            console.log(position);

            const res = await map.current?.queryRenderedFeaturesAtPoint(
              position
            );

            console.log(res);
          }}
        ></MapView>
      </View>
    </View>
  );
}

I would assume this would log features in the layers, but nothing:

{"features": [], "type": "FeatureCollection"}

Am I understanding this API wrong or is there another way layers should be queried?

https://rnmapbox.github.io/docs/components/MapView#queryrenderedfeaturesatpointcoordinate-filter-layerids

Thanks!

[ajzbc]

Ahh!

The query is expecting the screen coordinates...

onPress={async ({ properties }) => {
  if (!properties) {
    return;
  }

  const res = await map.current?.queryRenderedFeaturesAtPoint([
    properties.screenPointX,
    properties.screenPointY,
  ]);

  console.log(res);
}}