|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Cool stuff</title> |
|
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> |
|
<script src="//localhost:9091"></script> |
|
|
|
<style media="screen"> |
|
html, body, #map { |
|
height: 100%; |
|
width: 100%; |
|
padding: 0; |
|
margin: 0; |
|
} |
|
.country { |
|
position: absolute; |
|
z-index: 99; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div id="map"> |
|
<input type="text" class="country"></input> |
|
</div> |
|
|
|
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> |
|
<script type="text/javascript"> |
|
function main() { |
|
cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', { |
|
}) |
|
.done(function(vis, layers) { |
|
// layer 0 is the base layer, layer 1 is cartodb layer |
|
// setInteraction is disabled by default |
|
// layers[1].setInteraction(true); |
|
layers[1].on('featureOver', function(e, latlng, pos, data) { |
|
console.log(data) |
|
}); |
|
// you can get the native map to work with it |
|
var map = vis.getNativeMap(); |
|
|
|
var sublayers = layers[1].getSubLayers(); |
|
sublayers.forEach(function (sublayer) { |
|
console.log(sublayer.getSQL()) |
|
console.log(sublayer.getCartoCSS()) |
|
}) |
|
|
|
// sublayers[0].setSQL('select * from european_countries_e where pop2005 < 10000000') |
|
// sublayers[0].setSQL('select * from european_countries_e WHERE name = \'Poland\'') |
|
|
|
var template = cartodb._.template('select * from european_countries_e WHERE name = \'<%= countryName %>\'') |
|
|
|
// sublayers[0].setSQL(template({countryName: 'France'})) |
|
|
|
$('.country').on('change', function (evt) { |
|
console.log(evt.target.value) |
|
sublayers[0].setSQL(template({countryName: evt.target.value})) |
|
}); |
|
|
|
sublayers[0].setCartoCSS('#european_countries_e{ polygon-fill: #ff00FF;}') |
|
}) |
|
.error(function(err) { |
|
console.log(err); |
|
}); |
|
} |
|
window.onload = main; |
|
|
|
</script> |
|
</body> |
|
</html> |
