andrewxhill/index.html

## 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="http://cartodb.com/assets/favicon.ico" />
    <style>
      html, body, #map {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    </style>
    <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]-->
  </head>
  <body>
    <div id="map"></div>

    <!-- include cartodb.js library -->
    <script src="http://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_Transform(ST_Segmentize(ST_MakeLine(ST_Transform(the_geom, 953027),ST_Transform((SELECT ST_PointOnSurface(the_geom) FROM lower_48_zips WHERE cartodb_id = "+data.cartodb_id+"), 953027)), 100000), 4326) 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://cartodb.com/assets/favicon.ico" />
	<style>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	</style>
	<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]-->
	</head>
	<body>
	<div id="map"></div>

	<!-- include cartodb.js library -->
	<script src="http://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_Transform(ST_Segmentize(ST_MakeLine(ST_Transform(the_geom, 953027),ST_Transform((SELECT ST_PointOnSurface(the_geom) FROM lower_48_zips WHERE cartodb_id = "+data.cartodb_id+"), 953027)), 100000), 4326) 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>