Skip to content

Instantly share code, notes, and snippets.

@maptastik
Last active August 29, 2015 14:24
Show Gist options
  • Save maptastik/60959b722f7048626216 to your computer and use it in GitHub Desktop.
Save maptastik/60959b722f7048626216 to your computer and use it in GitHub Desktop.
Map of 2015 Bluegrass 10,000 participants by hometown made using CartoDB and CartoDB.js

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.

<!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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment