---
title: "How to display a map with custom projections | JavaScript maps SDK"
description: "Display a map with custom 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 display a map with custom projections
This example shows how to configure Equal Earth and Equirectangular projections using the SDK JS preview build.
Warning
The features demonstrated here rely on a preview build of the JS SDK.
You can choose between pure projections (applied at all zoom levels) and presets (which automatically transition to Mercator on deep zoom). Set the type property to `"equal"` or `"geodetic"` for the adaptive presets, or use `"equal-earth"` and `"equirectangular"` for the pure projections.
### NPM module setup
```bash
npm install --save @maptiler/sdk@4.0.3-projection.alpha.1
```
#### 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',
style: MapStyle.STREETS,
center: [0, 20],
zoom: 1.5
});
map.on("style.load", () => {
// 'equal', 'equal-earth', 'geodetic', 'equirectangular'
map.setProjection({ type: 'equal' });
});
```
#### index.html
```html
Map projections
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
```
### Basic JavaScript setup
```html
Map projections
```
## Related examples
### [Globe projection](https://docs.maptiler.com/sdk-js/examples/globe-projection/)
Examples
Enable the 3D globe map projection in your application.
### [Switch between “mercator” and “globe”](https://docs.maptiler.com/sdk-js/examples/globe-projection-switch/)
Examples
Programmatically switch between Mercator and globe map projections.
### [Projection control (globe)](https://docs.maptiler.com/sdk-js/examples/globe-control/)
Tutorials
Toggle between Mercator and globe projections using map controls.