<style>
#map-ui a {
position:absolute;
z-index:1000;
top:55px;left:10px;
font:13px/18px;
background:#FFF;
color:#3C4E5A;
display:block;
margin:0;padding:0;
border:1px solid #BBB;
min-width:138px;
padding:10px;
-webkit-border-radius:3px;
border-radius:3px;
}
#map-ui a:hover { background:#ECF5FA; }
</style>
<div id='map'></div>
<div id='map-ui'>
<a id='zoom' href='#'>ease to zoom 12</a>
</div>
<script>
mapbox.auto('map', 'examples.map-zgrqqx0w', function(map) {
document.getElementById('zoom').onclick = function(e) {
e.preventDefault();
e.stopPropagation();
// The second argument, if true, tells the map to
// animate the transition to zoom level 12. The
// same can be done with map.center and map.centerzoom
map.zoom(12, true);
};
});
</script>