---
title: "Offset the vanishing point using padding | JavaScript maps SDK"
description: "Offset the map vanishing point using padding."
---
> 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.
# Offset the vanishing point using padding
Offset the center or [vanishing point](https://en.wikipedia.org/wiki/Vanishing_point) of the map to reduce distortion when floating elements are displayed over the map.
### 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 center = [-77.01866, 38.888];
const map = new Map({
container: 'map',
zoom: 12.5,
center: center,
pitch: 60,
style: MapStyle.STREETS
});
new maptilersdk.Marker().setLngLat(center).addTo(map);
function toggleSidebar(id) {
const elem = document.getElementById(id);
const classes = elem.className.split(' ');
const collapsed = classes.indexOf('collapsed') !== -1;
const padding = {};
if (collapsed) {
// Remove the 'collapsed' class from the class list of the element, this sets it back to the expanded state.
classes.splice(classes.indexOf('collapsed'), 1);
padding[id] = 300; // In px, matches the width of the sidebars set in .sidebar CSS class
map.easeTo({
padding: padding,
duration: 1000 // In ms, CSS transition duration property for the sidebar matches this value
});
} else {
padding[id] = 0;
// Add the 'collapsed' class to the class list of the element
classes.push('collapsed');
map.easeTo({
padding: padding,
duration: 1000
});
}
// Update the class list on the element
elem.className = classes.join(' ');
}
map.on('load', function () {
toggleSidebar('left');
});
```
#### index.html
```html
Offset the vanishing point using padding
Left Sidebar
→
Right Sidebar
←
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Offset the vanishing point using padding
Left Sidebar
→
Right Sidebar
←
```
## Related examples
### [Display a popup on click](https://docs.maptiler.com/sdk-js/examples/popup-on-click/)
Examples
Display a popup when a user clicks a symbol.
### [Get POIs information on click](https://docs.maptiler.com/sdk-js/examples/pois-info/)
Examples
Get POI information by clicking the map.