Skip to content

Instantly share code, notes, and snippets.

@malev

malev/index.html

Last active August 29, 2015 14:10
Show Gist options
  • Save malev/b69ca0b9dc8c2f27b68a to your computer and use it in GitHub Desktop.
Save malev/b69ca0b9dc8c2f27b68a to your computer and use it in GitHub Desktop.
Download ZIP
Denton's elections
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Something crazy</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;
background: #fff;
}
#layer_selector {
position: absolute;
top: 60px;
right: 20px;
padding: 10px;
}
#layer_selector select {
border-bottom: 1px solid #999;
font-family: "Helvetica", Arial;
font-size: 13px;
color: #444;
cursor: auto;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<div id="layer_selector" class="cartodb-infobox">
<select>
<option value='all' selected>All precincts</option>
<option value='passed'>Passed</option>
<option value='rejected'>Rejected</option>
<option value='1005'>1005</option>
<option value='1007'>1007</option>
<option value='1008'>1008</option>
<option value='1009'>1009</option>
<option value='1010'>1010</option>
<option value='1011'>1011</option>
<option value='1012'>1012</option>
<option value='1013'>1013</option>
<option value='1014'>1014</option>
<option value='1015'>1015</option>
<option value='1016'>1016</option>
<option value='1017'>1017</option>
<option value='1018'>1018</option>
<option value='1019'>1019</option>
<option value='1038'>1038</option>
<option value='1039'>1039</option>
<option value='4001'>4001</option>
<option value='4002'>4002</option>
<option value='4003'>4003</option>
<option value='4004'>4004</option>
<option value='4005'>4005</option>
<option value='4006'>4006</option>
<option value='4007'>4007</option>
<option value='4008'>4008</option>
<option value='4009'>4009</option>
<option value='4010'>4010</option>
<option value='4011'>4011</option>
<option value='4012'>4012</option>
<option value='4013'>4013</option>
<option value='4014'>4014</option>
<option value='4015'>4015</option>
<option value='4016'>4016</option>
<option value='4017'>4017</option>
<option value='4037'>4037</option>
<option value='4038'>4038</option>
<option value='4039'>4039</option>
<option value='4040'>4040</option>
<option value='4041'>4041</option>
<option value='4042'>4042</option>
</select>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.11/cartodb.js"></script>
<script>
var resetCSS,
passedCSS,
rejectedCSS;
resetCSS = "#data {polygon-opacity: 0.5;line-color: #eee;line-width: 1;}#data [ againstper < 50] {polygon-fill: #EDF8B1;}#data [ againstper < 30] {polygon-fill: #7FCDBB;}#data [ againstper < 20] {polygon-fill: #2C7FB8;}#data [ againstper > 50] {polygon-fill: #FFEDA0;}#data [ againstper > 70] {polygon-fill: #FEB24C;}#data [ againstper > 80] {polygon-fill: #F03B20;}#data [ againstper = 0] {polygon-fill: #bbb;}#data [ againstper = 50] {polygon-fill: #bbb;}";
passedCSS = "#data {polygon-opacity: 0.5;}#data [ againstper < 50] {polygon-fill: #EDF8B1;}#data [ againstper < 30] {polygon-fill: #7FCDBB;}#data [ againstper < 20] {polygon-fill: #2C7FB8;}#data [ againstper > 50] {polygon-fill: #FFEDA0;}#data [ againstper > 70] {polygon-fill: #FEB24C;}#data [ againstper > 80] {polygon-fill: #F03B20;}#data [ againstper = 0] {polygon-fill: #bbb;}#data [ againstper = 50] {polygon-fill: #bbb;}#data [ result = false] {polygon-fill: #eee;}";
rejectedCSS = "#data {polygon-opacity: 0.5;}#data [ againstper < 50] {polygon-fill: #EDF8B1;}#data [ againstper < 30] {polygon-fill: #7FCDBB;}#data [ againstper < 20] {polygon-fill: #2C7FB8;}#data [ againstper > 50] {polygon-fill: #FFEDA0;}#data [ againstper > 70] {polygon-fill: #FEB24C;}#data [ againstper > 80] {polygon-fill: #F03B20;}#data [ againstper = 0] {polygon-fill: #bbb;}#data [ againstper = 50] {polygon-fill: #bbb;}#data [ result = true] {polygon-fill: #eee;}";
function createSelector(layer) {
var $select = $('#layer_selector select');
$select.on('change', function(e) {
var css = '',
precinct = $(e.target.selectedOptions).val();
if ( precinct === 'passed') {
css = passedCSS;
} else if (precinct === 'rejected') {
css = rejectedCSS;
} else if ( precinct === 'all' ) {
css = resetCSS;
} else {
css = resetCSS + "#data [ precinct_n = '"+ precinct +"'] { line-color: #0AF; line-opacity: 0.5; line-width: 4;}";
}
layer.setCartoCSS(css);
});
}
function main() {
cartodb.createVis('map', 'http://malev.cartodb.com/api/v2/viz/1494a9e8-7bc7-11e4-924f-0e853d047bba/viz.json', {
center_lat: 33.21,
center_lon: -97.13,
zoom: 11
})
.done(function(vis, layers) {
var subLayer = layers[1].getSubLayer(0);
createSelector(subLayer);
})
.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