app.css

html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
}

.header {
    position: absolute;
    padding: 40px;
    top: -35px;
    left: 0;
    right: 0;
    float: right;
    z-index: 2;
    background: -moz-linear-gradient(top, rgba(245,245,243,1) 0%, rgba(245,245,243,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,243,1)), color-stop(100%,rgba(245,245,243,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(245,245,243,1) 0%,rgba(245,245,243,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(245,245,243,1) 0%,rgba(245,245,243,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(245,245,243,1) 0%,rgba(245,245,243,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(245,245,243,1) 0%,rgba(245,245,243,0) 100%); /* W3C */
}

h1 { font-family: 'Arvo', Georgia, Times, serif; font-size: 40px; line-height: 40px; margin: 0; color: #48483A;}
h2 { font-family: 'PT Sans', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; line-height:26px; width: 600px; margin-top: 12px; color: #74776B;  }

app.js

function currentUser() {
    return currentEndpoint().match(/http[s]*:\/\/([^.]*).*/)[1];
}

function currentEndpoint() {
    return "http://jorgearevalo.cartodb.com/api/v1/map";
}


function main() {
    
    // Create map
    var map = new L.Map('map', {
        zoomControl: true,
        drawnControl: true,
        center: [33.76, -117.45],
        zoom: 11
    });

    // Add CartoDB basemaps
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: '<a href="http://cartodb.com">CartoDB</a> © 2014',
        maxZoom: 18
    }).addTo(map);
    
    
    // Add drawn controls
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
    var drawControl = new L.Control.Draw({
        position: 'bottomleft',
        draw: {
            polyline: false,// Turns off this drawing tool
            marker: false,
            
            /*
            polygon: {
                shapeOptions: {
                    color: '#bada55'
                },
                showArea: true
            },
            */
            polygon: false,
            
            rectangle: {
                shapeOptions: {
                    color: '#a63b55'
                },
                showArea: true
            },

            circle: {
                shapeOptions: {
                    color: '#662d91'
                },
                
                showArea: true
            }
            
            
        },
        edit: {
            featureGroup: drawnItems
        }
    });
    map.addControl(drawControl);
    
    
    // Handle draw actions
    map.on('draw:created', function (e) {
        var type = e.layerType,
            layer = e.layer;
        
        var pol_pgis = null;
        
        switch(type) {
                
            // Create a Rectangle geometry in PostGIS
            case 'rectangle':
                var coords = layer.getLatLngs();
                
                var southWest = L.latLng(coords[1].lat, coords[1].lng);
                var northEast = L.latLng(coords[3].lat, coords[3].lng);

                var pol_pgis = "st_transform(ST_SetSRID(ST_MakeBox2D(ST_Point(" + 
                    coords[1].lng + ", " + coords[1].lat  + "),ST_Point(" + 
                    coords[3].lng + "," + coords[3].lat + ")),4326), 3857)";
                
                break;
            
            // Create a circle geometry in PostGIS
            case 'circle':
                var center = layer.getLatLng();
                
                var pol_pgis = "st_transform(geometry(st_buffer(geography(st_setsrid(st_point(" +
                    center.lng + ", " + center.lat + "), 4326)), " + layer.getRadius() + ")),3857)";
                
                break;
                
            case 'polygon':
                console.log(layer.toGeoJSON());
                
        }
                
           
        if (pol_pgis) {
            q = "SELECT avg((stats).mean) as m from (select st_summarystats(the_raster_webmercator, 1) as stats from utm_1 where st_intersects(the_raster_webmercator, " + pol_pgis +")) as foo";
                
            console.log("QUERY: " + q);

            var sql = new cartodb.SQL({user: 'jorgearevalo'});
            sql.execute(q)

            .done(function(data) {
                if (data.rows && data.rows.length > 0)
                    layer.bindPopup("Average raster value inside the " + type + ": " + data.rows[0].m);

                else
                    layer.bindPopup("Could not get avg value!");
            })

            .error(function(errors) {
                layer.bindPopup("Could not get avg value!");
            })
        }
        
        else {
            layer.bindPopup("Could not get avg value!");
        }
        
        drawnItems.addLayer(layer);
    });
    
    
    
    // Add raster layer
    var config = {
        "version": "1.2.0",
        "layers": [
            {
                "type": "cartodb",
                "options": {
                    "sql": "select * from utm_1",
                    "cartocss": "#utm_1 {raster-opacity: 0.5;}",
                    "cartocss_version": "2.3.0",
                    "geom_column": "the_raster_webmercator",
                    "geom_type": "raster"
                }
            }
        ]
    };

    var request = new XMLHttpRequest();
    request.open('POST', currentEndpoint(), true);
    request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
    request.onload = function() {
        if (this.status >= 200 && this.status < 400){
            var layergroup = JSON.parse(this.response);

            var tilesEndpoint = currentEndpoint() + '/' + layergroup.layergroupid + '/{z}/{x}/{y}.png';

            var protocol = 'https:' == document.location.protocol ? 'https' : 'http';
            if (layergroup.cdn_url && layergroup.cdn_url[protocol]) {
                var domain = layergroup.cdn_url[protocol];
                if ('http' === protocol) {
                    domain = '{s}.' + domain;
                }
                tilesEndpoint = protocol + '://' + domain + '/' + currentUser() + '/api/v1/map/' + layergroup.layergroupid + '/{z}/{x}/{y}.png';
            }

            rasterLayer = L.tileLayer(tilesEndpoint, {
                maxZoom: 18
            }).addTo(map);
        } else {
            throw 'Error calling server: Error ' + this.status + ' -> ' + this.response;
        }
    };
    request.send(JSON.stringify(config));
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>PostGIS Raster example</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="http://cartodb.com/assets/favicon.ico" />
    <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" />
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="header">
        <h1>PostGIS Raster test</h1>
        <h2>Draw a figure and click on it to see the avg raster value</h2>
    </div>
    <div id="map"></div>
    
    <!-- include cartodb.js library -->
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
    <script src="app.js"></script>

    <script>
      // you could use $(window).load(main);
      window.onload = main;
    </script>
  </body>
</html>