andrewxhill/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!--Edit the title of the page-->
    <title>CartoDB Point Clustering</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <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]-->
    <!--Switch between the different themes changing the stylesheet below - light-theme.css |dark-theme.css -->

    <style type="text/css">
    /* Change the styles below in order to customize your template */

    body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #555; background-color: #FFF; margin: 0;}

    .wrapper{display: block; padding: 4px 30px 0 30px;}

    .map{background-color:#eee; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; *height:100%;}
    .sidepanel{background-color:rgba(0,0,0,0.6); position: absolute; top: 50px; right: 50px; bottom: 0; width: 33%; height: 77%; overflow: scroll; color: #fff; text-shadow: 2px 2px 2px #333; display: none;}
    .clicked { }

    /* Here are the styles that makes the template responsive */

    @media only screen and (max-width: 768px) {
      .map{position: inherit; height: 400px; width: 100%; display: block;}
      .sidepanel{position: inherit; width: 100%;}
    }

    @media only screen and (max-width: 480px) {
      .map {height: 300px;}
    }
    </style>
  </head>
  <body>

    <div class="map" id="map"></div>

    <div class="sidepanel">
      <div class="wrapper">
        <div class="here"></div>
      </div>
    </div>

    <script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3.8"></script>
    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script type="text/javascript">
      var map;

      function addCursorInteraction(layer) {
        var sql = cartodb.SQL({ user: 'andrew' });

        layer.bind('featureClick', function(e, latlon, pxPos, clickData, layer) {
          $('.sidepanel').show()
          sql.execute("SELECT * FROM twain WHERE ST_Intersects(the_geom, CDB_LatLng({0},{1}))".format(clickData.lat, clickData.lon)).done(function(data) {
              console.log(data)
              // get a count of overlapping points
              $('.here').append($('<p>').text('Overlapping points: {0}'.format(data.rows.length)));

              // do something with each point in the return
              // here just display the value of two columns, cartodb_id and source
              for(var i=0; i<data.rows.length; i++){
                $('.here').append($('<p>').text('Point {0}: {1}'.format(data.rows[i].cartodb_id, data.rows[i].source)));
              }
          });

        });


        var hovers = [];

        layer.bind('featureOver', function(e, latlon, pxPos, data, layer) {
          hovers[layer] = 1;
          if(_.any(hovers)) {
            $('#map').css('cursor', 'pointer');
          }
        });

        layer.bind('featureOut', function(m, layer) {
          hovers[layer] = 0;
          if(!_.any(hovers)) {
            $('#map').css('cursor', 'auto');
          }
        });
      }

      function main() {

        // create leaflet map
        map = L.map('map', {
          zoomControl: true,
          center: [29.9537, -90.0777],
          zoom: 9
        })

        // add a base layer
        L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
          attribution: 'Stamen'
        }).addTo(map);

        var sublayer;
        // add cartodb layer with one sublayer
        cartodb.createLayer(map, {
          user_name: 'andrew',
          type: 'cartodb',
          sublayers: [{
             sql: "SELECT *, ST_X(the_geom) lon, ST_Y(the_geom) lat FROM twain WHERE name = 'New Orleans, LA, US'",
             cartocss: '#table_name {marker-fill: #0F3B82; marker-width: 25; marker-line-color: #FFF; marker-line-width: 1.5; }',
             interactivity: 'cartodb_id, lat, lon'
          }]
        })
        .addTo(map)
        .done(function(layer) {
          sublayer = layer.getSubLayer(0);
          sublayer.setInteraction(true);
          addCursorInteraction(sublayer);
        });


      }

      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;
        })();
      // you could use $(window).load(main);
      window.onload = main;
    </script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<!--Edit the title of the page-->
	<title>CartoDB Point Clustering</title>
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<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]-->
	<!--Switch between the different themes changing the stylesheet below - light-theme.css \|dark-theme.css -->

	<style type="text/css">
	/* Change the styles below in order to customize your template */

	body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #555; background-color: #FFF; margin: 0;}

	.wrapper{display: block; padding: 4px 30px 0 30px;}

	.map{background-color:#eee; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; *height:100%;}
	.sidepanel{background-color:rgba(0,0,0,0.6); position: absolute; top: 50px; right: 50px; bottom: 0; width: 33%; height: 77%; overflow: scroll; color: #fff; text-shadow: 2px 2px 2px #333; display: none;}
	.clicked { }

	/* Here are the styles that makes the template responsive */

	@media only screen and (max-width: 768px) {
	.map{position: inherit; height: 400px; width: 100%; display: block;}
	.sidepanel{position: inherit; width: 100%;}
	}

	@media only screen and (max-width: 480px) {
	.map {height: 300px;}
	}
	</style>
	</head>
	<body>

	<div class="map" id="map"></div>

	<div class="sidepanel">
	<div class="wrapper">
	<div class="here"></div>
	</div>
	</div>

	<script src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3.8"></script>
	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

	<script type="text/javascript">
	var map;

	function addCursorInteraction(layer) {
	var sql = cartodb.SQL({ user: 'andrew' });

	layer.bind('featureClick', function(e, latlon, pxPos, clickData, layer) {
	$('.sidepanel').show()
	sql.execute("SELECT * FROM twain WHERE ST_Intersects(the_geom, CDB_LatLng({0},{1}))".format(clickData.lat, clickData.lon)).done(function(data) {
	console.log(data)
	// get a count of overlapping points
	$('.here').append($('<p>').text('Overlapping points: {0}'.format(data.rows.length)));

	// do something with each point in the return
	// here just display the value of two columns, cartodb_id and source
	for(var i=0; i<data.rows.length; i++){
	$('.here').append($('<p>').text('Point {0}: {1}'.format(data.rows[i].cartodb_id, data.rows[i].source)));
	}
	});

	});


	var hovers = [];

	layer.bind('featureOver', function(e, latlon, pxPos, data, layer) {
	hovers[layer] = 1;
	if(_.any(hovers)) {
	$('#map').css('cursor', 'pointer');
	}
	});

	layer.bind('featureOut', function(m, layer) {
	hovers[layer] = 0;
	if(!_.any(hovers)) {
	$('#map').css('cursor', 'auto');
	}
	});
	}

	function main() {

	// create leaflet map
	map = L.map('map', {
	zoomControl: true,
	center: [29.9537, -90.0777],
	zoom: 9
	})

	// add a base layer
	L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
	attribution: 'Stamen'
	}).addTo(map);

	var sublayer;
	// add cartodb layer with one sublayer
	cartodb.createLayer(map, {
	user_name: 'andrew',
	type: 'cartodb',
	sublayers: [{
	sql: "SELECT *, ST_X(the_geom) lon, ST_Y(the_geom) lat FROM twain WHERE name = 'New Orleans, LA, US'",
	cartocss: '#table_name {marker-fill: #0F3B82; marker-width: 25; marker-line-color: #FFF; marker-line-width: 1.5; }',
	interactivity: 'cartodb_id, lat, lon'
	}]
	})
	.addTo(map)
	.done(function(layer) {
	sublayer = layer.getSubLayer(0);
	sublayer.setInteraction(true);
	addCursorInteraction(sublayer);
	});


	}

	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;
	})();
	// you could use $(window).load(main);
	window.onload = main;
	</script>

	</body>
	</html>