mayblue9/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">
    body, html, #map {width: 100%; height: 100%;}
      .here ul {list-style: none;}
      .here ul li {list-style: none; margin: 2px;}
    </style>
  </head>
  <body>

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

    <div class="sidepanel">
      <div class="wrapper">
        <div class="context subheader">
          <p>Map created by <a href="http://twitter.com/andrewxhill">@andrewxhill</a></p>
        </div>
        <div class="context footer">
          <p>Create your maps with ease using <a href="http://cartodb.com">CartoDB</a></p></p>
        </div>
      </div>
    </div>

    <script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script type="sql/html" id="sql_template">
with base as (SELECT row_number() over() as polyv, geom as the_geom_webmercator FROM (SELECT (ST_Dump(ST_SimplifyPreserveTopology(the_geom_webmercator,2000))).geom FROM {1} WHERE cartodb_id = {0} LIMIT 2) a),
cent as (SELECT polyv, st_centroid(the_geom_webmercator) the_geom_webmercator FROM base),
pts as (SELECT polyv, (ST_DumpPoints(the_geom_webmercator)).geom AS the_geom_webmercator FROM base),
lns as (select  pts.polyv, ST_MakeLine(cent.the_geom_webmercator, pts.the_geom_webmercator) the_geom from pts, cent WHERE pts.polyv=cent.polyv),
ext AS (
SELECT polyv, ST_MakeLine(ST_TRANSLATE(a, sin(az1) * len, cos(az1) * len),ST_TRANSLATE(b,sin(az2) * len, cos(az2) * len)) as the_geom_webmercator
FROM (
SELECT polyv, a, b, ST_Azimuth(a,b) AS az1, ST_Azimuth(b, a) AS az2, ST_Distance(a,b) + ((random()+((row_number() over())%2-1.5))*(ST_Distance(a,b)/3)) AS len
  FROM (
    SELECT polyv, ST_StartPoint(the_geom) AS a, ST_EndPoint(the_geom) AS b
      FROM lns
    ) AS sub
) AS sub2),
newpts AS (SELECT polyv, row_number() over () as r, ST_SnapToGrid(ST_StartPoint(the_geom_webmercator),2000) the_geom_webmercator FROM ext),
finlin AS (SELECT polyv, ST_MakeLine(the_geom_webmercator) the_geom_webmercator from newpts GROUP BY polyv)


SELECT cartodb_id, the_geom_webmercator, '' as label FROM {1}
UNION ALL
SELECT -1 as cartodb_id,
ST_MakePolygon(ST_AddPoint(the_geom_webmercator, ST_StartPoint(the_geom_webmercator))) as the_geom_webmercator, 'POW!' as label FROM finlin
</script>

    <script type="sql/html" id="cartocss_template">
Map {
  buffer-size: 256;
}
#us_state_1840{
  polygon-opacity: 0.7;
  line-color: #000000;
  line-width: 8;
  line-opacity: 1;
  polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/andrew-free/assets/201505161518031d.jpg);
  polygon-pattern-opacity: 1;
  line-clip: false;
  line-smooth: 1;
  polygon-clip: false;
  [cartodb_id = -1]{

  polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/andrew-free/assets/201505161656031d.jpg);
  }
}

