<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'>←</a>
<a id='right' class='panner'>→</a>
<a id='down' class='panner'>↓</a>
<a id='up' class='panner'>↑</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>