In reconstructing this example inside React Native Mapbox, it appears that queryRenderedFeaturesAtPoint does not select anything if the "base" of the polygon is not directly pressed. This mirrors the original issue that the Mapbox GL JS library had (https://github.com/mapbox/mapbox-gl-js/issues/3122).
Is there something I am missing here, or can anyone else confirm if this is not able to be done in React Native Mapbox?
Thanks. Some relevant basic code is included below.
const onPress = async (e) => {
var features = await _map.current.queryRenderedFeaturesAtPoint([e.properties.screenPointX, e.properties.screenPointY], null, ['3d-buildings']);
console.log(features);
if(features.features) {
console.log(features.features)
}
}
<MapboxGL.MapView
ref={_map}
style={styles.map}
styleURL="mapbox://styles/labs-sandbox/ck2aiw9cl37jr1co3qfrdazd4"
onPress={(e) => onPress(e)}
>
<MapboxGL.Camera
defaultSettings={{
centerCoordinate : [-74.0066, 40.7135],
zoomLevel : 15.5,
pitch : 80,
bearing: -17.6,
}}
/>
<MapboxGL.FillExtrusionLayer
id="3d-buildings"
sourceID="composite"
sourceLayerID="buildings_plus"
filter={["==", "extrude", "true"]}
minZoomLevel={14}
style={{
fillExtrusionColor: [
"match",
["feature-state", "highlight"],
"true",
"#F0F",
"#09F"
],
// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
fillExtrusionHeight: [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "height"]
],
fillExtrusionBase: [
"interpolate",
["linear"],
["zoom"],
15,
0,
15.05,
["get", "min_height"]
],
fillExtrusionOpacity: 0.6
}}
/>
</MapboxGL.MapView>
Hello! I am working on a project where we are extruding 3D buildings and allowing the user to press to select/highlight a given building.
There are a few Mapbox GL JS examples that do this, where we can select the building by clicking on the extrusion. See https://demos.mapbox.com/buildings-picker-3d/#17.63/40.714793/-73.991739/16/60 for an example.
In reconstructing this example inside React Native Mapbox, it appears that
queryRenderedFeaturesAtPoint
does not select anything if the "base" of the polygon is not directly pressed. This mirrors the original issue that the Mapbox GL JS library had (https://github.com/mapbox/mapbox-gl-js/issues/3122).Is there something I am missing here, or can anyone else confirm if this is not able to be done in React Native Mapbox?
Thanks. Some relevant basic code is included below.