Polygon connections by andrewxhill

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Map Connections | CartoDB.js</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <link rel="shortcut icon" href="//cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <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]-->
  </head>
  <body>
    <div id="map"></div>

    <!-- include cartodb.js library -->
    <script src="//libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>

    <script>

      function main() {
        var map = new L.Map('map', { 
          zoomControl: false,
          center: [40, -93],
          zoom: 5
        });

	    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');
	          }
	        });
	    }

        // precanned function to handle link lines
        var lines = {};
		function geometryClick(username, map, layer, options) {
          options = options || {}
          var LINE_STYLE = {
            weight: 2,
            color: '#A53ED5',
            opacity: 0.2
          };
          style = options.style || LINE_STYLE;
          var linesHighlighted = [];


          // fetch the geometry
          var sql = new cartodb.SQL({ user: username, format: 'geojson' });

          function featureClick(e, pos, latlng, data) {
            lin = lines ||  [];
            for(var i = 0; i < lin.length; ++i) {
              map.removeLayer(lin[i]);
            }
            lines = [];
            sql.execute("SELECT ST_MakeLine(the_geom, (SELECT ST_Centroid(the_geom) FROM lower_48_zips WHERE cartodb_id = "+data.cartodb_id+")) the_geom FROM us_ski_areas WHERE mindist < 1000").done(function(geojson) {
              var features = geojson.features;
              for(var i = 0; i < features.length; ++i) {
	              // generate geometry
	              var geo = L.GeoJSON.geometryToLayer(features[i].geometry);
	              geo.setStyle(style);
	              lines.push(geo);
              	  map.addLayer(geo);
	            }
            });
          }

          layer.on('featureClick', featureClick);
          layer.setInteraction(true);

        }

        // create a layer with 1 sublayer
        cartodb.createLayer(map, {
          user_name: 'andrew',
          type: 'cartodb',
          sublayers: [{
            sql: "select * from lower_48_zips",
            cartocss: '#lower_48_zips{ polygon-fill: #CCCCCC; polygon-opacity: 0.7; line-width: 0.5; line-color: #333333; line-opacity: 0.3;}',
            interactivity: 'cartodb_id'
          }]
        }).done(function(layer) {
          map.addLayer(layer);
          layer.getSubLayer(0).setInteraction(true);
          geometryClick('andrew', map, layer.getSubLayer(0));
          addCursorInteraction(layer);
        });
      }

      window.onload = main;
    </script>
  </body>
</html>