Pan and Vertical Zoom

Adding controls for click-movement of the map
0
Select all
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Pan and Vertical Zoom</title>
  
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
  <script src='//api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.5.0/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>
var map = L.mapbox.map('map', 'examples.map-vyofok3q');
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.setZoom(z);
        handle.innerHTML = z;
    }
});

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

document.getElementById('left').onclick = function() {
    console.log("AS");
    map.panBy([-100, 0]);
};

document.getElementById('right').onclick = function() {
    map.panBy([100, 0]);
};

document.getElementById('down').onclick = function() {
    map.panBy([0, 100]);
};

document.getElementById('up').onclick = function() {
    map.panBy([0, -100]);
};

map.setView([34.660322, 132.506103], 9);
</script>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.