maptastik
7/6/2015 - 3:46 AM

Map of 2015 Bluegrass 10,000 participants by hometown made using CartoDB and CartoDB.js

Map of 2015 Bluegrass 10,000 participants by hometown made using CartoDB and CartoDB.js

style.css
content_copyfile_download
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;
}
index.html
content_copyfile_download
<!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>
README.md
content_copyfile_download
  • Rendered
  • Source

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.