Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@jorgeas80

jorgeas80/app.css

Last active January 28, 2016 16:43
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jorgeas80/4c7169c9b6356858f3cc to your computer and use it in GitHub Desktop.
Save jorgeas80/4c7169c9b6356858f3cc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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; }
Raw
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));
}
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment