Bird Invasion, via WMS

<!DOCTYPE html>
<html>
<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.css' rel='stylesheet' />
  
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>

</style>
<div id='map' class='dark'>
    <div id='map-ui'>
        <ul>
          <li><a href='#' class='active' id='bluejays'>Blue Jay Sightings</a></li>
          <li><a href='#' class='active' id='precipitation'>Precipitation</a></li>
        </ul>
  </div>
</div>
<script>
    var map = L.mapbox.map('map', 'examples.map-y7l23tes')
        .setView([37, -99], 5);

var bluejays = L.tileLayer.wms("https://bisonapi.usgs.ornl.gov/api/wms?", {
        format: 'image/png',
        transparent: true,
        layers : 'species',
        transparent : "true",
        species : "blue jay",
        type : "common_name"
    }).addTo(map);
    
    var precipitation = L.tileLayer.wms("https://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs", {
        format: 'image/png',
        transparent: true,
        layers: 'RAS_RIDGE_NEXRAD'
    }).addTo(map);

// Layer switcher

document.getElementById('bluejays').onclick = function () {
    var enable = this.className !== 'active';
    bluejays.setOpacity(enable ? 1 : 0);
    this.className = enable ? 'active' : '';
    return false;
};

document.getElementById('precipitation').onclick = function () {
    var enable = this.className !== 'active';
    precipitation.setOpacity(enable ? 1 : 0);
    this.className = enable ? 'active' : '';
    return false;
};

</script>
</body>
</html>

Modified http://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js to a secure url

https://api.tiles.mapbox.com/mapbox.js/v1.4.0/mapbox.js