<style>
#control {
background:#FFF;
position:absolute;
left:10px;
top:50px;
height:200px;
width:28px;
border:1px solid #BBB;
-webkit-border-radius:3px;
border-radius:3px;
}
#handle {
background:#000;
position: absolute;
left:0;
top:20px;
width:28px;
height:10px;
}
#handle:hover {
cursor:pointer;
background:#444;
cursor:ns-resize;
}
</style>
<div id='map'></div>
<div id='control'>
<div id='handle'></div>
</div>
<script>
var layerIDs = [
'examples.map-vyofok3q',
'aibram.Aerial'
];
mapbox.auto('map', layerIDs, function(map) {
// Disable compositing so we can adjust opacity of individual layers
map.getLayerAt(0).composite(false);
// Set initial center and zoom level
map.centerzoom({
lat:43.665, lon: -79.478
}, 15);
var handle = document.getElementById('handle'),
start,
startTop;
document.onmousemove = function(e) {
if (!start) return;
// Adjust control
handle.style.top = Math.max(-5, Math.min(195, startTop + parseInt(e.clientY, 10) - start)) + 'px';
// Adjust opacity
map.getLayerAt(1).parent.style.opacity = 1 - (handle.offsetTop / 200);
map.parent.style.cursor = 'ns-resize';
}
handle.onmousedown = function(e) {
// Record initial positions
start = parseInt(e.clientY, 10);
startTop = handle.offsetTop - 5;
return false;
}
document.onmouseup = function(e) {
start = null;
map.parent.style.cursor = 'default';
}
});
</script>