Pan and vertical zoom

Add custom controls for pan and zoom movement on a map.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pan and vertical zoom</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.ui-control {
  font:bold 12px/28px Helvetica, sans-serif;
  text-align:center;
  position:absolute;
  top:10px;
  left:10px;
  z-index:1000;
  }

.ui-pan {
  position:absolute;
  top:0;
  left:0;
  z-index:1000;
  }
  .ui-pan .panner {
    background:#fff;
    color:#404040;
    font-size:9px;
    position:absolute;
    top:0;
    left:0;
    width:28px;
    height:28px;
    border:1px solid rgba(0,0,0,0.4);
    border-radius:3px;
    }
    .ui-pan .panner:hover { background-color:#f8f8f8; color:#404040; }
    .ui-pan .panner.up    { left:28px; }
    .ui-pan .panner.right { left:58px; top:28px; }
    .ui-pan .panner.down  { left:28px; top:58px; }
    .ui-pan .panner.left  { top:28px; }

.ui-zoombar {
  background:#FFF;
  position:relative;
  top:93px;
  left:28px;
  width:28px;
  height:200px;
  border:1px solid rgba(0,0,0,0.4);
  border-radius:3px;
  cursor:pointer;
  }
  .ui-zoombar:hover { background-color:#f8f8f8; }
  .ui-zoombar .handle {
    position:absolute;
    cursor:pointer;
    width:26px;
    height:28px;
    background:#404040;
    color:#fff;
    border-radius:2px;
    }
    .ui-zoombar .handle:hover { background:#303030; }

</style>

<div class='ui-control'>
  <div id='pan' class='ui-pan'>
    <a href='#' id='up' class='panner up'>&#9650;</a>
    <a href='#' id='right' class='panner right'>&#9654;</a>
    <a href='#' id='down' class='panner down'>&#9660;</a>
    <a href='#' id='left' class='panner left'>&#9664;</a>
  </div>
  <div id='zoom-bar' class='ui-zoombar dragdealer'>
    <div id='handle' class='handle'>0</div>
  </div>
</div>

<div id='map'> </div>

<!-- If you plan to use this example, download dragdealer from
https://code.google.com/p/dragdealer/ instead of hotlinking it like this -->
<script src='https://dragdealer.googlecode.com/svn/tags/0.9.5/dragdealer.js'></script>
<script>
L.mapbox.accessToken = '<your access token here>';
var zooms = 19;
var handle = document.getElementById('handle');
var map = L.mapbox.map('map', 'mapbox.streets', {
    zoomControl: false
  })
  .setView([42.0, -3.5], 2);

// Configure Dragdealer to update the map zoom
var zoom_bar = new Dragdealer('zoom-bar', {
    steps: zooms,
    snap: true,
    horizontal: false,
    vertical: true,
    callback: function(x, y) {
        var z = y * (zooms - 1);
        map.setZoom(z);
        handle.innerHTML = z;
    }
});

// Round the zoom value the number looks presentable.
map.on('zoomend', function() {
    var z = Math.round(map.getZoom());
    zoom_bar.setValue(0, z / 19);
    handle.innerHTML = z;
});

document.getElementById('left').onclick = function(e)  { e.preventDefault(); map.panBy([-100, 0]); };
document.getElementById('right').onclick = function(e) { e.preventDefault(); map.panBy([100, 0]);  };
document.getElementById('down').onclick = function(e)  { e.preventDefault(); map.panBy([0, 100]);  };
document.getElementById('up').onclick = function(e)    { e.preventDefault(); map.panBy([0, -100]); };
</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