Viewing an older version of MapBox.js. Check out v1.5.0 for the latest.

WMS Layers

Include OGC WMS Layers in your Map
Select all
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>WMS Layers</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>
  #map-ui {
    position:absolute;
    top:50px;left:10px;
    z-index:100;
    }
    #map-ui ul {
      list-style:none;
      margin:0;padding:0;
      }
      #map-ui a {
        font-size:13px;
        background:#FFF;
        color:#3C4E5A;
        display:block;
        margin:0;padding:0;
        border:1px solid #BBB;
        border-bottom-width:0;
        min-width:138px;
        padding:10px;
        text-decoration:none;
        }
      #map-ui a:hover { background:#ECF5FA; }
      #map-ui li:last-child a {
        border-bottom-width:1px;
        -webkit-border-radius:0 0 3px 3px;
                border-radius:0 0 3px 3px;
        }
      #map-ui li:first-child a {
        -webkit-border-radius:3px 3px 0 0;
                border-radius:3px 3px 0 0;
              }
      #map-ui a.active {
        background:#3887BE;
        border-color:#3887BE;
        color:#FFF;
        }
        #map-ui li:last-child a.active {
          border-top-color:#FFF;
          }

</style>
<div id='map'>
  <div id='map-ui'>
    <ul>
      <li><a href='#' class='active' id='temp'>Temperature</a></li>
      <li><a href='#' class='active' id='precip'>Precipitation</a></li>
    </ul>
  </div>
</div>
<script>
mapbox.wms = function(template, name) {
    function _wms_provider(template) {
        MM.MapProvider.call(this, function(coordinate) {
            var coord = this.sourceCoordinate(coordinate);
            if (!coord) return null;
            var center = Math.pow(2, coord.zoom - 1),
                incr = Math.pow(2, -coord.zoom) * 20037508.34 * 2,
                w = (coord.column - center) * incr,
                s = (center - coord.row - 1) * incr;
            return template.replace('{BBOX}', [w,
                s,
                w + incr,
                s + incr].join(','));
        });
    };
    _wms_provider.prototype = {
        getTile: function(coord) {
            return this.getTileUrl(coord);
        }
    };
    MM.extend(_wms_provider, MM.MapProvider);
    return new MM.Layer(new _wms_provider(template), null, name);
};

// This WMS layer type only supports layers that provide the Spherical
// Mercator projection, referred to by EPSG:900913 and EPSG:3857
// Add a WMS layer by adding the {BBOX} token to a GetTile request URL
mapbox.auto('map', 'examples.map-y7l23tes', function(map) {
    map.zoom(5).center({ lat: 37, lon: -99 });

    var temp = mapbox.wms('http://gis.srh.noaa.gov/arcgis/services/NDFDTemps/MapServer/WMSServer?' +
        'BBOX={BBOX}&BUFFER=0&FORMAT=image%2Fpng&HEIGHT=256&LAYERS=16&REQUEST=GetMap&' +
        'SERVICE=WMS&SRS=EPSG%3A102113&STYLES=&TRANSPARENT=true&VERSION=1.1.1&WIDTH=256&etag=5', 'Temperature');
    map.addLayer(temp);

    var precip = mapbox.wms('http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs?' +
        'service=wms&version=1.1.1&request=GetMap&width=512&height=512&srs=EPSG:3857&' +
        'bbox={BBOX}&layers=RAS_RIDGE_NEXRAD&format=image/png&transparent=true', 'Precipitation');
    map.addLayer(precip);

    // Layer switcher
    document.getElementById('temp').onclick = function() {
        (!temp.enabled) ? temp.enable() : temp.disable();
        this.className = temp.enabled ? 'active' : '';
        return false;
    }
    document.getElementById('precip').onclick = function() {
        (!precip.enabled) ? precip.enable() : precip.disable();
        this.className = precip.enabled ? 'active' : '';
        return false;
    }
});
</script>
The code and documentation to mapbox.js is hosted on GitHub where you can contribute changes and improvements.