Unable to implement 3D Buildings example

The current <Layer> element doesn’t provide a way to implement the map layer as described in https://www.mapbox.com/mapbox-gl-js/example/3d-buildings/.

For example, there’s no way to add type: 'fill-extrusion' to the <Layer /> element as it is not one of the recognized values for the type prop. The source prop also cannot be a string.

[mklopets]

The code in this thread is about an older version of react-mapbox-gl. Please see the 3d-map demo on our demos page @Emixam23

[alex3165]

Hey @masotime, sorry for the late reply, this can be achieved using the layerOptions property :

export default class ThreeDBuilding extends React.Component {
  render() {
    return (
      <ReactMapboxGl
        style={style}
        accessToken={accessToken}
        containerStyle={styles.container}
      >
        <Layer
          id="3d-buildings"
          sourceId="composite"
          layerOptions={{
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15
          }}
          paint={{
            'fill-extrusion-color': '#aaa',
            'fill-extrusion-height': {
                'type': 'identity',
                'property': 'height'
            },
            'fill-extrusion-base': {
                'type': 'identity',
                'property': 'min_height'
            },
            'fill-extrusion-opacity': .6
          }}/>
      </ReactMapboxGl>
    );
  }
}

Although I would suggest you not to implement this kind of layer using react-mapbox-gl but I would define it in the style JSON file that you pass down to the style props of the Map. The Layer and Feature component should only be used for dynamic elements on the map, the ones that need update logic or user interactions.