CartoDB Custom Infowindow by wboykinm

index.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
 
    <link rel="stylesheet" href="//libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="//libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
    <![endif]-->
 
  </head>
    
  <body>
    <div id="map"></div>
  </body>
 
  <script type="infowindow/html" id="infowindow_template">
    <div class="cartodb-popup">
 
      <a href="#close" class="cartodb-popup-close-button close">x</a>
 
       <div class="cartodb-popup-content-wrapper">
         <div class="cartodb-popup-content">
           <img style="width: 100%" src="//chart.apis.google.com/chart?chs=270x200&cht=p3&chco=A6CEE3|1F78B4|B2DF8A|33A02C|FB9A99|E31A1C|FDBF6F&chd=t:{{content.data.sum_white}},{{content.data.sum_black}},{{content.data.sum_amind}},{{content.data.sum_asian}},{{content.data.sum_hawpac}},{{content.data.sum_tworac}},{{content.data.sum_other}}&chdl=White|Black|American+Indian|Asian|Hawaiian%2FPacific+Native|Multiracial|Other&chdlp=b&chp=2&chl={{content.data.sum_white}}|{{content.data.sum_black}}|{{content.data.sum_amind}}|{{content.data.sum_asian}}|{{content.data.sum_hawpac}}|{{content.data.sum_tworac}}|{{content.data.sum_other}}&chds=a&chma=5,5,10,5|5"></src>
           <!-- content.data contains the field info -->
           <hr>
           <h4>Ward {{content.data.ward}}</h4>
           <h4>Total Population: {{content.data.sum_totalp}}</h4>
         </div>
       </div>
       <div class="cartodb-popup-tip-container"></div>
    </div>
  </script>
 
  <script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
  
  <script>
 
    function main() {
 
      var map = L.map('map', { 
        zoomControl: true,
        center: [44.4758825, -73.212072],
        zoom: 13
      })
 
      // add a nice baselayer from mapbox
      L.tileLayer('//a.tiles.mapbox.com/v3/landplanner.map-a0wbwf43/{z}/{x}/{y}.png', {
        attribution: 'MapBox'
      }).addTo(map);
 
      cartodb.createLayer(map, '//geosprocket.cartodb.com/api/v1/viz/table_4ward_summary_race3/viz.json?callback=vizjson')
       .on('done', function(layer) {
 
        map.addLayer(layer);
 
        L.tileLayer('//a.tiles.mapbox.com/v3/landplanner.map-0wnm9063/{z}/{x}/{y}.png', {
        attribution: 'MapBox'
      }).addTo(map);
 
        layer.infowindow.set('template', $('#infowindow_template').html());
 
        layer.on('featureOver', function(e, pos, latlng, data) {
          console.log(e, pos, latlng, data);
        });
 
        layer.on('error', function(err) {
          console.log('error: ' + err);
        });
 
      }).on('error', function() {
        console.log("some error occurred");
      });
 
    }
 
    window.onload = main;
 
  </script>
 
 
</html>