index.html
<!DOCTYPE html>
<html>
<head>
<title>Albers Equal Area | US Drought | April 2014</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="//cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
background: black;
}
</style>
<link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<script type="sql/html" id="cartocss_template">
/** choropleth visualization */
#usdm_20140429{
polygon-fill: #FFFFB2;
polygon-opacity: 0.5;
line-color: #FFF;
line-width: 1;
line-opacity: 1;
}
#usdm_20140429 [ dm <= 4] {
polygon-fill: #B10026;
}
#usdm_20140429 [ dm <= 3] {
polygon-fill: #E31A1C;
}
#usdm_20140429 [ dm <= 3] {
polygon-fill: #FC4E2A;
}
#usdm_20140429 [ dm <= 2] {
polygon-fill: #FD8D3C;
}
#usdm_20140429 [ dm <= 2] {
polygon-fill: #FEB24C;
}
#usdm_20140429 [ dm <= 1] {
polygon-fill: #FED976;
}
#usdm_20140429 [ dm <= 1] {
polygon-fill: #FFFFB2;
}
</script>
<body>
<div id="map"></div>
<script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
var map = L.map('map', {
zoomControl: true,
center: [-50, -150],
zoom: 4
});
L.tileLayer('//weld.cr.usgs.gov/cgi2-bin/tilecache.py/1.0.0/CONUS.summer.2012.v1.5.bs7.type2/{z}/{x}/{y}.png', {
attribution: 'USGS WELD',
tms: true,
continuousWorld: false
}).addTo(map);
cartodb.createLayer(map, {
user_name: 'andrew',
type: 'cartodb',
sublayers: [{
sql: 'SELECT dm, ST_Translate(ST_Scale(ST_Transform(the_geom,92003 ), 8.095, 8.095),734000,-7150000) the_geom_webmercator FROM usdm_20140429',
cartocss: $('#cartocss_template').html()
}]
})
.addTo(map)
.done(function(layer) {
})
.error(function(err) {
console.log(err);
});
}
window.onload = main;
</script>
</body>
</html>