---
title: "How to switch map projection programmatically | JavaScript maps SDK"
description: "Programmatically switch between Mercator and globe map projections."
---
> 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.
# How to switch map projection programmatically
This example shows how to switch between “mercator” and “globe” map projection programmatically.
The choice between Mercator and Globe can be done at different levels and moments in the lifecycle of the map, yet, unless stated otherwise, **Mercator remains the default**.
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, 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: MapStyle.SATELLITE,
center: [-70.8, 0], // starting position [lng, lat]
zoom: 1, // starting zoom
projection: 'globe' //enable globe projection
});
document.getElementById('projection').addEventListener('click', function () {
const projection = map.getProjection()
if (projection.type === 'globe') {
map.setProjection("mercator", { persist: true });
} else {
map.setProjection("globe", { persist: true });
}
});
```
#### index.html
```html
How to switch map projection programmatically | NPM example
```
#### style.css
```css
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
#projection {
display: block;
position: relative;
margin: 0px auto;
width: 50%;
height: 40px;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: center;
color: #fff;
background: #ee8a65;
}
```
### 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 projection](https://docs.maptiler.com/sdk-js/examples/globe-projection/)
Examples
Enable the 3D globe map projection in your application.
### [Add a 3D model to globe using MapTiler 3D JS](https://docs.maptiler.com/sdk-js/examples/globe-3d-model/)
Examples
Integrate 3D models into your interactive globe map surface.
### [Globe with elevation terrain](https://docs.maptiler.com/sdk-js/examples/globe-terrain/)
Examples
Create a 3D globe map featuring terrain elevation.