first a Source should be returned as a child of the map:

{ Source } from "react-map-gl";
    
<Map ...>
  <Source 
    id="mapbox-raster-dem"
    type="raster-dem"
    url="mapbox://mapbox.mapbox-terrain-dem-v1"
    tileSize="512"
    maxzoom="14"/>
</Map>

and now you can specify the Terrain style inside the Map component:

terrain={{
  source: "mapbox-raster-dem",
   exaggeration: 2,
}}

full code:

const MapInstance = () => {
  return (
    <Map
      ...
      terrain={{
        source: "mapbox-raster-dem",
        exaggeration: 2,
      }}
    >
      <Source
        id="mapbox-raster-dem"
        type="raster-dem"
        url="mapbox://mapbox.mapbox-terrain-dem-v1"
        tileSize="512"
        maxzoom="14"
      />
    </Map>
  );
};
Answer from EmoShawn on Stack Overflow
🌐
React Map GL
visgl.github.io › react-map-gl › examples
react-map-gl
Limit Map Interaction · Dynamic Styling · Side by Side · Terrain · Camera Transition · Zoom to Bounds · MapLibre · Clusters · Markers, Popups and Controls · Custom Cursor · Draggable Marker · Draw Polygon · Highlight By Filter · Geocoder · GeoJSON Animation ·
🌐
GitHub
github.com › visgl › react-map-gl › issues › 1282
mapbox-gl-js v2 question about terrain · Issue #1282 · visgl/react-map-gl
January 2, 2021 - Is it possible to use this function in react-map-gl framework? Thanks for the advice. map.addSource("mapbox-dem", { type: "raster-dem", url: "mapbox://mapbox.mapbox-terrain-dem-v1", tileSize: 512, maxzoom: 14, }); ### // add the DEM source as a terrain layer with exaggerated height map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });
Author   qiaoxin136
🌐
React Map GL
visgl.github.io › default (map)
default (Map) | react-map-gl
The map's default API URL for requesting tiles, styles, sprites, and glyphs. ... The maximum number of images (raster tiles, sprites, icons) to load in parallel. ... By default, every time a map component is unmounted, all internal resources associated with the underlying Map instance are released. If the map gets mounted again, a new Map instance is constructed.
🌐
Lostcreekdesigns
lostcreekdesigns.co › writing › building-a-3d-react-map-component
Building a 3D React Map Component Using Mapbox | Lost Creek Designs
The best part about the new release is just how easy it is to render 3D terrain. This post will walk you through how to create a React Map component with 3D terrain rendering. The process is more or less exactly what you would follow for creating any other Mapbox Gl JS map in React.
🌐
CodeSandbox
codesandbox.io › s › react-map-gl-3d-terrain-with-locations-as-markers-n9lo2d
react-map-gl | 3D Terrain with Locations as Markers - CodeSandbox
December 19, 2022 - react-map-gl | 3D Terrain with Locations as Markers by joshkautz using mapbox-gl, react, react-dom, react-map-gl, react-scripts
Published   Dec 18, 2022
Author   joshkautz
🌐
CodeSandbox
codesandbox.io › s › react-map-gl-3d-terrain-with-locations-as-layer-symbols-changing-map-style-introduces-problems-x1dmld
react-map-gl | 3D Terrain with Locations as Layer (Symbols) | Changing map style introduces problems - CodeSandbox
January 10, 2023 - react-map-gl | 3D Terrain with Locations as Layer (Symbols) | Changing map style introduces problems by joshkautz using @emotion/react, @emotion/styled, @mui/icons-material, @mui/material, @mui/x-date-pickers, @mui/x-date-pickers-pro, date-fns, firebase, mapbox-gl
Published   Dec 19, 2022
Author   joshkautz
🌐
Mapbox
docs.mapbox.com › all docs
Add 3D terrain to a map | Mapbox GL JS | Mapbox
Mapbox GL JS · Copy as Markdownchevron-down · View as MarkdownCopy as Markdown · This example adds 3D terrain to a map using setTerrain with a raster-dem source. It uses exaggeration to exaggerate the height of the terrain. JavaScript · React · JavaScript ·
🌐
GitHub
github.com › visgl › react-map-gl › issues › 2088
[Bug] When 3D Terrain is enabled, updating state in React causes Markers to render in their original locations, instead of on top of the terrain. · Issue #2088 · visgl/react-map-gl
December 18, 2022 - Changing state in React will still keep Markers in their existing position on the 3D Terrain. react-map-gl | 3D Terrain with Locations as Markers
Author   joshkautz
Find elsewhere
🌐
React Map GL
visgl.github.io › react-map-gl
Home | react-map-gl
Comes with additional React interfaces such as context and hooks to support custom components. Use together with e.g. deck.gl to render performant and compelling 2D and 3D WebGL visualizations on top of your MapLibre GL JS and Mapbox GL JS based maps.
🌐
React Map GL
visgl.github.io › what's new
What's new | react-map-gl
The core logic in the Mapbox GL JS wrapper has been rewritten to use Proxy to intercept camera updates. We expect the new approach to improve camera synchronization between the native controller and React props when terrain and/or non-mercator projections are used.
🌐
DEV Community
dev.to › tylerben › building-a-3d-react-map-component-using-mapbox-1igm
Building a 3D React Map Component Using Mapbox - DEV Community
March 7, 2024 - The best part about the new release is just how easy it is to render 3D terrain. This post will walk you through how to create a React Map component with 3D terrain rendering. The process is more or less exactly what you would follow for creating any other Mapbox Gl JS map in React.
🌐
Medium
medium.com › @lvas248 › implementing-interactive-and-customizable-maps-in-react-509280877905
Implementing Interactive and Customizable Maps in React | by Luis Vasquez | Medium
May 31, 2023 - Mapbox-gl is the main library that provides the advanced mapping capabilities while React Map GL is a wrapper that facilitates the integration of Mapbox GL within React apps. The dotenv dependency is a package that allows us to securely load ...
🌐
GitHub
github.com › visgl › react-map-gl › issues › 2194
[Bug] `map.flyTo` centers on the incorrect spot when terrain is enabled. · Issue #2194 · visgl/react-map-gl
June 2, 2023 - I recently tried to upgrade our version of react-map-gl to v7.0.25. During the upgrade I encountered a bug where map.flyTo goes to the incorrect location when map.setTerrain() has been called. Once at the incorrect location, if I manually move the map around, the Marker at that location stutters between the actual location and several incorrect locations. Video with terrain and incorrect behavior: https://github.com/visgl/react-map-gl/assets/127768277/fea86023-6558-457c-898a-eff71924333d
🌐
CodeSandbox
codesandbox.io › s › react-map-gl-draw-with-terrain-t3l2d
react-map-gl-draw-with-terrain - CodeSandbox
November 20, 2021 - react-map-gl-draw-with-terrain using @babel/runtime, @urbica/react-map-gl, @urbica/react-map-gl-draw, mapbox-gl-draw, react, react-dom, react-map-gl, react-map-gl-draw, react-scripts
Published   Nov 20, 2021
🌐
GitHub
github.com › visgl › react-map-gl › issues › 2196
[Bug] When 3D terrain is enabled, the clickable area of a line layer is not aligned its visual representation · Issue #2196 · visgl/react-map-gl
June 6, 2023 - I've made the layer clickable with the interactiveLayerIds prop. With react-map-gl, the line layer renders, but the clickable area of the line is not aligned with the visual representation of the layer.
Published   Jun 06, 2023
🌐
React Map GL
visgl.github.io › introduction
Introduction | react-map-gl
You can create and host your own map tiles and use them with maplibre-gl for (almost) free, if you are comfortable of using open source tools and setting up a cloud storage account. Visit Mapbox and MapLibre websites for examples and documentation. Each library offer unique features that may not exist in another. ... react-map-gl was first created by Uber's Visualization team, where Mapbox was used as a component to build powerful web tools such as geospatial analytics and self-driving data visualization.
🌐
GitHub
github.com › visgl › react-map-gl
GitHub - visgl/react-map-gl: React friendly API wrapper around MapboxGL JS · GitHub
React friendly API wrapper around MapboxGL JS. Contribute to visgl/react-map-gl development by creating an account on GitHub.
Starred by 8.4K users
Forked by 1.4K users
Languages   TypeScript 65.5% | JavaScript 32.2%
🌐
npm
npmjs.com › package › react-map-gl
react-map-gl - npm
3 weeks ago - React components for MapLibre GL JS and Mapbox GL JS. Latest version: 8.1.1, last published: 19 days ago. Start using react-map-gl in your project by running `npm i react-map-gl`. There are 482 other projects in the npm registry using react-map-gl.
      » npm install react-map-gl
    
Published   Apr 11, 2026
Version   8.1.1