jsanz/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This example is based on Jorge Arévalo example but using CartoDB.js entirely to interact with the Maps API.

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

#result{
	position: absolute;
	background: white;
	padding: 10px;
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	top:15px;
	right:15px;
	width:380px;
}
#result h1{
	margin: 0;
}

## app.js
function main() {

    // Create map
    var map = new L.Map('map', {
        zoomControl: true,
        drawnControl: true,
        center: [-34.77,-55.73],
        zoom: 12
    });

    // 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: 16
    }).addTo(map);

    cartodb.createLayer(map, {
      user_name: 'jsanz',
      type: 'cartodb',
      sublayers: [{
        sql: "select * from recorte3857",
        cartocss: "#recorte3857 {raster-opacity: 0.7;}",
        raster: true,
      }]
    })
    .addTo(map)


    // Add drawn controls
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
    var drawControl = new L.Control.Draw({
        position: 'bottomleft',
        draw: {
            polyline: false,
            marker: false,
            polygon: false,
            rectangle: false,
            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;

        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)";

        if (pol_pgis) {
            q = "SELECT avg((stats).mean) as m from (select st_summarystats(the_raster_webmercator, 1) as stats from recorte3857 where st_intersects(the_raster_webmercator, " + pol_pgis +")) as foo";

            console.log("QUERY: " + q);

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

            .done(function(data) {
                if (data.rows && data.rows.length > 0)
                    $('#result p').text("Average: " + data.rows[0].m.toFixed(2));

                else
                    $('#result p').text("Could not get avg value!");
            })

            .error(function(errors) {
                $('#result p').text("Could not get avg value!");
            })
        }

        else {
            $('#result p').text("Could not get avg value!");
        }

        drawnItems.addLayer(layer);
    });
}

## 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/3.15/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 id="map"></div>
    <div id="result">
      <h1>Draw a circle to get the average pixel value</h1>
      <p>Average: </p>
    </div>
    <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/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>
      window.onload = main;
    </script>
  </body>
</html>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	#result{
	position: absolute;
	background: white;
	padding: 10px;
	font-family: 'PT Sans', Helvetica, Arial, sans-serif;
	top:15px;
	right:15px;
	width:380px;
	}
	#result h1{
	margin: 0;
	}
	function main() {

	// Create map
	var map = new L.Map('map', {
	zoomControl: true,
	drawnControl: true,
	center: [-34.77,-55.73],
	zoom: 12
	});

	// 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: 16
	}).addTo(map);

	cartodb.createLayer(map, {
	user_name: 'jsanz',
	type: 'cartodb',
	sublayers: [{
	sql: "select * from recorte3857",
	cartocss: "#recorte3857 {raster-opacity: 0.7;}",
	raster: true,
	}]
	})
	.addTo(map)



	// Add drawn controls
	var drawnItems = new L.FeatureGroup();
	map.addLayer(drawnItems);
	var drawControl = new L.Control.Draw({
	position: 'bottomleft',
	draw: {
	polyline: false,
	marker: false,
	polygon: false,
	rectangle: false,
	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;

	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)";

	if (pol_pgis) {
	q = "SELECT avg((stats).mean) as m from (select st_summarystats(the_raster_webmercator, 1) as stats from recorte3857 where st_intersects(the_raster_webmercator, " + pol_pgis +")) as foo";

	console.log("QUERY: " + q);

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

	.done(function(data) {
	if (data.rows && data.rows.length > 0)
	$('#result p').text("Average: " + data.rows[0].m.toFixed(2));

	else
	$('#result p').text("Could not get avg value!");
	})

	.error(function(errors) {
	$('#result p').text("Could not get avg value!");
	})
	}

	else {
	$('#result p').text("Could not get avg value!");
	}

	drawnItems.addLayer(layer);
	});
	}
	<!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/3.15/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 id="map"></div>
	<div id="result">
	<h1>Draw a circle to get the average pixel value</h1>
	<p>Average: </p>
	</div>
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/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>
	window.onload = main;
	</script>
	</body>
	</html>