Viewing an older version of mapbox.js. Check out v1.4.0 for the latest.

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>
  <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
  <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
  <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: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>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.