### developers

## MapBox.js v0.6.7

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

### WMS Layers

Include OGC WMS Layers in your Map

- Temperature
- Precipitation

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.