Static Image Generator Example

A basic class that allows you to quickly generate static images from the CartoDB API using custom CartoCSS builders etc.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>L</title>
  <meta name=viewport content="width=device-width initial-scale=1">
  <script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  <link href="https://cartodb.com/favicon.ico" rel="shortcut icon" />
  <style type="text/css">
    html,
    body {
      position: relative;
      height: 100%;
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>

CartoImage.prototype.createConfig = function (values) {
      console.log(values)
      var config = this.getConfig(values.jenks)
      var jsonMapConfig = JSON.stringify(config, null, 2);
      var request = new XMLHttpRequest();
      request.open('POST', this.getEndpoint(), true);
      request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
      request.onload = this.imgFromLayerGroup;
      request.send(jsonMapConfig);
    }

CartoImage.prototype.init = function(callback){
      this.callback = callback;
      this.sql.describeFloat('select * from '+this.table, this.column, this.createConfig.bind(this))
    }
    CartoImage.prototype.imgFromLayerGroup = function(){
        if (this.status >= 200 && this.status < 400) {
            var layergroup = JSON.parse(this.response);
            console.log(layergroup);
            cartoimage.setURL(layergroup);
        } else {
            throw 'Error calling server: Error ' + this.status + ' -> ' + this.response;
        }
    }

CartoImage.prototype.getConfig = function(ramp){

var colors = [ '#65B1D0', '#3AB9B6', '#4EBB90', '#7CB768', '#AAAF4C', '#D3A149', '#F29160' ];
    // setup your new Image with some default parameters
    var cartoimage = new CartoImage(500, 200, 'observatory', 'us_census_acs2013_5yr_block_group', 'median_rent_moe', 3, 40, -100, colors);

window.onload = function() {
      var myCustomImageHandlingFunction = function(url){
        // will get back the URL of your desired image
        var ig = new Image();
        ig.src = url;
        $('body').append(ig);
        console.log(url)
      }
      cartoimage.init(myCustomImageHandlingFunction)
    }

</script>
</body>

</html>

Modified http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js to a secure url

https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js