Created
November 16, 2014 20:13
-
-
Save andrewxhill/f1f165f5f2b607066f4b to your computer and use it in GitHub Desktop.
ecohack example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Animals | CartoDB.js</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" /> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
#layer_selector { | |
position: absolute; | |
top: 20px; | |
right: 20px; | |
padding: 0; | |
} | |
#layer_selector ul { | |
padding: 0; margin: 0; | |
list-style-type: none; | |
} | |
#layer_selector li { | |
border-bottom: 1px solid #999; | |
padding: 15px 30px; | |
font-family: "Helvetica", Arial; | |
font-size: 13px; | |
color: #444; | |
cursor: auto; | |
} | |
#layer_selector li:hover { | |
background-color: #F0F0F0; | |
cursor: pointer; | |
} | |
#layer_selector li.selected { | |
background-color: #EEE; | |
} | |
</style> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> | |
<!--[if lte IE 8]> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" /> | |
<![endif]--> | |
<script type="sql/html" id="sql_template"> | |
</script> | |
</head> | |
<body> | |
<div id="map"></div> | |
<div id="layer_selector" class="cartodb-infobox"> | |
<ul id="selector"> | |
<li id="all" class="selected">All</li> | |
</ul> | |
</div> | |
<!-- include cartodb.js library --> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> | |
<script> | |
var queries = {}, selectedFilter; | |
// create layer selector | |
function createFilter(layers) { | |
var $options = $('#layer_selector li'); | |
$options.click(function(e) { | |
// get the area of the selected layer | |
var $li = $(e.target); | |
var query = $li.attr('id'); | |
if(selectedFilter != query ){ | |
// change the style in the layer to update the map | |
// console.log("SELECT ST_MakeLine(the_geom_webmercator) the_geom_webmercator FROM ("+queries[query]+") k") | |
layers[1].getSubLayer(0).setSQL("SELECT ST_MakeLine(the_geom_webmercator) the_geom_webmercator FROM ("+queries[query]+") k"); | |
layers[1].getSubLayer(1).setSQL(queries[query]); | |
layers[2].setSQL(queries[query]); | |
selectedFilter = query; | |
} | |
}); | |
} | |
function main() { | |
// get the currently selected style | |
selectedFilter = $('li.selected').attr('id'); | |
queries["all"] = "SELECT * FROM animals"; | |
var sql = new cartodb.SQL({ user: 'seatheanimals' }); | |
sql.execute("SELECT type, count(*) AS c FROM all_animals WHERE type IS NOT NULL GROUP BY type ORDER BY c DESC") | |
.done(function(data){ | |
for (i in data.rows){ | |
$('#selector').append( | |
$('<li></li>').attr('id', data.rows[i].type).html(data.rows[i].type + ' (' + data.rows[i].c+ ')') | |
); | |
queries[data.rows[i].type] = "SELECT * FROM animals WHERE id IN (SELECT id FROM all_animals WHERE type = '"+data.rows[i].type+"')"; | |
} | |
}) | |
cartodb.createVis('map', 'http://seatheanimals.cartodb.com/api/v2/viz/7ee4a392-6dbd-11e4-b416-0e018d66dc29/viz.json') | |
.done(function(vis, layers) { | |
// layer 0 is the base layer, layer 1 is cartodb layer | |
// console.log(layers) | |
createFilter(layers); | |
}) | |
.error(function(err) { | |
console.log(err); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment