React-mapbox-gl: Unable to hook into Mapbox API for adding 3D terrain to a map

Question

I am using react-mapbox-gl in my next application, according to the documentation:

onStyleLoad: (map, loadEvent) => void called with the Mapbox Map instance when the load event is fired. You can use the callback's first argument to then interact with the Mapbox API.

This exposes a prop which allows one to interact with Mapbox API directly, and that has worked in regards to adding a Geocoder and GeoLocation Control but does not work in regards to adding 3d terrain.

This is my map component:

import { useCallback, useEffect, useRef } from 'react'
import ReactMapboxGl, { RotationControl, ZoomControl } from "react-mapbox-gl";

import mapboxgl from 'mapbox-gl';

import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';

const mapAccess = {
  mapboxApiAccessToken: process.env.MAPBOX_ACCESS_TOKEN
}
const Map = ReactMapboxGl({
  accessToken: process.env.MAPBOX_ACCESS_TOKEN,
  logoPosition: 'bottom-right',
  pitchWithRotate: true
});

export default function MyMap() {
  return (
    <>
      <Map
        style="mapbox://styles/mapbox/streets-v9"
        onStyleLoad={(map) => {
          map.addSource('mapbox-dem', {
            'type': 'raster-dem',
            'url': 'mapbox://mapbox.mapbox-terrain-dem-v1',
            'tileSize': 512,
            'maxzoom': 14
          });

          map.setTerrain({ 'source': 'mapbox-dem', 'exaggeration': 1.5 });

          map.addLayer({
            'id': 'sky',
            'type': 'sky',
            'paint': {
              'sky-type': 'atmosphere',
              'sky-atmosphere-sun': [0.0, 0.0],
              'sky-atmosphere-sun-intensity': 15
            }
          }); map.on('load', () => {
            console.log('load')
          });

          map.addControl(
            new MapboxGeocoder({
              accessToken: mapboxgl.accessToken,
              mapboxgl: mapboxgl,
              position: 'top-right'

            })
          );

          map.addControl(
            new mapboxgl.GeolocateControl({
              positionOptions: {
                enableHighAccuracy: true
              },

              trackUserLocation: true,
              showUserHeading: true,
              showAccuracyCircle: true,
              position: 'top-left'

            })
          );

        }}
      >
        <RotationControl className="mt-12" position="top-right" />
        <ZoomControl className="mt-[2.375rem]" position="top-left" />

      </Map>
    </>
  )
}

Any idea why this is not working?

Thanks in advance!

Answer 1

sorry for the late reply, this can be achieved using the

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>
    );
  }
}

https://github.com/alex3165/react-mapbox-gl/issues/79#issuecomment-267913558