Last active
November 17, 2015 10:25
-
-
Save oriolbx/b5c417ff2798498752b5 to your computer and use it in GitHub Desktop.
CartoDB SQL API left join
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> | |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> | |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> | |
<style>html, body, #map { height: 100%; padding: 0; margin: 0 }</style> | |
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
<!-- include cartodb.js library --> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
#selector_menu{ | |
position: absolute; | |
top: 20px; | |
left: 20px; | |
z-index: 9000; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<div id='selector_menu'> | |
<select id='selector'> | |
<option value='sty0'>style0</option> | |
<option value='sty1'>style1</option> | |
</select> | |
</div> | |
<script type="text/javascript"> | |
var layer; | |
function main() { | |
var map = L.map('map', { | |
zoomControl: false, | |
center: [41.390205, 2.154007], | |
zoom: 2 | |
}); | |
// add basemap | |
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'}).addTo(map); | |
cartodb.createLayer(map, { | |
user_name: 'oboix', | |
type: 'cartodb', | |
sublayers: [{ | |
sql: "select european_1.the_geom, european_1.the_geom_webmercator, european_1.cartodb_id, european_1.admin, world_table.area FROM european_1 LEFT JOIN world_table ON european_1.adm0_a3 = world_table.iso3", | |
cartocss: "#european_1{ polygon-fill: #FF6600;polygon-opacity: 1;line-color: #FFF;line-width: 0.5;line-opacity: 1; }", | |
}] | |
}).addTo(map) | |
.done(function(layer){ | |
// start SQL API | |
var sql = new cartodb.SQL({ user: 'oboix'}); | |
var LayerActions = { | |
sty0: function(){ | |
layer.setCartoCSS("#european_1{ polygon-fill: #FF6600;polygon-opacity: 1;line-color: #FFF;line-width: 0.5;line-opacity: 1; }"); | |
return true; | |
}, | |
sty1: function(){ | |
layer.setCartoCSS("#european_1{ polygon-fill: #FFF;polygon-opacity: 1;line-color: #000;line-width: 0.5;line-opacity: 1;}#european_1[area < 10000]{ polygon-fill: #000;polygon-opacity: 1;line-color: #FFF;line-width: 0.5;line-opacity: 1;}#european_1[area < 1000]{ polygon-fill:#ff0000 ;polygon-opacity: 1;line-color: #000;line-width: 0.5;line-opacity: 1;}"); | |
return true; | |
} | |
} | |
$('#selector').change(function() { | |
LayerActions[$(this).val()](); | |
}); | |
console.log(layer); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment