wboykinm/README.md

## README.md

      
    Raw
  

              README.md
            
          
    In this example, click on any polygon to see the custom infowindow, based on a template script that appears in the page header. Then, click on one of the layer switch buttons on the right to fire the event. The layer symbology updates, the layer title updates in the footer, but the infowindow text doesn't change, even though it should update along with everything else:
$('.tiptitle').text($(this).text());

What's the problem here? The most-likely culprit seems to be that the HTML of the infowindow template is not actually HTML, but a cue to the template script to assemble the HTML. That cue is not given by the click event of the layer button.

  
## index.html
<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" href="http://geosprocket.com/assets/cartodb/2.0.24/cartodb.css" />
  <link rel="stylesheet" href="http://geosprocket.com/assets/bootstrap/css/bootstrap-slate.css" />
  <link rel="stylesheet" href="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/css/l.geosearch.css" />
  <!--<link href="http://geosprocket.com/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">-->
   <!--[if lte IE 8]>
        <link rel="stylesheet"http://geosprocket.com/assets/cartodb/2.0.24/cartodb.ie.css" />
    <![endif]-->

	<style>
    html, body {width:100%; height:100%; padding: 0; margin: 0;}
    #map {width: 100%; height:100%; background: black; z-index:1;}
    #menu { position: absolute; top: 55px; right: 10px; width: 220px; height:60px; background: transparent; z-index:10; text-align: center;}

    #footer {
        position:absolute;
        bottom:0px;
        left:0px;
        right:0px;
        background:#fff;
        z-index:999;
        overflow:auto;
        /*height:160px;*/
        padding:5px;
        opacity:0.9;

    }
    .leaflet-container .leaflet-control-zoom {margin-top:55;}

	</style>
	<script>
	//Geocoder parameters
	  function getURLParameter(name) {
		    return decodeURI(
		        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,])[1]
		    );
		}

		var regionParameter = getURLParameter('region');
		var region = (regionParameter === 'undefined') ? '' : regionParameter;

  	  var map;
  	  function init(){
    // initiate leaflet map
    map = new L.Map('map', {
      center: [39.724089, -90.303955],
      zoom: 5
    });

    //Geocoder controls
    new L.Control.GeoSearch({
            provider: new L.GeoSearch.Provider.Google({
            	region: region
            })
        }).addTo(map);

    //Define Hash
    //var hash = new L.Hash(map);

    L.tileLayer('http://a.tiles.mapbox.com/v3/honeywell.map-2wuo3607/{z}/{x}/{y}.png', {
      attribution: 'MapBox'
    }).addTo(map);

    var layerUrl = 'http://geosprocket.cartodb.com/api/v1/viz/zipfsa_032713a/viz.json';
    var layerOptions = {
      query: "SELECT * FROM {{table_name}}",
      tile_style: "#{{table_name}}{[zoom<=8]{line-width:0;}[zoom>8][zoom<=11]{line-width:0.4;}[zoom>11]{line-width:1.5;}line-color:#3B007F;line-opacity:0.8;polygon-opacity:0.8;polygon-fill:#1D91C0;}"
    }

    var layers = [];
    var LayerActions = {
//Paybacks
      pb1: function(){
        //layers[0].setQuery("SELECT * FROM {{table_name}}");
        layers[0].setCartoCSS("#{{table_name}}{[zoom<=8]{line-width:0;}[zoom>8][zoom<=11]{line-width:0.4;}[zoom>11][zoom<=13]{line-width:1.2;}[zoom>13]{line-width:1.6;}line-color:#3B007F;line-opacity:0.8;polygon-opacity:0.6;[pb1<=3]{polygon-fill:#fff7fb;}[pb1>3][pb1<=6]{polygon-fill:#ece7f2;}[pb1>6][pb1<=10]{polygon-fill:#d0d1e6;}[pb1>10][pb1<=12]{polygon-fill:#a6bddb;}[pb1>12][pb1<=15]{polygon-fill:#74a9cf;}[pb1>15][pb1<=20]{polygon-fill:#3690c0;}[pb1>20][pb1<=30]{polygon-fill:#0570b0;}[pb1>30]{polygon-fill:#034e7b;}[ea6=0][pb2=0]{polygon-pattern-file: url('http://geosprocket.com/assets/img/Lines-3.png');polygon-pattern-opacity:0.2;}}#{{table_name}}::glow{[zoom>10]{line-color:#3B007F;line-opacity:0.1;line-width:4;}}#{{table_name}}::labels{[zoom>10]{text-name:[pb1];text-face-name:'DejaVu Sans Book';text-fill:#FFFFFF;text-allow-overlap:false;text-halo-fill:#3b007f;text-halo-radius:1.6;text-size:14;}}");
        return true;
      },
      pb2: function(){
        //layers[0].setQuery("SELECT * FROM {{table_name}}");
        layers[0].setCartoCSS("#{{table_name}}{[zoom<=8]{line-width:0;}[zoom>8][zoom<=11]{line-width:0.4;}[zoom>11]{line-width:1.5;}line-color:#3B007F;line-opacity:0.8;polygon-opacity:0.8;[pb2<=3]{polygon-fill:#fff7fb;}[pb2>3][pb2<=6]{polygon-fill:#ece7f2;}[pb2>6][pb2<=10]{polygon-fill:#d0d1e6;}[pb2>10][pb2<=12]{polygon-fill:#a6bddb;}[pb2>12][pb2<=15]{polygon-fill:#74a9cf;}[pb2>15][pb2<=20]{polygon-fill:#3690c0;}[pb2>20][pb2<=30]{polygon-fill:#0570b0;}[pb2>30]{polygon-fill:#034e7b;}[ea6=0][pb2=0]{polygon-pattern-file: url('http://geosprocket.com/assets/img/Lines-3.png');polygon-pattern-opacity:0.2;}}#{{table_name}}::glow{[zoom>10]{line-color:#3B007F;line-opacity:0.1;line-width:4;}}#{{table_name}}::labels{[zoom>10]{text-name:[pb2];text-face-name:'DejaVu Sans Book';text-fill:#FFFFFF;text-allow-overlap:false;text-halo-fill:#3b007f;text-halo-radius:1.6;text-size:14;}}");
        return true;
      }
    }

    cartodb.createLayer(map, layerUrl, layerOptions)
      .on('done', function(layer) {
        layer.infowindow.set('template', $('#infowindow_template').html());
        map.addLayer(layer);
        L.tileLayer('http://a.tiles.mapbox.com/v3/honeywell.map-hibh5g0z/{z}/{x}/{y}.png', {
        //attribution: 'Openstreetmap Contributors'
      }).addTo(map);


        layers.push(layer);
      }).on('error', function() {
        //log the error
      });

    var hash = new L.Hash(map);

    $('.lyr').click(function(){
    $('.lyr').removeClass('active');
    $(this).addClass('active');
    $('h3.switch-title').text($(this).text());
    console.log($(this).text())
    $('.tiptitle').text($(this).text());
    LayerActions[$(this).attr('id')]();
    })

  }
	</script>

<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">
           <!-- content.data contains the field info -->
           <h4 style="color:#333;">{{content.data.name}} - {{content.data.postal}}</h4>
	   <div class="tiptitle">Title Text</div>
           <a class="btn btn-primary" href="http://www.census.gov/geo/maps-data/data/tiger.html" target="_blank">Get the Data</a>
         </div>
       </div>
       <div class="cartodb-popup-tip-container"></div>
    </div>
  </script>
</head>
<body onload="init()">
  <div id='map'></div>

  <div id="menu">
<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle btn btn-info btn-small" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
        <i class="icon-time icon-white"></i>&nbspGroup1
      </a>
    </div>
    <div id="collapseOne" class="accordion-body collapse">
      <div class="accordion-inner">
        <div class="btn-group btn-group-vertical">
          <a href="#pb1" id="pb1" class="lyr btn btn-mini pb1">Variable 1</a>
        </div>
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle btn btn-info btn-small" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
        <i class="icon-shopping-cart icon-white"></i>&nbspGroup2
      </a>
    </div>
    <div id="collapseTwo" class="accordion-body collapse">
      <div class="accordion-inner">
        <div class="btn-group btn-group-vertical">
      <a href="#pb2" id="pb2" class="lyr btn btn-mini pb2">Variable 2</a>

        </div>
      </div>
    </div>
  </div>

  </div>
</div>

  </div>

  <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

          </button>
          <a class="brand" href="#">Postcode Tester</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#"><i class="icon-info-sign icon-white"></i>&nbspPage 1</a></li>
              <li><a href="#"><i class="icon-user icon-white"></i>&nbspPage 2</a></li>

            </ul>

            <form class="navbar-form form-search pull-right">
  		<!--<input type="text" class="input-xlarge search-query" placeholder="search for a place">-->
  		<!--<button type="submit" class="btn">Search</button>-->
           </form>
          </div>
        </div>
      </div>
    </div>


  <div id="footer">
      <div class="container">
        <ul class="inline">
          <li><h3 style="color:#333;" class="switch-title">|</h3></li>
          <li><h5><i>|</i></h5></li>
        </ul>
      </div>
  </div>


</body>
<script src="http://geosprocket.com/assets/cartodb/2.0.24/cartodb.js"></script>
<script src="http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://geosprocket.com/assets/stamen/leaflet-hash.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.control.geosearch.js"></script>
<script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.geosearch.provider.google.js"></script>


</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<link rel="stylesheet" href="http://geosprocket.com/assets/cartodb/2.0.24/cartodb.css" />
	<link rel="stylesheet" href="http://geosprocket.com/assets/bootstrap/css/bootstrap-slate.css" />
	<link rel="stylesheet" href="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/css/l.geosearch.css" />
	<!--<link href="http://geosprocket.com/assets/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet">-->
	<!--[if lte IE 8]>
	<link rel="stylesheet"http://geosprocket.com/assets/cartodb/2.0.24/cartodb.ie.css" />
	<![endif]-->

	<style>
	html, body {width:100%; height:100%; padding: 0; margin: 0;}
	#map {width: 100%; height:100%; background: black; z-index:1;}
	#menu { position: absolute; top: 55px; right: 10px; width: 220px; height:60px; background: transparent; z-index:10; text-align: center;}

	#footer {
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	background:#fff;
	z-index:999;
	overflow:auto;
	/height:160px;/
	padding:5px;
	opacity:0.9;

	}
	.leaflet-container .leaflet-control-zoom {margin-top:55;}

	</style>
	<script>
	//Geocoder parameters
	function getURLParameter(name) {
	return decodeURI(
	(RegExp(name + '=' + '(.+?)(&\|$)').exec(location.search)\|\|[,])[1]
	);
	}

	var regionParameter = getURLParameter('region');
	var region = (regionParameter === 'undefined') ? '' : regionParameter;

	var map;
	function init(){
	// initiate leaflet map
	map = new L.Map('map', {
	center: [39.724089, -90.303955],
	zoom: 5
	});

	//Geocoder controls
	new L.Control.GeoSearch({
	provider: new L.GeoSearch.Provider.Google({
	region: region
	})
	}).addTo(map);

	//Define Hash
	//var hash = new L.Hash(map);

	L.tileLayer('http://a.tiles.mapbox.com/v3/honeywell.map-2wuo3607/{z}/{x}/{y}.png', {
	attribution: 'MapBox'
	}).addTo(map);

	var layerUrl = 'http://geosprocket.cartodb.com/api/v1/viz/zipfsa_032713a/viz.json';
	var layerOptions = {
	query: "SELECT * FROM {{table_name}}",
	tile_style: "#{{table_name}}{[zoom<=8]{line-width:0;}[zoom>8][zoom<=11]{line-width:0.4;}[zoom>11]{line-width:1.5;}line-color:#3B007F;line-opacity:0.8;polygon-opacity:0.8;polygon-fill:#1D91C0;}"
	}

	var layers = [];
	var LayerActions = {
	//Paybacks
	pb1: function(){
	//layers[0].setQuery("SELECT * FROM {{table_name}}");
	layers[0].setCartoCSS("#{{table_name}}{[zoom<=8]{line-width:0;}[zoom>8][zoom<=11]{line-width:0.4;}[zoom>11][zoom<=13]{line-width:1.2;}[zoom>13]{line-width:1.6;}line-color:#3B007F;line-opacity:0.8;polygon-opacity:0.6;[pb1<=3]{polygon-fill:#fff7fb;}[pb1>3][pb1<=6]{polygon-fill:#ece7f2;}[pb1>6][pb1<=10]{polygon-fill:#d0d1e6;}[pb1>10][pb1<=12]{polygon-fill:#a6bddb;}[pb1>12][pb1<=15]{polygon-fill:#74a9cf;}[pb1>15][pb1<=20]{polygon-fill:#3690c0;}[pb1>20][pb1<=30]{polygon-fill:#0570b0;}[pb1>30]{polygon-fill:#034e7b;}[ea6=0][pb2=0]{polygon-pattern-file: url('http://geosprocket.com/assets/img/Lines-3.png');polygon-pattern-opacity:0.2;}}#{{table_name}}::glow{[zoom>10]{line-color:#3B007F;line-opacity:0.1;line-width:4;}}#{{table_name}}::labels{[zoom>10]{text-name:[pb1];text-face-name:'DejaVu Sans Book';text-fill:#FFFFFF;text-allow-overlap:false;text-halo-fill:#3b007f;text-halo-radius:1.6;text-size:14;}}");
	return true;
	},
	pb2: function(){
	//layers[0].setQuery("SELECT * FROM {{table_name}}");
	layers[0].setCartoCSS("#{{table_name}}{[zoom<=8]{line-width:0;}[zoom>8][zoom<=11]{line-width:0.4;}[zoom>11]{line-width:1.5;}line-color:#3B007F;line-opacity:0.8;polygon-opacity:0.8;[pb2<=3]{polygon-fill:#fff7fb;}[pb2>3][pb2<=6]{polygon-fill:#ece7f2;}[pb2>6][pb2<=10]{polygon-fill:#d0d1e6;}[pb2>10][pb2<=12]{polygon-fill:#a6bddb;}[pb2>12][pb2<=15]{polygon-fill:#74a9cf;}[pb2>15][pb2<=20]{polygon-fill:#3690c0;}[pb2>20][pb2<=30]{polygon-fill:#0570b0;}[pb2>30]{polygon-fill:#034e7b;}[ea6=0][pb2=0]{polygon-pattern-file: url('http://geosprocket.com/assets/img/Lines-3.png');polygon-pattern-opacity:0.2;}}#{{table_name}}::glow{[zoom>10]{line-color:#3B007F;line-opacity:0.1;line-width:4;}}#{{table_name}}::labels{[zoom>10]{text-name:[pb2];text-face-name:'DejaVu Sans Book';text-fill:#FFFFFF;text-allow-overlap:false;text-halo-fill:#3b007f;text-halo-radius:1.6;text-size:14;}}");
	return true;
	}
	}

	cartodb.createLayer(map, layerUrl, layerOptions)
	.on('done', function(layer) {
	layer.infowindow.set('template', $('#infowindow_template').html());
	map.addLayer(layer);
	L.tileLayer('http://a.tiles.mapbox.com/v3/honeywell.map-hibh5g0z/{z}/{x}/{y}.png', {
	//attribution: 'Openstreetmap Contributors'
	}).addTo(map);


	layers.push(layer);
	}).on('error', function() {
	//log the error
	});

	var hash = new L.Hash(map);

	$('.lyr').click(function(){
	$('.lyr').removeClass('active');
	$(this).addClass('active');
	$('h3.switch-title').text($(this).text());
	console.log($(this).text())
	$('.tiptitle').text($(this).text());
	LayerActions[$(this).attr('id')]();
	})

	}
	</script>

	<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">
	<!-- content.data contains the field info -->
	<h4 style="color:#333;">{{content.data.name}} - {{content.data.postal}}</h4>
	<div class="tiptitle">Title Text</div>
	<a class="btn btn-primary" href="http://www.census.gov/geo/maps-data/data/tiger.html" target="_blank">Get the Data</a>
	</div>
	</div>
	<div class="cartodb-popup-tip-container"></div>
	</div>
	</script>
	</head>
	<body onload="init()">
	<div id='map'></div>

	<div id="menu">
	<div class="accordion" id="accordion2">
	<div class="accordion-group">
	<div class="accordion-heading">
	<a class="accordion-toggle btn btn-info btn-small" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
	<i class="icon-time icon-white"></i>&nbspGroup1
	</a>
	</div>
	<div id="collapseOne" class="accordion-body collapse">
	<div class="accordion-inner">
	<div class="btn-group btn-group-vertical">
	<a href="#pb1" id="pb1" class="lyr btn btn-mini pb1">Variable 1</a>
	</div>
	</div>
	</div>
	</div>
	<div class="accordion-group">
	<div class="accordion-heading">
	<a class="accordion-toggle btn btn-info btn-small" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
	<i class="icon-shopping-cart icon-white"></i>&nbspGroup2
	</a>
	</div>
	<div id="collapseTwo" class="accordion-body collapse">
	<div class="accordion-inner">
	<div class="btn-group btn-group-vertical">
	<a href="#pb2" id="pb2" class="lyr btn btn-mini pb2">Variable 2</a>

	</div>
	</div>
	</div>
	</div>

	</div>
	</div>

	</div>

	<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
	<div class="container">
	<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

	</button>
	<a class="brand" href="#">Postcode Tester</a>
	<div class="nav-collapse collapse">
	<ul class="nav">
	<li class="active"><a href="#"><i class="icon-info-sign icon-white"></i>&nbspPage 1</a></li>
	<li><a href="#"><i class="icon-user icon-white"></i>&nbspPage 2</a></li>

	</ul>

	<form class="navbar-form form-search pull-right">
	<!--<input type="text" class="input-xlarge search-query" placeholder="search for a place">-->
	<!--<button type="submit" class="btn">Search</button>-->
	</form>
	</div>
	</div>
	</div>
	</div>





	<div id="footer">
	<div class="container">
	<ul class="inline">
	<li><h3 style="color:#333;" class="switch-title">\|</h3></li>
	<li><h5><i>\|</i></h5></li>
	</ul>
	</div>
	</div>


	</body>
	<script src="http://geosprocket.com/assets/cartodb/2.0.24/cartodb.js"></script>
	<script src="http://geosprocket.com/assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="http://geosprocket.com/assets/stamen/leaflet-hash.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.control.geosearch.js"></script>
	<script src="http://geosprocket.com/assets/leaflet/L.GeoSearch-master/src/js/l.geosearch.provider.google.js"></script>


	</html>