CartoDB Map with Layers

<!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="https://cartodb.com/assets/favicon.ico" />
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    
    <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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

<script src="https://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

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', 'https://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>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://maps.googleapis.com/maps/api/js?sensor=false

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js