Skip to content

Instantly share code, notes, and snippets.

@tmcw

tmcw/index.html

Created September 5, 2012 18:41
Show Gist options
  • Save tmcw/3642322 to your computer and use it in GitHub Desktop.
Save tmcw/3642322 to your computer and use it in GitHub Desktop.
Download ZIP
MapBox + WMS, refactored
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
<link href='http://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('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'));
map.zoom(5).center({ lat: 37, lon: -79 });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment