Skip to content

Instantly share code, notes, and snippets.

@simongle

simongle/index.html

Last active August 15, 2016 19:40
Show Gist options
  • Save simongle/13c48acba3df728e8db5976d16fb4659 to your computer and use it in GitHub Desktop.
Save simongle/13c48acba3df728e8db5976d16fb4659 to your computer and use it in GitHub Desktop.
Download ZIP
Diversity of Morris Township, NJ
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Morristown Diversity | 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;
overflow: hidden;
}
ol, ul {
list-style: none;
}
.layers {
position: absolute;
right: 20px;
top: 20px;
z-index: 10;
box-shadow: rgba(0,0,0,.2) 0 0 4px 2px;
background: #fff;
border: 1px solid #999;
width: auto;
overflow: hidden;
border-radius: 4px;
padding: 20px;
font-size: 14px;
font-weight: bold;
font-family: Helvetica,Arial;
color: #666;
}
.layers li {
margin-bottom: 8px;
}
.layers li:last-child {
margin-bottom: 0;
}
.layers label, .layers input {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.layers input {
margin-right: 8px;
-webkit-appearance: none;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid #999;
position: relative;
}
.layers input:focus {
outline: none;
}
.layers input:checked:before {
content:"";
width: 4px;
height: 4px;
position: absolute;
display: inline-block;
left: 50%;
top: 50%;
margin-left: -2px;
margin-top: -2px;
background: #999;
border-radius: 50%;
}
.layers .layer input {
border-color: #42a4dc;
}
.layers .layer input:checked:before {
background: #42a4dc;
}
.layers h2 {
margin-bottom: 12px;
color: #333;
}
Map {
buffer-size:128;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-tooltip-content-wrapper">
<div class="cartodb-tooltip-content">
<h4>Renter Occupied Households</h4>
<p>{{renter_per_string}}</p>
<h4>Asian</h4>
<p>{{asian_per_string}}</p>
<h4>Black</h4>
<p>{{black_per_string}}</p>
<h4>Hispanic</h4>
<p>{{hispanic_per_string}}</p>
<h4>White</h4>
<p>{{white_per_string}}</p>
</div>
</div>
</script>
<aside class="layers">
<h3>Select an ethnic group</h3>
<ul>
<li class="layer">
<input type="radio" id="asian" name="layer" checked>
<label for="asian">Asian</label>
</li>
<li class="layer">
<input type="radio" id="black" name="layer">
<label for="black">Black</label>
</li>
<li class="layer">
<input type="radio" id="hispanic" name="layer">
<label for="hispanic">Hispanic</label>
</li>
<li class="layer">
<input type="radio" id="white" name="layer">
<label for="white">White</label>
</li>
</ul>
<h3>Renter Occupied Households</h3>
<ul>
<li class="layer">
<input type="radio" id="renters" name="layer">
<label for="renters">Renters</label>
</li>
</ul>
</aside>
<div class='cartodb-legend choropleth'>
<div class="legend-title">Percentage of Households</div>
<ul>
<li class="min">
0
</li>
<li class="max">
1.00
</li>
<li class="graph count_441">
<div class="colors">
<div class="quartile" style="background-color:#FFFFB2"></div>
<div class="quartile" style="background-color:#FED976"></div>
<div class="quartile" style="background-color:#FEB24C"></div>
<div class="quartile" style="background-color:#FD8D3C"></div>
<div class="quartile" style="background-color:#FC4E2A"></div>
<div class="quartile" style="background-color:#E31A1C"></div>
<div class="quartile" style="background-color:#B10026"></div>
</div>
</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
// create leaflet map
window.map = L.map('map', {
scrollWheelZoom: false
, center: [40.80575371550092, -74.48181152343749]
, zoom: 13
})
var layersCSS = {
'asian':'#censusblocks2010_shrunk{polygon-fill: #FFFFB2;polygon-opacity: 0.8;line-color: #FFF;line-width: 0.2;line-opacity: 1;} #censusblocks2010_shrunk [ asian_per <= 1] { polygon-fill: #B10026;} #censusblocks2010_shrunk [ asian_per <= 0.75] {polygon-fill: #E31A1C;} #censusblocks2010_shrunk [ asian_per <= 0.39] {polygon-fill: #FC4E2A;} #censusblocks2010_shrunk [ asian_per <= 0.2] {polygon-fill: #FD8D3C;} #censusblocks2010_shrunk [ asian_per <= 0.14] { polygon-fill: #FEB24C;} #censusblocks2010_shrunk [ asian_per <= 0.11] {polygon-fill: #FED976;} #censusblocks2010_shrunk [ asian_per <= 0.04] {polygon-fill: #FFFFB2;}',
'black': '#censusblocks2010_shrunk{polygon-fill:#ffffb2;polygon-opacity:.8;line-color:#fff;line-width:.5;line-opacity:1} #censusblocks2010_shrunk[black_per <=1]{polygon-fill:#b10026} #censusblocks2010_shrunk[black_per <=0.64]{polygon-fill:#e31a1c} #censusblocks2010_shrunk[black_per <=0.43]{polygon-fill:#fc4e2a} #censusblocks2010_shrunk[black_per <=0.33]{polygon-fill:#fd8d3c} #censusblocks2010_shrunk[black_per <=0.24]{polygon-fill:#feb24c} #censusblocks2010_shrunk[black_per <=0.15]{polygon-fill:#fed976} #censusblocks2010_shrunk[black_per <=0.07]{polygon-fill:#ffffb2}',
'hispanic': '#censusblocks2010_shrunk{polygon-fill:#ffffb2;polygon-opacity:.8;line-color:#fff;line-width:.5;line-opacity:1} #censusblocks2010_shrunk[hispanic_per <=1]{polygon-fill:#b10026} #censusblocks2010_shrunk[hispanic_per <=0.77]{polygon-fill:#e31a1c} #censusblocks2010_shrunk[hispanic_per <=0.6]{polygon-fill:#fc4e2a} #censusblocks2010_shrunk[hispanic_per <=0.45]{polygon-fill:#fd8d3c} #censusblocks2010_shrunk[hispanic_per <=0.32]{polygon-fill:#feb24c} #censusblocks2010_shrunk[hispanic_per <=0.21]{polygon-fill:#fed976} #censusblocks2010_shrunk[hispanic_per <=0.1]{polygon-fill:#ffffb2}',
'white': '#censusblocks2010_shrunk{polygon-fill:#ffffb2;polygon-opacity:.8;line-color:#fff;line-width:.5;line-opacity:1} #censusblocks2010_shrunk[white_per <=1]{polygon-fill:#b10026} #censusblocks2010_shrunk[white_per <=0.89]{polygon-fill:#e31a1c} #censusblocks2010_shrunk[white_per <=0.78]{polygon-fill:#fc4e2a} #censusblocks2010_shrunk[white_per <=0.67]{polygon-fill:#fd8d3c} #censusblocks2010_shrunk[white_per <=0.56]{polygon-fill:#feb24c} #censusblocks2010_shrunk[white_per <=0.39]{polygon-fill:#fed976} #censusblocks2010_shrunk[white_per <=0.22]{polygon-fill:#ffffb2}',
'renters': '#censusblocks2010_shrunk{polygon-fill:#ffffb2;polygon-opacity:.8;line-color:#fff;line-width:.5;line-opacity:1} #censusblocks2010_shrunk[renter_per <=1]{polygon-fill:#b10026} #censusblocks2010_shrunk[renter_per <=0.84]{polygon-fill:#e31a1c} #censusblocks2010_shrunk[renter_per <=0.69]{polygon-fill:#fc4e2a} #censusblocks2010_shrunk[renter_per <=0.53]{polygon-fill:#fd8d3c} #censusblocks2010_shrunk[renter_per <=0.36]{polygon-fill:#feb24c} #censusblocks2010_shrunk[renter_per <=0.23]{polygon-fill:#fed976} #censusblocks2010_shrunk[renter_per <=0.11]{polygon-fill:#ffffb2}'
}
var basemap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
// add cartodb layer with one sublayer
cartodb.createLayer(map, {
user_name: 'thecenturyfoundation',
type: 'cartodb',
sublayers: [{
sql: 'SELECT * FROM censusblocks2010_shrunk'
, cartocss: layersCSS.asian
, interactivity: 'white_per_string, asian_per_string, hispanic_per_string, black_per_string, renter_per_string'
}
, {
sql: 'SELECT * FROM morristownmorristownshipboundaries'
, cartocss: '#morristownmorristownshipboundaries{line-width:2;line-opacity:0.7;} #morristownmorristownshipboundaries[objectid=1]{ line-color:#636262; } #morristownmorristownshipboundaries[objectid=2]{line-color:#636262;} #morristownmorristownshipboundaries[objectid=3]{line-color:#636262;line-dasharray:10,4;}'
}
, {
sql: 'SELECT * FROM msdschoollocations'
, cartocss: '#msdschoollocations{marker-fill-opacity:0.9;marker-line-color:#FFF;marker-line-width:1;marker-line-opacity:1;marker-placement:point;marker-type:ellipse;marker-width:10;marker-fill:#FF6600;marker-allow-overlap:true} #msdschoollocations::labels{text-name:[school];text-face-name:"Open Sans Regular";text-size:12;text-label-position-tolerance:10;text-fill:#000;text-halo-fill:#FFF;text-halo-radius:1;text-dy:-20;text-allow-overlap:false;text-placement:vertex;text-placement-type:simple}'
}]
, https: true
, legends: true
})
.addTo(map)
.done(function(layer) {
// Population Layer
console.log(layer);
var morristownshipCensus = layer.getSubLayer(0);
// morristownshipCensus.infowindow.set('template', $('#infowindow_template').html());
var infowindowTemplate = $('#infowindow_template').html();
layer.leafletMap.viz.addOverlay({
type: 'tooltip'
, layer: morristownshipCensus
, template: infowindowTemplate
, position: 'bottom|right'
, fields: [{}]
});
morristownshipCensus.setInteraction(true)
// morristownshipCensus.on('featureOver', function(e, pos, pixel, data) {
// // ADD HOVER TOOLTIPS HERE
// console.log(data);
// });
$("input[name='layer']").change(function(){
// For every check activated, add a sublayer
$.each($("input[name='layer']:checked"), function(){
// layer.createSubLayer(layers[$(this).attr("id")]);
var ethnicity = $(this).attr("id");
morristownshipCensus.setCartoCSS(layersCSS[ethnicity]);
});
});
});
}
// 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