Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

OnPress to select 3D extruded layer (raycasting) #1704

Open
tempranova opened this issue Mar 5, 2021 · 0 comments
Open

OnPress to select 3D extruded layer (raycasting) #1704

tempranova opened this issue Mar 5, 2021 · 0 comments

Comments

@tempranova
Copy link

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 (mapbox/mapbox-gl-js#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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant