maptastik/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This map was made using CartoDB and CartoDB.js. Data were extracted from Chronotrack and compiled as a CSV. Counts for each town were derived in Google Sheets. The locations were then geocoded and cleaned further in CartoDB.

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Bluegrass 10,000 2015 Paricipants by Hometown</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="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
    <link rel="stylesheet" href="style.css" />

  </head>
  <body>
    <div id="map"></div>

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

    <script>
      function main() {
        cartodb.createVis('map', 'https://maptastik.cartodb.com/api/v2/viz/6e046326-238b-11e5-a460-0e4fddd5de28/viz.json', {
            shareable: true,
            title: false,
            description: false,
            search: false,
            tiles_loader: true,
            fullscreen: true,
            mobile_layout: true,
            center_lat: 37.090240,
            center_lon: -95.712891,
            zoom: 5
        })
        .done(function(vis, layers) {
          layers[1].setInteraction(true);
          layers[1].on('featureOver', function(e, latlng, pos, data) {
            cartodb.log.log(e, latlng, pos, data);
          });
          var map = vis.getNativeMap();
        })
        .error(function(err) {
          console.log(err);
        });
      }

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

## style.css
html, body, #map {
    height: 100%;
    padding: 0;
    margin: 0;
}

div.cartodb-legend-stack {
	background: #0E0E0E;
}

div.cartodb-legend {
	font: bold 14px 'Droid Sans',sans-serif;
}

div.cartodb-legend .legend-title, div.cartodb-legend ul li {
	color: #fff;
}

div.cartodb-legend.bubble ul li.graph .bubbles {
	background: url(http://s29.postimg.org/jt8x75kn7/bubbles_alt2.png) no-repeat 0 0;
	background-color: rgba(0,0,0,0);
}

.leaflet-container {
  	background: rgb(0,0,0);
  	background-opacity: 0;
}
li.graph {
	background: rgba(0,0,0,0) !important;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bluegrass 10,000 2015 Paricipants by Hometown</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="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<link rel="stylesheet" href="style.css" />

	</head>
	<body>
	<div id="map"></div>

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

	<script>
	function main() {
	cartodb.createVis('map', 'https://maptastik.cartodb.com/api/v2/viz/6e046326-238b-11e5-a460-0e4fddd5de28/viz.json', {
	shareable: true,
	title: false,
	description: false,
	search: false,
	tiles_loader: true,
	fullscreen: true,
	mobile_layout: true,
	center_lat: 37.090240,
	center_lon: -95.712891,
	zoom: 5
	})
	.done(function(vis, layers) {
	layers[1].setInteraction(true);
	layers[1].on('featureOver', function(e, latlng, pos, data) {
	cartodb.log.log(e, latlng, pos, data);
	});
	var map = vis.getNativeMap();
	})
	.error(function(err) {
	console.log(err);
	});
	}

	window.onload = main;
	</script>
	</body>
	</html>
	html, body, #map {
	height: 100%;
	padding: 0;
	margin: 0;
	}

	div.cartodb-legend-stack {
	background: #0E0E0E;
	}

	div.cartodb-legend {
	font: bold 14px 'Droid Sans',sans-serif;
	}

	div.cartodb-legend .legend-title, div.cartodb-legend ul li {
	color: #fff;
	}

	div.cartodb-legend.bubble ul li.graph .bubbles {
	background: url(http://s29.postimg.org/jt8x75kn7/bubbles_alt2.png) no-repeat 0 0;
	background-color: rgba(0,0,0,0);
	}

	.leaflet-container {
	background: rgb(0,0,0);
	background-opacity: 0;
	}
	li.graph {
	background: rgba(0,0,0,0) !important;
	}