f122bb03086cd80b0d17 by andrewxhill

index.html

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
     <link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <style>
      html, body, #map {
        height: 700px;
        width: 100%;
        padding: 0;
        margin: 0;
        background-color: #3E7BB6;
      }

      #map {
         background-color: #9abae0;
         box-shadow: inset 1px 1px 5px 1px;
      }
      .selected {
        background-color: #ff8a87;
      } 

      h1, 
      #tool-tip,
      #layer_selector li {
          font-family: 'Montserrat', sans-serif;
          font-weight: 400;
      }
      h1 {
        text-align: center;
        color: white;
      }
  


      #layer_selector {
        position: absolute;
        top: 70px;
        right: 350px;
        padding: 0;
      }

      #layer_selector ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }
      
      #show_cities {cursor: pointer;}
      #hide_cities {cursor: pointer;}

      #layer_selector li {
        border-bottom: 1px solid #999;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 13px;
        color: #444;
        cursor: pointer;
        display: inline;
        -webkit-transition: color 2s; /* For Safari 3.1 to 6.0 */
        transition: color 2s;
      }

      #layer_selector2 {
        position: absolute;
        top: 70px;
        right: 150px;
        padding: 0;
      }

      #layer_selector2 ul {
        padding: 0; margin: 0;
        list-style-type: none;
      }

      #layer_selector2 li {
        border-bottom: 1px solid #999;
        padding-left: 15px;
        padding-right: 5px;
        font-size: 13px;
        color: #444;
        cursor: pointer;
        display: inline;
        -webkit-transition: color 2s; /* For Safari 3.1 to 6.0 */
        transition: color 2s;
        font-family: 'Montserrat', sans-serif;
        font-weight: 400;
      }

      #layer_selector li:hover {
        color: #3E7BB6;
        cursor: pointer;
      }

      #layer_selector li.selected {
        color: white;
      }
      #tool-tip {
        position: absolute;
        width: auto;
        height: 55px;
        background-color: white;
        opacity: .9;
        z-index: 50;
        border-radius: 15px;
        text-align: center;
        color: #3E7BB6;
        vertical-align: bottom;
        font-size: 20px;
        padding: 5px;
      }


      #tool-tip p {
        margin-top: 5px;
      }

      #header_container { opacity: .7; height:60px; left:0; position:fixed; width:100%; top:0; }
      #header{ margin:0 auto; width:940px; text-align:center; }
    </style>
  </head>

  <body>
    <h1>Pollution Over Time</h1>
    <div id="map"></div>
    <div id="tool-tip"></div>
    
    <div id="header_container">
      <div id="header">
        <div id="layer_selector" class="cartodb-infobox">
          <ul>
            <li data="2000" class="selected">2000</li>
            <li data="2001">2001</li>
            <li data="2002">2002</li>
            <li data="2003">2003</li>
            <li data="2004">2004</li>
            <li data="2005">2005</li>
            <li data="2006">2006</li>
            <li data="2007">2007</li>
            <li data="2008">2008</li>
            <li data="2009">2009</li>
            <li data="2010">2010</li>
            <li data="2011">2011</li>
            <li data="2012">2012</li>  
          </ul>

        </div>
        <div id="layer_selector2" class="cartodb-infobox">
          <ul>
              <li data="pm_2_5" id="show_cities">Show Cities</li> 
              <li  id="hide_cities" class="selected">Hide Cities</li>
          </ul>
        </div>
        
      </div>
          
        

  </body>
  <script type="cartocss/html" id="cities">
#who_georeferenced_clean{
  marker-fill-opacity: 0.8;
  marker-line-color: #FFF;
  marker-line-width: 1.5;
  marker-line-opacity: 1;
  marker-width: 10;
  marker-fill: #FFFFB2;
  marker-allow-overlap: true;
}
#who_georeferenced_clean [ pm_2_5 <= 153] {
  marker-fill: #B10026;
}
#who_georeferenced_clean [ pm_2_5 <= 90] {
  marker-fill: #E31A1C;
}
#who_georeferenced_clean [ pm_2_5 <= 69] {
  marker-fill: #FC4E2A;
}
#who_georeferenced_clean [ pm_2_5 <= 55] {
  marker-fill: #FD8D3C;
}
#who_georeferenced_clean [ pm_2_5 <= 41] {
  marker-fill: #FEB24C;
}
#who_georeferenced_clean [ pm_2_5 <= 28] {
  marker-fill: #FED976;
}
#who_georeferenced_clean [ pm_2_5 <= 15] {
  marker-fill: #FFFFB2;
}

  </script>

   <script type="cartocss/html" id="pm25_na">
   /*City Styles*/

