Clustering using snaptogrid

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    
    <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="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
    
    
    <link rel="stylesheet" href="main.css">
    <style type="text/css">
      .here ul {list-style: none;}
      .here ul li {list-style: none; margin: 2px;}
    </style>
  </head>
  <body>

<div class="sidepanel">
      <div class="wrapper">
        <div class="context subheader">
          <p>Map created by <a href="https://twitter.com/andrewxhill">@andrewxhill</a></p>
        </div>
        <h1>Point clustering</h1>
        <p>This is a demonstration of point clustering using <a href="https://cartodb.com">CartoDB</a>. The method uses an advanced mix of SQL, CartoCSS, and CartoDB.js, continue at your own risk...</p>
        <p><label for="size">Cluster size</label> [<span class="size">48</span>]: <input type="range" name="size" id="cluster_size" value="48" min="20" max="60" step="2"></p>
        
        <h3 class="here-title">What's here?</h3>
        <div class="here">Click a point to find out!</div>

<div class="context footer">
          <p>Create your maps with ease using <a href="https://cartodb.com">CartoDB</a></p></p>
        </div>
      </div>
    </div>

function addCursorInteraction(layer) {
        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');
          }
        });

layer.bind('featureClick', function(e, latlon, pxPos, data, layer) {
          var list = data['cdb_list'].split(',');
          if (list.length > 1){
            $('.here-title').html(list.length+" features:");
            $('.here').html("<ul></ul>");
            for (i in list){
              $(".here ul").append('<li><a href="#'+list[i]+'" class="cartodb_id" id="'+list[i]+'">'+list[i]+'</a></li></li>');
            }

$('.cartodb_id').on('click', function(){

$.get("https://andrew.cartodb.com/api/v1/sql?q=select cartodb_id, to_char(date, 'DD Mon YYYY') date, damage, ST_X(the_geom) lon, ST_Y(the_geom) lat from tornados_copy WHERE cartodb_id = " + $(this).attr('id'), function(ret) {

var lat = ret.rows[0].lat; delete ret.rows[0].lat;
                var lon = ret.rows[0].lon; delete ret.rows[0].lon;
                map.setView(new L.LatLng(lat, lon), 12);

$('.here-title').html("");
                $('.here').html("");
                for (i in ret.rows[0]){
                  $('.here').append("<h3>"+i+"</h3>");
                  $('.here').append(ret.rows[0][i]);
                }
              });
              //zoom to 11
            })

} else {
            $('.here-title').html("");
            $('.here').html("");
            $.get("https://andrew.cartodb.com/api/v1/sql?q=select cartodb_id, to_char(date, 'DD Mon YYYY') date, damage from tornados_copy WHERE cartodb_id = " + data['cartodb_id'], function(ret) {
              for (i in ret.rows[0]){
                $('.here').append("<h3>"+i+"</h3>");
                $('.here').append(ret.rows[0][i]);
              }
            });
          }
        });

}

function main() {

// create leaflet map
        map = L.map('map', { 
          zoomControl: true,
          center: [35, -85],
          zoom: 6
        })

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

}

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>

Modified http://libs.cartocdn.com/cartodb.js/v3/cartodb.js to a secure url

https://maps.googleapis.com/maps/api/js?sensor=false&v=3.8

https://libs.cartocdn.com/cartodb.js/v3/cartodb.js