list all points at a point by andrewxhill

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="//libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="//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="//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('//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>