Quick POW map! 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">
    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="//twitter.com/andrewxhill">@andrewxhill</a></p>
        </div>
        <div class="context footer">
          <p>Create your maps with ease using <a href="//cartodb.com">CartoDB</a></p></p>
        </div>
      </div>
    </div>

    <script src="//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>