React-mapbox-gl: Unable to implement 3D Buildings example

[masotime]

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.

[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.

[masotime]

Thanks @alex3165, that worked perfectly. I'll investigate the alternative you mentioned - I'm currently using a mapbox:// style URL for the style prop which is more convenient - I guess I'll need a way to merge the response JSON with the 3d building extrusion layer definition.

[poojalodhi0704]

import * as React from 'react';
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";

const Map = ReactMapboxGl({
accessToken: "pk.eyJ1IjoicG9vamFzaW5naDA3MDQiLCJhIjoiY2poZnRiaHhtMWcxdzM3dG55eHJrMTMyZyJ9.0dMdJntvy-44Aooa-fxM3A"
});

const mapStyle = {
flex: 1
};

const paintLayer = {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': {

property: 'height'

},
'fill-extrusion-base': {

property: 'min_height'

},
'fill-extrusion-opacity': 0.6
};

class ThreeDMap extends React.Component

render() {
return (
style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: "100vh",
width: "100vw"
}}
zoom={[15]}
pitch={[60]}
bearing={[-60]}
center={[-0.0824952, 51.5144951]}
>
id="3d-buildings"
sourceId="composite"
sourceLayer="building"
type="fill-extrusion"
minZoom={14}
paint={paintLayer}/>

);
}
}

export default ThreeDMap;

[Emixam23]

Hey !

Could you explain to me why it doesn't work?

import React, { Component } from 'react'
import ReactMapboxGl, { Layer } from "react-mapbox-gl";

const MapboxGl = ReactMapboxGl({
    accessToken:"XXX-XXX-XXXXX"
})

export default class Map extends Component {

    render() {
        return (
            <MapboxGl
                style="mapbox://styles/mapbox/streets-v9"
                containerStyle={{
                height: "100vh",
                width: "100vw"
                }}
                zoom={[15]}
                pitch={[60]}
                bearing={[-60]}
                center={[-0.0824952, 51.5144951]}>
                <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
                    }}>
                </Layer>
            </MapboxGl>
        );
    }

}

My toke is valid i have no error displayed in the console

PS: I am a newbie in ReactJs :/

[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

[Emixam23]

Thanks !! :)

However, what those lines mean?

export interface Props {
  // tslint:disable-next-line:no-any
  onStyleLoad?: (map: any) => any;
}

And... How to disable the scrolling? (zoom in/out)

[mklopets]

There is a scrollZoom factory parameter - see docs. The lines you copied are part of TypeScript code for static type checking. @Emixam23

[Emixam23]

The thing is, I am developing in ReactJs and not typeScript, maybe that's why I didn't get it at first :)