Skip to content

Instantly share code, notes, and snippets.

@auremoser

auremoser/index.html

Last active August 29, 2015 14:16
Show Gist options
  • Save auremoser/a90356af6669ccdc11ae to your computer and use it in GitHub Desktop.
Save auremoser/a90356af6669ccdc11ae to your computer and use it in GitHub Desktop.
Download ZIP
NICAR 15 - Onomatopoeia Map
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>HTML Template | CartoDB</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" />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<style type="text/css">
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
#cartocss {
position: absolute;
right: 20px;
top: 20px;
}
#legend {
position: absolute;
left: 40px;
top: 0;
}
/*BUTTON STYLES*/
.layer_selector {
background: rgba(255,255,255,0.9);
border: 1px solid #999;
border-radius: 5px;
font-family: 'Unica One', sans-serif;
font-size: 13px;
padding: 0;
text-align: center;
width: 250px;
}
.layer_selector > p {
border-bottom: 1px solid #999;
padding: 5px 10px;
text-transform: uppercase;
}
.layer_selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
.layer_selector li {
color: #444;
cursor: pointer;
padding: 10px 20px;
}
.layer_selector li:not(:last-child) {
border-bottom: 1px solid #999;
}
.layer_selector li:hover {
background-color: #a8ddb5;
cursor: pointer;
}
.layer_selector li.selected {
background-color: #7bccc4;
}
/*LEGEND STYLES*/
.legend {
background: rgba(255,255,255,0.9);
border: 1px solid #999;
border-radius: 5px;
font-family: 'Unica One', sans-serif;
font-size: 13px;
margin: 15px;
padding: 5px;
text-align: center;
width: 250px;
}
.legend .legend-title {
text-align: center;
margin-bottom: 10px;
font-family: 'Unica One', sans-serif;
text-transform: uppercase;
}
.legend .legend-scale ul {
font-family: 'Unica One', sans-serif;
margin: 0;
padding: 0;
float: left;
list-style: none;
}
.legend .legend-scale ul li {
display: block;
float: left;
width: 35px;
margin-bottom: 6px;
text-align: right;
font-size: 80%;
list-style: none;
}
.legend ul.legend-labels li span {
display: block;
float: left;
height: 15px;
width: 35px;
margin: 2px;
}
.legend .legend-source {
font-family: 'Unica One', sans-serif;
font-size: 70%;
color: #999;
clear: both;
}
.legend a {
color: #777;
}
</style>
<!-- SQL for fusing crash/pop data layers -->
<script type="text/template" id="sql">
SELECT ac.the_geom_webmercator, ac.population, ta.county_name, ceil(100000 * ta. number_crash / ac. population) crashes_per_capita, ceil(100000 * ta.number_fatality / ac.population) fatalities_per_capita
FROM
traffic_accidents ta, atl_census_demo_2010 ac
WHERE ac.county_name = ta.county_name
</script>
<!-- SIMPLE COUNTY MAP STYLE -->
<script type='text/template' id="simple">
/** simple visualization */
#atl_census_demo_2010{
polygon-fill: #0fa59f;
polygon-opacity: 0.7;
line-color: #FFF;
line-width: 1;
line-opacity: 1;
}
</script>
<!-- CHOROPLETH STYLE - fatalites per 100,000 ppl -->
<script type='cartocss/text' id="choropleth">
/** choropleth visualization */
#atl_census_demo_2010{
polygon-fill: #0fa59f;
polygon-opacity: 0.8;
line-color: #FFF;
line-width: 0.5;
line-opacity: 1;
}
#atl_census_demo_2010 [ fatalities_per_capita <= 116.48223645894] {
polygon-fill: #0C2C84;
}
#atl_census_demo_2010 [ fatalities_per_capita <= 43.4522839606757] {
polygon-fill: #225EA8;
}
#atl_census_demo_2010 [ fatalities_per_capita <= 34.5685840707965] {
polygon-fill: #1D91C0;
}
#atl_census_demo_2010 [ fatalities_per_capita <= 27.2727272727273] {
polygon-fill: #41B6C4;
}
#atl_census_demo_2010 [ fatalities_per_capita <= 21.2074084546868] {
polygon-fill: #7FCDBB;
}
#atl_census_demo_2010 [ fatalities_per_capita <= 16.7128259001051] {
polygon-fill: #C7E9B4;
}
#atl_census_demo_2010 [ fatalities_per_capita <= 12.3350191192796] {
polygon-fill: #FFFFCC;
}
</script>
</head>
<body>
<div id="map"></div>
<!-- ADD BUTTONS -->
<div id="cartocss" class="layer_selector">
<p>Buttons</p>
<ul>
<li data="choropleth" data-sql="sql">Fatality Choropleth Per Capita</li>
<li data="simple">Simple County Map</li>
</ul>
</div>
<!-- LEGENDS -->
<div id="legend" class='legend'>
<div class='legend-title'>Accidents by County (2006)</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#FFFFCC;'></span> < 12</li>
<li><span style='background:#C7E9B4;'></span></li>
<li><span style='background:#7FCDBB;'></span></li>
<li><span style='background:#41B6C4;'></span></li>
<li><span style='background:#1D91C0;'></span></li>
<li><span style='background:#225EA8;'></span></li>
<li><span style='background:#0C2C84;'></span> < 112</li>
</ul>
</div>
<div class='legend-source'>Source: <a href="http://www.gahighwaysafety.org/research/data-by-county/">GA Office of Highway Safety</a></div>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
window.onload = function () {
//
var layerSource = 'https://team.cartodb.com/u/aureliamoser/api/v2/viz/ed78c85e-c11b-11e4-ab66-0e853d047bba/viz.json'; // add your url ID here between viz/ and /viz.json
var options = {
sql: $("#sql").text(), // here you can set sql to run on your tables
cartocss: $("#simple").text() // here you can set css to style your vis
};
var sublayers = [];
// SET UP LEAFLET MAP OBJECT
var mapObj = new L.Map(map, { // <-- Replace map_id with your #id for rendering
center: [31.7550, -84.3900], // Atlanta, Georgia
zoom: 7 // zoom projection to adjust starting point zoom
});
// CREATE LAYER SELECTORS
function createSelector(layer) {
var cartocss = '';
var $options = $(".layer_selector").find("li");
$options.click(function(e) {
var $li = $(e.target);
var selected = $li.attr('data');
$options.removeClass('selected');
$li.addClass('selected');
cartocss = $('#'+selected).text();
layer[0].setCartoCSS(cartocss);
});
}
// ADD BASEMAP TILES
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(mapObj);
// ADD DATA TILES
cartodb.createLayer(mapObj,layerSource)
.addTo(mapObj)
.done(function(layer) {
console.log("Map successfully created.");
sublayers[0] = layer.getSubLayer(0);
sublayers[1] = layer.getSubLayer(1);
sublayers[0].set(options); // altering the SQL and CartoCSS; see above
sublayers[1].hide(); // hiding the traffic data
createSelector(sublayers);
})
.error(function(err) {
console.log("Map not created: " + err);
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment