D3 Examples - MapBox + WMS, refactored

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <script src='https://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>
<div id='map'></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 dim = 20037508.34 * 2,
                    center = Math.pow(2, coord.zoom - 1),
                    incr = Math.pow(2, -coord.zoom) * dim,
                    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);
    };
​
    mapbox.auto('map', 'mapbox.mapbox-graphite', function(map) {
        map.addLayer(mapbox.wms('https://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'));
        map.zoom(5).center({ lat: 37, lon: -79 });
    });
</script>
</body>
</html>
​
    