<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>