block by andrewxhill 60359f268649d0615483

Tricking CartoDB into new projections

Full Screen

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" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
    <![endif]-->
  </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>
 
    <!-- include cartodb.js library -->
    <script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!--     // <script src="//cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
    // <script src="lib/proj4-compressed.js"></script>
    // <script src="src/proj4leaflet.js"></script> -->
 
    <script>
 
      function main() {
        var map = L.map('map', { 
          zoomControl: true,
          center: [-50, -150],
          // center: [-40, -40],
          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>