### developers

## MapBox.js v0.6.7

Viewing an older version of MapBox.js. Check out v1.5.0 for the latest.

### Pan Buttons and Vertical Zoom

0
← → ↓ ↑
Select all

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>Pan Buttons and Vertical Zoom</title>

      <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
      <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />

      <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
      </style>
    </head>
    <body>

    <div id='z'>
        <div id='zoom-bar' class='dragdealer'>
            <div id='handle' class="handle">0</div>
        </div>
    </div>
    <div id='pan' class='pan'>
      <div class='wrapper'>
        <a id='left' class='panner'>&larr;</a>
        <a id='right' class='panner'>&rarr;</a>
        <a id='down' class='panner'>&darr;</a>
        <a id='up' class='panner'>&uarr;</a>
      </div>
    </div>
    <div id='map'>
    </div>
    <!-- if you plan to use this example, download drag dealer 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>
    <style>
    #z {
      top:160px;
      left:40px;
      position:absolute;
      z-index:999;
      }
    #zoom-bar {
      width:30px;
      position:relative;
      height:200px;
      background:#FFF;
      border:1px solid #BBB;
      -webkit-border-radius:3px;
              border-radius:3px;
      }
    .dragdealer .handle {
      position:absolute;
      cursor:pointer;
      width:30px;
      height:30px;
      background:#222;
      color:#fff;
      font-weight:bold;
      line-height:30px;
      text-align:center;
      }
    #pan {
      position:absolute;
      top:50px;
      left:10px;
      z-index:999;
      }
    .wrapper {
      position:relative;
      }
    #pan .wrapper .panner {
      background:#fff;
      top:0;
      position:absolute;
      left:0;
      padding:5px;
      width:20px;
      height:20px;
      border: 1px solid #ccc;
      border-radius: 3px;
      text-align:center;
      -webkit-user-select:none;
      }
    #pan .panner#left { top:35px; }
    #pan .panner#right { top:35px; left:60px; }
    #pan .panner#down { top:70px; left:30px; }
    #pan .panner#up { top:0px; left:30px; }
    </style>
    <script>
    mapbox.auto('map', 'examples.map-vyofok3q', function(map) {
        var zooms = 17;
        var handle = document.getElementById('handle');

        // 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.zoom(z, true);
                handle.innerHTML = z;
            }
        });

        // Round zoom so that numbers in the bar look presentable.
        map.addCallback('zoomed', function() {
            var z = Math.round(map.zoom());
            zoom_bar.setValue(0, z/16);
            handle.innerHTML = z;
        });

        document.getElementById('left').onclick = function() { map.panLeft(); }
        document.getElementById('right').onclick = function() { map.panRight(); }
        document.getElementById('down').onclick = function() { map.panDown(); }
        document.getElementById('up').onclick = function() { map.panUp(); }

        // Set the initial map position
        map.zoom(9).center({ lat: 34.660322, lon: 132.506103 });
    });
    </script>

The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.