Skip to content

Instantly share code, notes, and snippets.

@auremoser
Created July 6, 2015 16:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save auremoser/2b7f220807ca12d0ac89 to your computer and use it in GitHub Desktop.
Save auremoser/2b7f220807ca12d0ac89 to your computer and use it in GitHub Desktop.
IL: Air Pollution Map

This map layers industrial, transportation, and electrical - contributors to air pollution in municipal districts in Israel..

Buttons toggle different CSS renderings of the "choropleth maps" layers and screened to show how they contribute to pollution risk. Just a prototype, data here.

<!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;
}
#sql {
position: absolute;
right: 292px;
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;
color: #666;
font-family: 'Helvetica', Arial, 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: 'Helvetica', Arial, sans-serif;
font-size: 13px;
margin: 15px;
padding: 5px;
text-align: center;
width: 270px;
z-index: 100;
}
.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: 50px;
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: 55px;
margin: 8px;
}
.legend .legend-source {
font-family: 'Unica One', sans-serif;
font-size: 70%;
color: #999;
clear: both;
}
.legend a {
color: #777;
}
</style>
<!-- SQL TEMPLATE -->
<script type='sql/text' id='sql'>
SELECT * FROM pollutant_emissions_merge
</script>
<!-- CHOROPLETH - Electricity VIS CSS -->
<style type='cartocss/text' id='electric'>
/** choropleth visualization */
#pollutant_emissions_merge{
polygon-fill: #FFFFCC;
polygon-opacity: 0.9;
line-color: #FFFFFF;
line-width: 0;
line-opacity: 1;
}
#pollutant_emissions_merge [ electricity <= 60980.4] {
polygon-fill: #253494;
}
#pollutant_emissions_merge [ electricity <= 2263.8] {
polygon-fill: #2C7FB8;
}
#pollutant_emissions_merge [ electricity <= 826.5] {
polygon-fill: #41B6C4;
}
#pollutant_emissions_merge [ electricity <= 594.4] {
polygon-fill: #A1DAB4;
}
#pollutant_emissions_merge [ electricity <= 479.9] {
polygon-fill: #FFFFCC;
}
</style>
<!-- CHOROPLETH - Industry CSS -->
<style type='cartocss/text' id='industry'>
/** choropleth visualization */
#pollutant_emissions_merge{
polygon-fill: #FFFFCC;
polygon-opacity: 0.2;
line-color: #FFFFFF;
line-width: 0;
line-opacity: 1;
}
#pollutant_emissions_merge [ industry <= 6590.1] {
polygon-fill: #253494;
}
#pollutant_emissions_merge [ industry <= 1041.9] {
polygon-fill: #2C7FB8;
}
#pollutant_emissions_merge [ industry <= 130.1] {
polygon-fill: #41B6C4;
}
#pollutant_emissions_merge [ industry <= 38.2] {
polygon-fill: #A1DAB4;
}
#pollutant_emissions_merge [ industry <= 15.7] {
polygon-fill: #FFFFCC;
}
</style>
<style type='cartocss/text' id='transport'>
/** choropleth visualization */
#pollutant_emissions_merge{
polygon-fill: #FFFFCC;
polygon-opacity: 0.9;
polygon-comp-op: darken;
line-color: #FFFFFF;
line-width: 0;
line-opacity: 1;
}
#pollutant_emissions_merge [ transport <= 1264.3] {
polygon-fill: #253494;
}
#pollutant_emissions_merge [ transport <= 628.4] {
polygon-fill: #2C7FB8;
}
#pollutant_emissions_merge [ transport <= 413.7] {
polygon-fill: #41B6C4;
}
#pollutant_emissions_merge [ transport <= 299.9] {
polygon-fill: #A1DAB4;
}
#pollutant_emissions_merge [ transport <= 147.4] {
polygon-fill: #FFFFCC;
}
</style>
</head>
<body>
<div id="map"></div>
<!-- ADD BUTTONS -->
<div id="cartocss" class="layer_selector">
<p><strong>Layers</strong></p>
<ul>
<li data="industry">Industrial Pollution</li>
<li data="electric">Electrical Pollution</li>
<li data="transport">Transport Pollution</li>
</ul>
</div>
<!-- LEGENDS -->
<div id="legend" class='legend'>
<div class='legend-title'>Pollution by Municipality</div>
<hr>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#FFFFCC;'></span> Less </li>
<li><span style='background:#A1DAB4;'></span></li>
<li><span style='background:#41B6C4;'></span></li>
<li><span style='background:#2C7FB8;'></span></li>
<li><span style='background:#253494;'></span> More </li>
</ul>
</div>
<div class='legend-source'>Source: <a href="http://idoivri.github.io/airpollution/">Air Pollution Israel</a></div>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!-- place your code between the script tags below -->
<script src="main.js"></script>
</body>
</html>
window.onload = function() {
var vizjson_url = 'https://team.cartodb.com/u/aureliamoser/api/v2/viz/f1af78c8-23c7-11e5-bff0-0e9d821ea90d/viz.json'; // <-- Paste viz.json URL between quotes
var options = {
sql: $("#sql").text(), // here you can set sql to run on your tables
cartocss: $("#industry").text() // here you can set css to style your choropleth
}
// clear sql of space and returns
options.sql = options.sql.replace(/(\r\n|\n|\r)/gm,'').trim();
var sublayers = [];
// instantiate map object from Leaflet
var mapObj = new L.Map(map, { // <-- Replace map_id with your #id for rendering
center: [31.5000, 34.9000], // Telaviv, IL
zoom: 8 // zoom projection to adjust starting point zoom
});
// CREATE LAYER SELECTOR - AKA BUTTONS
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 tile layers here (if you have multiple layers, you can manipulate them in js here)
cartodb.createLayer(mapObj,vizjson_url)
.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 municipality basic polygons
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