Skip to content

Instantly share code, notes, and snippets.

@renecnielsen

renecnielsen/index.html

Forked from andrewxhill/index.html
Last active January 2, 2016 15:38
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 renecnielsen/8324388 to your computer and use it in GitHub Desktop.
Save renecnielsen/8324388 to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB Map with Layers
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Post-2015 Map | UN Global Pulse | 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" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
<style>
html, body, #cartodbMap {
height: 100%;
padding: 0;
margin: 0;
font-weight: 300 !important;
}
#layer_selector {
position: relative;
top: -580px;
right: 20px;
padding: 0;
float: right;
}
#layer_selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
#layer_selector li {
border-bottom: 1px solid #F0F0F0;
padding: 5px 10px;
font-family: "Open Sans", Arial, sans-serif !important;
font-size: 12px;
color: #444;
cursor: auto;
}
#layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
#layer_selector li.selected {
background-color: #F0F0F0;
}
div.cartodb-popup {
width:300px !important;
background:url('light.png') no-repeat -300px 0 !important;
}
div.cartodb-popup div.cartodb-popup-content-wrapper {
width:264px !important;
background:url('light.png') repeat-y -600px 0 !important;
}
div.cartodb-popup div.cartodb-popup-tip-container {
width: 300px !important;
background:url('light.png') no-repeat 0 0 !important;
}
div.cartodb-popup p {
width: 264px !important;
max-width: 280px !important;
font: 11px/0.8 "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;
}
div.cartodb-popup h3 {
font: 14px/1.2 "Open Sans", Arial, sans-serif !important;
font-weight: 600 !important;
}
div.cartodb-popup h4 {
font: 12px/2.5 "Open Sans", Arial, sans-serif !important;
font-weight: 600 !important;
color: #515A5F !important;
text-transform: none !important;
}
.cartodb-popup-content-wrapper {
width: 264px !important;
max-width: 300px !important;
}
.cartodb-popup .cartodb-popup-content {
width: 264px !important;
max-width: 300px !important;
min-height: 300px !important;
}
div.cartodb-popup .jspContainer:after,
div.cartodb-popup .jspContainer:before {
width: 264px !important;
}
</style>
<div id="cartodbMap"></div>
<div id="layer_selector" class="cartodb-infobox">
<ul>
<li id="education" class="selected">A good education</li>
<li id="water">Access to clean water and sanitation</li>
<li id="climate">Action taken on climate change</li>
<li id="food">Affordable and nutritious food</li>
<li id="government">An honest and responsive government</li>
<li id="health">Better healthcare</li>
<li id="job">Better job opportunities</li>
<li id="transport">Better transport and roads</li>
<li id="equality">Equality between men and women</li>
<li id="discrimination">Freedom from discrimination</li>
<li id="phone">Phone and internet access</li>
<li id="politicalfreedoms">Political freedoms</li>
<li id="forests">Protecting forests rivers and oceans</li>
<li id="crime">Protection against crime and violence</li>
<li id="energy">Reliable energy at home</li>
<li id="support">Support for people who can't work</li>
</ul>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="cartocss/html" id="post2015_education">
/** choropleth visualization */
/** All colours created via http://0to255.com */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ education_bin = 1] {
polygon-fill: #297877;
}
#post_2015 [ education_bin = 2] {
polygon-fill: #329190;
}
#post_2015 [ education_bin = 3] {
polygon-fill: #3aaba9;
}
#post_2015 [ education_bin = 4] {
polygon-fill: #47c0be;
}
#post_2015 [ education_bin = 5] {
polygon-fill: #60c9c7;
}
#post_2015 [ education_bin = 6] {
polygon-fill: #7ad1d0;
}
#post_2015 [ education_bin = 7] {
polygon-fill: #93dad9;
}
</script>
<script type="cartocss/html" id="post2015_water">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ water_bin = 1] {
polygon-fill: #439f90;
}
#post_2015 [ water_bin = 2] {
polygon-fill: #4fb5a4;
}
#post_2015 [ water_bin = 3] {
polygon-fill: #67bfb0;
}
#post_2015 [ water_bin = 4] {
polygon-fill: #7fc9bd;
}
#post_2015 [ water_bin = 5] {
polygon-fill: #97d3c9;
}
#post_2015 [ water_bin = 6] {
polygon-fill: #afddd5;
}
#post_2015 [ water_bin = 7] {
polygon-fill: #c7e7e2;
}
</script>
<script type="cartocss/html" id="post2015_climate">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ climate_bin = 1] {
polygon-fill: #db8804;
}
#post_2015 [ climate_bin = 2] {
polygon-fill: #fb9d06;
}
#post_2015 [ climate_bin = 3] {
polygon-fill: #fbaa28;
}
#post_2015 [ climate_bin = 4] {
polygon-fill: #fcb749;
}
#post_2015 [ climate_bin = 5] {
polygon-fill: #fdc46a;
}
#post_2015 [ climate_bin = 6] {
polygon-fill: #fdd18c;
}
#post_2015 [ climate_bin = 7] {
polygon-fill: #fedfad;
}
</script>
<script type="cartocss/html" id="post2015_food">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ food_bin = 1] {
polygon-fill: #7a9929;
}
#post_2015 [ food_bin = 2] {
polygon-fill: #90b430;
}
#post_2015 [ food_bin = 3] {
polygon-fill: #a3cb3b;
}
#post_2015 [ food_bin = 4] {
polygon-fill: #b0d256;
}
#post_2015 [ food_bin = 5] {
polygon-fill: #bdd971;
}
#post_2015 [ food_bin = 6] {
polygon-fill: #c9e08c;
}
#post_2015 [ food_bin = 7] {
polygon-fill: #d6e7a6;
}
</script>
<script type="cartocss/html" id="post2015_government">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ government_bin = 1] {
polygon-fill: #156c93;
}
#post_2015 [ government_bin = 2] {
polygon-fill: #1982b1;
}
#post_2015 [ government_bin = 3] {
polygon-fill: #1e97cf;
}
#post_2015 [ government_bin = 4] {
polygon-fill: #2da9e1;
}
#post_2015 [ government_bin = 5] {
polygon-fill: #4bb5e5;
}
#post_2015 [ government_bin = 6] {
polygon-fill: #68c1e9;
}
#post_2015 [ government_bin = 7] {
polygon-fill: #86ceee;
}
</script>
<script type="cartocss/html" id="post2015_health">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ health_bin = 1] {
polygon-fill: #752217;
}
#post_2015 [ health_bin = 2] {
polygon-fill: #912a1d;
}
#post_2015 [ health_bin = 3] {
polygon-fill: #ae3222;
}
#post_2015 [ health_bin = 4] {
polygon-fill: #ca3a28;
}
#post_2015 [ health_bin = 5] {
polygon-fill: #d84d3c;
}
#post_2015 [ health_bin = 6] {
polygon-fill: #de6758;
}
#post_2015 [ health_bin = 7] {
polygon-fill: #e48174;
}
</script>
<script type="cartocss/html" id="post2015_job">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ job_bin = 1] {
polygon-fill: #aa1066;
}
#post_2015 [ job_bin = 2] {
polygon-fill: #c91378;
}
#post_2015 [ job_bin = 3] {
polygon-fill: #e8168b;
}
#post_2015 [ job_bin = 4] {
polygon-fill: #ec349a;
}
#post_2015 [ job_bin = 5] {
polygon-fill: #ef53aa;
}
#post_2015 [ job_bin = 6] {
polygon-fill: #f272b9;
}
#post_2015 [ job_bin = 7] {
polygon-fill: #f591c9;
}
</script>
<script type="cartocss/html" id="post2015_transport">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.9;
}
#post_2015 [ transport_bin = 1] {
polygon-fill: #dbb308;
}
#post_2015 [ transport_bin = 2] {
polygon-fill: #f6ca0f;
}
#post_2015 [ transport_bin = 3] {
polygon-fill: #f7d130;
}
#post_2015 [ transport_bin = 4] {
polygon-fill: #f9d950;
}
#post_2015 [ transport_bin = 5] {
polygon-fill: #fae071;
}
#post_2015 [ transport_bin = 6] {
polygon-fill: #fbe792;
}
#post_2015 [ transport_bin = 7] {
polygon-fill: #fceeb3;
}
</script>
<script type="cartocss/html" id="post2015_equality">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ equality_bin = 1] {
polygon-fill: #822761;
}
#post_2015 [ equality_bin = 2] {
polygon-fill: #9c2e74;
}
#post_2015 [ equality_bin = 3] {
polygon-fill: #b63688;
}
#post_2015 [ equality_bin = 4] {
polygon-fill: #c84699;
}
#post_2015 [ equality_bin = 5] {
polygon-fill: #d060a7;
}
#post_2015 [ equality_bin = 6] {
polygon-fill: #d87ab6;
}
#post_2015 [ equality_bin = 7] {
polygon-fill: #df95c4;
}
</script>
<script type="cartocss/html" id="post2015_discrimination">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ discrimination_bin = 1] {
polygon-fill: #a0546d;
}
#post_2015 [ discrimination_bin = 2] {
polygon-fill: #af677f;
}
#post_2015 [ discrimination_bin = 3] {
polygon-fill: #bb7d92;
}
#post_2015 [ discrimination_bin = 4] {
polygon-fill: #c793a4;
}
#post_2015 [ discrimination_bin = 5] {
polygon-fill: #d2aab7;
}
#post_2015 [ discrimination_bin = 6] {
polygon-fill: #dec0ca;
}
#post_2015 [ discrimination_bin = 7] {
polygon-fill: #ead6dd;
}
</script>
<script type="cartocss/html" id="post2015_phone">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ phone_bin = 1] {
polygon-fill: #3887b4;
}
#post_2015 [ phone_bin = 2] {
polygon-fill: #4898c6;
}
#post_2015 [ phone_bin = 3] {
polygon-fill: #62a6ce;
}
#post_2015 [ phone_bin = 4] {
polygon-fill: #7cb5d6;
}
#post_2015 [ phone_bin = 5] {
polygon-fill: #96c4de;
}
#post_2015 [ phone_bin = 6] {
polygon-fill: #b0d2e6;
}
#post_2015 [ phone_bin = 7] {
polygon-fill: #cae1ee;
}
</script>
<script type="cartocss/html" id="post2015_politicalfreedoms">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ politicalfreedoms_bin = 1] {
polygon-fill: #4a215e;
}
#post_2015 [ politicalfreedoms_bin = 2] {
polygon-fill: #5e2a77;
}
#post_2015 [ politicalfreedoms_bin = 3] {
polygon-fill: #723390;
}
#post_2015 [ politicalfreedoms_bin = 4] {
polygon-fill: #863ca9;
}
#post_2015 [ politicalfreedoms_bin = 5] {
polygon-fill: #9849be;
}
#post_2015 [ politicalfreedoms_bin = 6] {
polygon-fill: #a662c7;
}
#post_2015 [ politicalfreedoms_bin = 7] {
polygon-fill: #b57bd0;
}
</script>
<script type="cartocss/html" id="post2015_forests">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ forests_bin = 1] {
polygon-fill: #447429;
}
#post_2015 [ forests_bin = 2] {
polygon-fill: #538e31;
}
#post_2015 [ forests_bin = 3] {
polygon-fill: #62a73a;
}
#post_2015 [ forests_bin = 4] {
polygon-fill: #71be45;
}
#post_2015 [ forests_bin = 5] {
polygon-fill: #84c75e;
}
#post_2015 [ forests_bin = 6] {
polygon-fill: #97d077;
}
#post_2015 [ forests_bin = 7] {
polygon-fill: #abd891;
}
</script>
<script type="cartocss/html" id="post2015_crime">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ crime_bin = 1] {
polygon-fill: #1c394b;
}
#post_2015 [ crime_bin = 2] {
polygon-fill: #254c64;
}
#post_2015 [ crime_bin = 3] {
polygon-fill: #2f5e7c;
}
#post_2015 [ crime_bin = 4] {
polygon-fill: #387195;
}
#post_2015 [ crime_bin = 5] {
polygon-fill: #4184ae;
}
#post_2015 [ crime_bin = 6] {
polygon-fill: #5395be;
}
#post_2015 [ crime_bin = 7] {
polygon-fill: #6ba4c8;
}
</script>
<script type="cartocss/html" id="post2015_energy">
/** choropleth visualization */
#post_2015{
line-color: #FFF;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ energy_bin = 1] {
polygon-fill: #490d1d;
}
#post_2015 [ energy_bin = 2] {
polygon-fill: #661229;
}
#post_2015 [ energy_bin = 3] {
polygon-fill: #831734;
}
#post_2015 [ energy_bin = 4] {
polygon-fill: #a01c40;
}
#post_2015 [ energy_bin = 5] {
polygon-fill: #bd214c;
}
#post_2015 [ energy_bin = 6] {
polygon-fill: #d92757;
}
#post_2015 [ energy_bin = 7] {
polygon-fill: #de446e;
}
</script>
<script type="cartocss/html" id="post2015_support">
/** choropleth visualization */
#post_2015{
line-color: #ffffff;
line-opacity: 1;
line-width: 1;
polygon-opacity: 0.8;
}
#post_2015 [ support_bin = 1] {
polygon-fill: #1c2d69;
}
#post_2015 [ support_bin = 2] {
polygon-fill: #233884;
}
#post_2015 [ support_bin = 3] {
polygon-fill: #2a439f;
}
#post_2015 [ support_bin = 4] {
polygon-fill: #314fba;
}
#post_2015 [ support_bin = 5] {
polygon-fill: #405fcc;
}
#post_2015 [ support_bin = 6] {
polygon-fill: #5b75d4;
}
#post_2015 [ support_bin = 7] {
polygon-fill: #768cdb;
}
</script>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
var styles = {}, selectedStyle;
// create layer selector
function createSelector(layer) {
var sql = new cartodb.SQL({ user: 'unglobalpulse' });
var $options = $('#layer_selector li');
$options.click(function(e) {
// get the area of the selected layer
var $li = $(e.target);
var style = $li.attr('id');
if(selectedStyle != style ){
// change the style in the layer to update the map
layer.setCartoCSS(styles[style]);
selectedStyle = style;
$options.removeClass('selected');
$li.addClass('selected');
}
});
}
function main() {
// get the currently selected style
selectedStyle = $('li.selected').attr('id');
cartodb.createVis('cartodbMap', 'http://unglobalpulse.cartodb.com/api/v2/viz/30162584-53b4-11e3-9949-e57ed5f502e8/viz.json', {scrollwheel:false, zoom:2, shareable:true, legends:true, infowindow:true} )
.done(function(vis, layers) {
// create a new assoc array of styles
// key values must mach ids of menu list in HTML
styles['education'] = $('#post2015_education').html();
styles['water'] = $('#post2015_water').html();
styles['climate'] = $('#post2015_climate').html();
styles['food'] = $('#post2015_food').html();
styles['government'] = $('#post2015_government').html();
styles['health'] = $('#post2015_health').html();
styles['job'] = $('#post2015_job').html();
styles['transport'] = $('#post2015_transport').html();
styles['equality'] = $('#post2015_equality').html();
styles['discrimination'] = $('#post2015_discrimination').html();
styles['phone'] = $('#post2015_phone').html();
styles['politicalfreedoms'] = $('#post2015_politicalfreedoms').html();
styles['forests'] = $('#post2015_forests').html();
styles['crime'] = $('#post2015_crime').html();
styles['energy'] = $('#post2015_energy').html();
styles['support'] = $('#post2015_support').html();
// layer 0 is the base layer, layer 1 is cartodb layer
var subLayer = layers[1].getSubLayer(0);
//sublayer.infowindow.set('template', cartodb_infowindow);
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