<style>.ui-control{font:bold12px/28pxHelvetica,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:1pxsolidrgba(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:1pxsolidrgba(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><divclass='ui-control'><divid='pan'class='ui-pan'><ahref='#'id='up'class='panner up'>&#9650;</a><ahref='#'id='right'class='panner right'>&#9654;</a><ahref='#'id='down'class='panner down'>&#9660;</a><ahref='#'id='left'class='panner left'>&#9664;</a></div><divid='zoom-bar'class='ui-zoombar dragdealer'><divid='handle'class='handle'>0</div></div></div><divid='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>';varzooms=19;varhandle=document.getElementById('handle');varmap=L.mapbox.map('map','mapbox.streets',{zoomControl:false}).setView([42.0,-3.5],2);// Configure Dragdealer to update the map zoomvarzoom_bar=newDragdealer('zoom-bar',{steps:zooms,snap:true,horizontal:false,vertical:true,callback:function(x,y){varz=y*(zooms-1);map.setZoom(z);handle.innerHTML=z;}});// Round the zoom value the number looks presentable.map.on('zoomend',function(){varz=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>