---
title: "Create a globe map with ocean bathymetry terrain elevation | JavaScript maps SDK"
description: "Display ocean bathymetry and terrain elevation on 3D globe."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Create a globe map with ocean bathymetry terrain elevation
Show a detailed 3D globe map of the ocean’s seafloor and its bathymetry.
Increase the authenticity of your web mapping applications and data by using the globe projection and incorporating ocean relief into your maps. This will provide a greater sense of realism and depth to your visuals.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```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: [165.9043, 54.7078], // starting position [lng, lat]
zoom: 10.04, // starting zoom
bearing: -33.2,
pitch: 72,
projection: 'globe' //enable globe projection
});
map.on('load', function() {
map.addSource("bathymetry", {
type: 'raster-dem',
url: 'https://api.maptiler.com/tiles/ocean-rgb/tiles.json',
});
map.setTerrain({ source: 'bathymetry', exaggeration: 1.5 });
});
```
#### index.html
```html
Create a globe map with ocean bathymetry terrain elevation | NPM example
```
#### style.css
```css
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
```
### Basic JavaScript setup
```html
MapTiler Globe projection
```
## Related examples
### [Projection control (globe)](https://docs.maptiler.com/sdk-js/examples/globe-control/)
Tutorials
Toggle between Mercator and globe projections using map controls.
### [Globe with elevation terrain](https://docs.maptiler.com/sdk-js/examples/globe-terrain/)
Examples
Create a 3D globe map featuring terrain elevation.
### [Switch between “mercator” and “globe”](https://docs.maptiler.com/sdk-js/examples/globe-projection-switch/)
Examples
Programmatically switch between Mercator and globe map projections.
### [3D terrain map](https://docs.maptiler.com/sdk-js/examples/3d-map/)
Tutorials
Create and display 3D terrain maps on web pages.