How to display a 3D terrain layer in Deck.gl

This example shows how to create a 3D map in Deck.gl. By utilizing MapTiler’s RGB terrain, you can enhance your maps by incorporating a realistic 3D terrain layer. Implementing the code provided below the map will allow you to achieve this effect.

^{Hold down the shift key to rotate the map}

Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

Related examples

Get Started

Example

Get Started with Deck.gl JavaScript library: Learn how to display vector tiles in Deck.gl.

GeoJSON

Example

This example illustrates the process of showcasing a GeoJSON layer in Deck.gl. In this particular instance, we utilize an arc layer to visually represent the connections between the various features of the GeoJSON layer.

Interleaved

Example

This example shows how to use Deck.gl layers in a MapTiler SDK JS map. This example shows how to display a Deck.gl GeoJSON layer, along with an Deck.gl arc layer on top of your MapTiler maps.

Buildings

Example

This Deck.gl example demonstrates how to load a Vector Tiles layer. The example shows the building layer that comes from the MapTiler Planet tileset.

POIs info

Example

This example demonstrates the process of loading an MVT layer of Points of Interest (POIs) using Deck.gl and displaying a tooltip. The example shows the poi layer that comes from the MapTiler Planet tileset.