Display a 3D terrain map
This tutorial demonstrates how to create a 3D terrain map and display it on a web page using MapTiler Cloud.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next it’s up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
, and you can change the look of the map to any of our styles, or yours, by updating thestyle
. See what’s available here. -
Install the npm package.
-
Include the CSS file.
If you have a bundler that can handle CSS, you can
import
the CSS or include it with a<link>
in the head of the document via the CDN -
Include the following code in your JavaScript file (Example: app.js).
-
Add options to the map to load the terrain elevation to the map.
const map = new maptilersdk.Map({ container: 'map', // container id style: maptilersdk.MapStyle.OUTDOOR, center: [8.94738, 45.97812], // starting position [lng, lat] zoom: 14, // starting zoom terrain: true, });
-
Add options to the map to load the terrain control to the map. The
terrainControl
shows a button to enable/disable the 3D terrain (does not tilt the map).const map = new maptilersdk.Map({ container: 'map', // container id style: maptilersdk.MapStyle.OUTDOOR, center: [8.94738, 45.97812], // starting position [lng, lat] zoom: 14, // starting zoom terrain: true, terrainControl: true, });
-
Add options to the map to load the map with a 3D view.
const map = new maptilersdk.Map({ container: 'map', // container id style: maptilersdk.MapStyle.OUTDOOR, center: [8.94738, 45.97812], // starting position [lng, lat] zoom: 14, // starting zoom terrain: true, terrainControl: true, pitch: 70, bearing: -100.86, maxPitch: 85, maxZoom: 14 });
View complete source code on GitHub