Skip to main content

Offset the vanishing point using padding

Offset the center or vanishing point of the map to reduce distortion when floating elements are displayed over the map.

<!DOCTYPE html>
<meta charset="utf-8">
<title>Offset the vanishing point using padding</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="" rel="stylesheet">
<script src=""></script>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
.rounded-rect {
background: white;
border-radius: 10px;
box-shadow: 0 0 50px -25px black;

.flex-center {
position: absolute;
display: flex;
justify-content: center;
align-items: center;

.flex-center.left {
left: 0px;

.flex-center.right {
right: 0px;

.sidebar-content {
position: absolute;
width: 95%;
height: 95%;
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
color: gray;

.sidebar-toggle {
position: absolute;
width: 1.3em;
height: 1.3em;
overflow: visible;
display: flex;
justify-content: center;
align-items: center;

.sidebar-toggle.left {
right: -1.5em;

.sidebar-toggle.right {
left: -1.5em;

.sidebar-toggle:hover {
color: #0aa1cf;
cursor: pointer;

.sidebar {
transition: transform 1s;
z-index: 1;
width: 300px;
height: 100%;

The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
The toggleSidebar() function removes this class from the element in order to expand it.
.left.collapsed {
transform: translateX(-295px);

.right.collapsed {
transform: translateX(295px);

<div id="map">
<div id="left" class="sidebar flex-center left collapsed">
<div class="sidebar-content rounded-rect flex-center">
Left Sidebar
<div class="sidebar-toggle rounded-rect left" onclick="toggleSidebar('left')">
<div id="right" class="sidebar flex-center right collapsed">
<div class="sidebar-content rounded-rect flex-center">
Right Sidebar
<div class="sidebar-toggle rounded-rect right" onclick="toggleSidebar('right')">

mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const center = [-77.01866, 38.888];
const map = new mapboxgl.Map({
container: 'map',
zoom: 12.5,
center: center,
pitch: 60,
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: 'mapbox://styles/mapbox/streets-v12'

new mapboxgl.Marker().setLngLat(center).addTo(map);

function toggleSidebar(id) {
const elem = document.getElementById(id);
// Add or remove the 'collapsed' CSS class from the sidebar element.
// Returns boolean "true" or "false" whether 'collapsed' is in the class list.
const collapsed = elem.classList.toggle('collapsed');
const padding = {};
// 'id' is 'right' or 'left'. When run at start, this object looks like: '{left: 300}';
padding[id] = collapsed ? 0 : 300; // 0 if collapsed, 300 px if not. This matches the width of the sidebars in the .sidebar CSS class.
// Use `map.easeTo()` with a padding option to adjust the map's center accounting for the position of sidebars.
padding: padding,
duration: 1000 // In ms. This matches the CSS transition duration property.

map.on('load', () => {

Was this example helpful?