#pm25_na{
  polygon-fill: #FFFFB2;
  polygon-opacity: 0.8;
  line-color: #FFF;
  line-width: 1;
  line-opacity: 1;
}
#pm25_na [ {0} <= 32.54] {
   polygon-fill: #B10026;
}
#pm25_na [ {0} <= 25.17] {
   polygon-fill: #e34444;
}
#pm25_na [ {0} <= 15.17] {
   polygon-fill: #E31A1C;
}
#pm25_na [ {0} <= 10.85] {
   polygon-fill: #FC4E2A;
}
#pm25_na [ {0} <= 9.15] {
   polygon-fill: #fd6f27;
}
#pm25_na [ {0} <= 8.15] {
   polygon-fill: #FD8D3C;
}
#pm25_na [ {0} <= 6.06] {
   polygon-fill: #FEB24C;
}
#pm25_na [ {0} <= 4.62] {
   polygon-fill: #FED976;
}
#pm25_na [ {0} <= 2.98] {
   polygon-fill: #fffde2;
}
    </script>

    <script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script> 
     
     <script>
          $('#layer_selector li').click(function() {        
            $('#layer_select li').addClass('selected');
          });
          var col1 = 'pm25_2000';
          var col2 = '';
          var country = 'country';
          var city = 'city_station';
          var pm = 'pm_2_5';

          //Formats the columns for us into css
          String.prototype.format = (function (i, safe, arg) {
            function format() {
                var str = this,
                    len = arguments.length + 1;

                for (i = 0; i < len; arg = arguments[i++]) {
                    safe = typeof arg === 'object' ? JSON.stringify(arg) : arg;
                    str = str.replace(RegExp('\\{' + (i - 1) + '\\}', 'g'), safe);
                }
                return str;
            }

            //format.native = String.prototype.format;
            return format;
            
        })();

      // create layer selector
    function main() {
        var map = new L.Map('map', { 
          zoomControl: true,
          center: [43, 0],
          zoom: 2,
          scrollWheelZoom: true,
          searchControl: true
        });


        // create our layers
        cartodb.createLayer(map, {
          user_name: 'dmonay',
          type: 'cartodb',
          sublayers: [{
            sql: "SELECT * FROM bathymetry_layers",
            cartocss: "#bathymetry_layers{ polygon-fill: #598cdb;polygon-opacity: 0.2;line-color: #FFF;line-width: 0;line-opacity: 1;}"
            },{
            sql: "SELECT * FROM pm25_na",
            cartocss: $('#pm25_na').html().format('pm25_2000'),
            interactivity: "cartodb_id, the_geom, pm25_2000, pm25_2001, pm25_2002, pm25_2003, pm25_2004, pm25_2005, pm25_2006, pm25_2007, pm25_2008, pm25_2009, pm25_2010, pm25_2011, pm25_2012, country"
            },{
            sql: "SELECT * FROM who_georeferenced_clean",
            cartocss: $('#cities').html().format('city_station'),
            interactivity: "city_station, pm_2_5, country"
            
            }]

        }).done(function(layer) {
          // add the layers to our map 
          map.addLayer(layer);
          sublayer_country = layer.getSubLayer(1);
          sublayer_country.setInteraction(true);
          sublayer_city = layer.getSubLayer(2);
          sublayer_city.setInteraction(true);
          createSelector(sublayer_country);
          createSelector(sublayer_city);
          sublayer_city.hide();

          //create infowindow
          //  sublayer_city.infowindow.set('template', $('#infowindow_template').html()).on('error', function() {
          //  console.log("some error occurred");
          //});
          
          //Make Tool-tip follow the mouse.
          var event = function(e){
                  $('#tool-tip').css({
                     left:  e.pageX,
                     top:   e.pageY
                  });
              };
//Retrieve data to the tooltip on countries
          sublayer_country.on('featureOver', function(e, pos, latlng, data) {
            $('#tool-tip').html('<p>'  +data[country]+'<br>'+ data[col1] + '&mu;g/mm<sub>3</sub></p>');
            $(document).bind('mousemove', event);
            $('#tool-tip').show();
            
          });
            sublayer_country.on('featureOut', function(e, pos, latlng, data) {
           //Make the tooltip go away when off countries
            $('#tool-tip').hide();
            $(document).unbind('mousemove', event, false);
          });
//Retrieve data to the tooltip on cities
            sublayer_city.on('featureOver', function(e, pos, latlng, data) {
            $('#tool-tip').html('<p>'  +data[city]+', '+data[country]+  '<br>'+data[pm]+ '&mu;g/mm<sub>3</sub></p>');
            $(document).bind('mousemove', event);
            $('#tool-tip').show();
            
          });
            sublayer_city.on('featureOut', function(e, pos, latlng, data) {
           //Make the tooltip go away when off cities
            $('#tool-tip').hide();
            $(document).unbind('mousemove', event, false);
          });

            

            
    });
  }

      
      window.onload = main;

/*Selection process          ------------------------------------------                       */
     
     var styles = {}, selectedStyle;
      // create layer selector
      function createSelector(layer) {


        var $options = $('#layer_selector li');
        $options.click(function(e) {
          // get the area of the selected layer
          var $li = $(e.target);
          var year = $li.attr('data');

          // deselect all and select the clicked one
          $options.removeClass('selected');
          $li.addClass('selected');


          col1 = 'pm25_' + year;
          var style = $('#pm25_na').html().format(col1);
            layer.setCartoCSS(style);
            sublayer_city.hide();


          $('#show_cities').removeClass();
          $('#hide_cities').addClass('selected');
          }); 
        }

        //show and hide cities
          var $options2 = $('#layer_selector2 li');
          $options2.on("click", function(e) {
          // get the area of the selected layer
          var $li = $(e.target);
          // deselect all and select the clicked one
          $options2.removeClass('selected');
          $li.addClass('selected');
          }); 

  $("#show_cities").on("click", function(){
            //Set the column to the city_station from our cities table
            col2 = 'city_station';
            //create a local variable named style and convert our cities script above to html and run the format function defined above to render some CSS.
             var style = $('#cities').html().format(col2);
            //Attached the CSS to the layer
            sublayer_city.setCartoCSS(style);
             sublayer_city.show();
           });
          //Hide the cities on click
          $("#hide_cities").on("click", function(){
             sublayer_city.hide();
              var year = $('#layer_selector li.selected').attr('data');
              col1 = 'pm25_' + year;
             console.log(col1);
           });
       
    </script>

</script>
</html>