paddingTopLeft - Reserve space on the map for content

Center the map, allowing for an overlay

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>paddingTopLeft - Reserve space on the map for content</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
#container {
  position:relative;
  height:100%;
  }
#content {
  background:#000;
  background:rgba(0, 0, 0, 0.5);
  width:200px;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  z-index:100000;
  }
</style>

<div id='container'>
  <div id='content'>Content</div>
  <div id='map'></div>
</div>

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map')
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/outdoors-v11'));

map.fitBounds([
    [39.0, -77.18],
    [38.72, -76.89]
], {
    // this preserves the space from the left of the real map to 200px
    // for content. the format is [x, y]. See
    // http://leafletjs.com/reference.html#map-paddingtopleft
    // for full documentation and other options
    paddingTopLeft: [200, 0]
});
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example