-
-
Save renecnielsen/8324388 to your computer and use it in GitHub Desktop.
CartoDB Map with Layers
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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