#us_state_1840[cartodb_id=-1]::labels {
  text-name: [label];
  text-face-name: 'Lato Bold';
  text-size: 60;
  text-label-position-tolerance: 10;
  text-fill: black;
  text-halo-fill: white;
  text-halo-radius: 1;
  text-dy: 0;
  text-allow-overlap: false;
  text-placement: point;
  text-placement-type: simple;
  text-min-distance: 100000;
}
  </script>

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

      function main() {

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

        var tablename = "us_state_1840";
        var baseSql = $('#sql_template').html(); //.format(gridsize);
        var cartoCss = $('#cartocss_template').html(); //.format(gridsize);
        var sublayer;
        // add cartodb layer with one sublayer
        cartodb.createLayer(map, "https://andrew-free.cartodb.com/api/v2/viz/1414dd22-fbeb-11e4-bdca-7054d21a95e5/viz.json")
        .addTo(map)
        .done(function(layer) {
          // sublayer = layer.getSubLayer(0);
          // sublayer.setInteraction(true);
          // addCursorInteraction(sublayer);
          layer.getSubLayer(0).setInteraction(true);

          layer.getSubLayer(0).on('featureClick', function(e, pos, latlng, data) {
            layer.getSubLayer(0).setSQL(baseSql.format(data.cartodb_id, tablename))
          });
        });


      }

      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">
	body, html, #map {width: 100%; height: 100%;}
	.here ul {list-style: none;}
	.here ul li {list-style: none; margin: 2px;}
	</style>
	</head>
	<body>

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

	<div class="sidepanel">
	<div class="wrapper">
	<div class="context subheader">
	<p>Map created by <a href="http://twitter.com/andrewxhill">@andrewxhill</a></p>
	</div>
	<div class="context footer">
	<p>Create your maps with ease using <a href="http://cartodb.com">CartoDB</a></p></p>
	</div>
	</div>
	</div>

	<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

	<script type="sql/html" id="sql_template">
	with base as (SELECT row_number() over() as polyv, geom as the_geom_webmercator FROM (SELECT (ST_Dump(ST_SimplifyPreserveTopology(the_geom_webmercator,2000))).geom FROM {1} WHERE cartodb_id = {0} LIMIT 2) a),
	cent as (SELECT polyv, st_centroid(the_geom_webmercator) the_geom_webmercator FROM base),
	pts as (SELECT polyv, (ST_DumpPoints(the_geom_webmercator)).geom AS the_geom_webmercator FROM base),
	lns as (select pts.polyv, ST_MakeLine(cent.the_geom_webmercator, pts.the_geom_webmercator) the_geom from pts, cent WHERE pts.polyv=cent.polyv),
	ext AS (
	SELECT polyv, ST_MakeLine(ST_TRANSLATE(a, sin(az1) * len, cos(az1) * len),ST_TRANSLATE(b,sin(az2) * len, cos(az2) * len)) as the_geom_webmercator
	FROM (
	SELECT polyv, a, b, ST_Azimuth(a,b) AS az1, ST_Azimuth(b, a) AS az2, ST_Distance(a,b) + ((random()+((row_number() over())%2-1.5))*(ST_Distance(a,b)/3)) AS len
	FROM (
	SELECT polyv, ST_StartPoint(the_geom) AS a, ST_EndPoint(the_geom) AS b
	FROM lns
	) AS sub
	) AS sub2),
	newpts AS (SELECT polyv, row_number() over () as r, ST_SnapToGrid(ST_StartPoint(the_geom_webmercator),2000) the_geom_webmercator FROM ext),
	finlin AS (SELECT polyv, ST_MakeLine(the_geom_webmercator) the_geom_webmercator from newpts GROUP BY polyv)


	SELECT cartodb_id, the_geom_webmercator, '' as label FROM {1}
	UNION ALL
	SELECT -1 as cartodb_id,
	ST_MakePolygon(ST_AddPoint(the_geom_webmercator, ST_StartPoint(the_geom_webmercator))) as the_geom_webmercator, 'POW!' as label FROM finlin
	</script>

	<script type="sql/html" id="cartocss_template">
	Map {
	buffer-size: 256;
	}
	#us_state_1840{
	polygon-opacity: 0.7;
	line-color: #000000;
	line-width: 8;
	line-opacity: 1;
	polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/andrew-free/assets/201505161518031d.jpg);
	polygon-pattern-opacity: 1;
	line-clip: false;
	line-smooth: 1;
	polygon-clip: false;
	[cartodb_id = -1]{

	polygon-pattern-file: url(https://s3.amazonaws.com/com.cartodb.users-assets.production/production/andrew-free/assets/201505161656031d.jpg);
	}
	}

	#us_state_1840[cartodb_id=-1]::labels {
	text-name: [label];
	text-face-name: 'Lato Bold';
	text-size: 60;
	text-label-position-tolerance: 10;
	text-fill: black;
	text-halo-fill: white;
	text-halo-radius: 1;
	text-dy: 0;
	text-allow-overlap: false;
	text-placement: point;
	text-placement-type: simple;
	text-min-distance: 100000;
	}
	</script>

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

	function main() {

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

	var tablename = "us_state_1840";
	var baseSql = $('#sql_template').html(); //.format(gridsize);
	var cartoCss = $('#cartocss_template').html(); //.format(gridsize);
	var sublayer;
	// add cartodb layer with one sublayer
	cartodb.createLayer(map, "https://andrew-free.cartodb.com/api/v2/viz/1414dd22-fbeb-11e4-bdca-7054d21a95e5/viz.json")
	.addTo(map)
	.done(function(layer) {
	// sublayer = layer.getSubLayer(0);
	// sublayer.setInteraction(true);
	// addCursorInteraction(sublayer);
	layer.getSubLayer(0).setInteraction(true);

	layer.getSubLayer(0).on('featureClick', function(e, pos, latlng, data) {
	layer.getSubLayer(0).setSQL(baseSql.format(data.cartodb_id, tablename))
	});
	});


	}

	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>