Create a globe map with 3D terrain elevation

Show a detailed 3D (three-dimensional) globe map with terrain elevation. Creating a 3D terrain globe view of your map requires only two lines of code. Simply include the projection and the terrain option within the map constructor.

Enhance the authenticity of your web mapping applications and data by using the globe projection and incorporating terrain relief into your maps. This will provide a greater sense of realism and depth to your visuals.


npm install --save @maptiler/sdk

main.js

import { Map, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
  container: 'map', // container's id or the HTML element to render the map
  style:  'ocean',
  maxPitch: 85,
  center: [-115.54098, 51.2018],
  zoom: 14,
  pitch: 83,
  bearing: 37.1,
  projection: 'globe', //enable globe projection
  terrain: true, //add terrain elevation
  terrainExageration: 1.5
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Create a globe map with 3D terrain elevation | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapTiler Globe projection</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
      maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
      const map = new maptilersdk.Map({
        container: 'map', // container's id or the HTML element to render the map
        style:  'ocean',
        maxPitch: 85,
        center: [-115.54098, 51.2018],
        zoom: 14,
        pitch: 83,
        bearing: 37.1,
        projection: 'globe', //enable globe projection
        terrain: true, //add terrain elevation
        terrainExageration: 1.5
      });
  </script>
</body>
</html>