Opacity control

Click and drag a slider to adjust the opacity of an overlay.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Opacity control</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.4.0/mapbox.js'></script>
  <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
  <!--[if lte IE 8]>
    <link href='//api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.ie.css' rel='stylesheet'>
  <![endif]-->
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<style>
    #control {
        background: #FFF;
        position: absolute;
        left: 10px;
        top: 80px;
        height: 200px;
        width: 28px;
        border: 1px solid #BBB;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        z-index: 999;
    }

    #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 map = L.mapbox.map('map', 'examples.map-vyofok3q')
        .setView([43.6654, -79.4775], 15);

    var overlay = L.mapbox.tileLayer('aibram.Aerial', {zIndex: 2})
        .addTo(map);

    var handle = document.getElementById('handle'),
        start = false,
        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
        overlay.setOpacity(1 - (handle.offsetTop / 200));
    };

    handle.onmousedown = function(e) {
        // Record initial positions
        start = parseInt(e.clientY, 10);
        startTop = handle.offsetTop - 5;
        return false;
    };

    document.onmouseup = function(e) {
        start = null;
    };
</script>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.