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.