Skip to content

Instantly share code, notes, and snippets.

@andrewxhill
Forked from jatorre/index.html
Last active August 29, 2015 14:11
Show Gist options
  • Save andrewxhill/f16c88ecd8d151eae384 to your computer and use it in GitHub Desktop.
Save andrewxhill/f16c88ecd8d151eae384 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--Edit the title of the page-->
<title>CartoDB Point Clustering</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<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]-->
<!--Switch between the different themes changing the stylesheet below - light-theme.css |dark-theme.css -->
<link rel="stylesheet" href="main.css">
<style type="text/css">
.here ul {list-style: none;}
.here ul li {list-style: none; margin: 2px;}
</style>
</head>
<body>
<div class="map" id="map"></div>
<div class="sidepanel">
<div class="wrapper">
<div class="context subheader">
<p>Map created by <a href="http://twitter.com/andrewxhill">@andrewxhill</a></p>
</div>
<div class="context footer">
<p>Create your maps with ease using <a href="http://cartodb.com">CartoDB</a></p></p>
</div>
</div>
</div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script type="sql/html" id="sql_template">
SELECT b.cartodb_id, z.the_geom_webmercator,b.brokers,b.totaldisclosures,(b.totaldisclosures/b.brokers) disclosures_brokers
FROM tl_2013_us_zcta510 z LEFT JOIN broker_zips_aggregate_2013 b ON b.postalcode = z.zcta5ce10
</script>
<script type="sql/html" id="cartocss_template">
/** choropleth visualization */
Map {buffer-size: 256;}
#tl_2013_us_zcta510{
image-filters: agg-stack-blur(15,15);
polygon-fill: #ffffff;
polygon-opacity: 0;
line-color: #FFF;
line-width: 0;
line-opacity: 1;
polygon-clip: false;
[ disclosures_brokers <= 16.2] {
polygon-fill: #d73027;
}
[ disclosures_brokers <= 0.524590163934426] {
polygon-fill: #f79272;
}
[ disclosures_brokers <= 0.368421052631579] {
polygon-fill: #fed6b0;
}
[ disclosures_brokers <= 0.285714285714286] {
polygon-fill: #fff2cc;
}
[ disclosures_brokers <= 0.229508196721311] {
polygon-fill: #d2ecb4;
}
[ disclosures_brokers <= 0.177966101694915] {
polygon-fill: #8cce8a;
}
[ disclosures_brokers <= 0.121739130434783] {
polygon-fill: #1a9850;
}
[ brokers <= 10000] {
polygon-opacity: 1;
}
[ brokers <= 1000] {
polygon-opacity: 0.9;
}
[ brokers <= 100] {
polygon-opacity: 0.8;
}
[ brokers <= 40] {
polygon-opacity: 0.4;
}
[ brokers <= 10] {
polygon-opacity: 0.2;
}}
</script>
<script type="text/javascript">
var map;
function main() {
// create leaflet map
map = L.map('map', {
zoomControl: true,
center: [35, -85],
zoom: 6
})
// add a base layer
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: 'OSM'
}).addTo(map);
var gridsize = 48;
var baseSql = $('#sql_template').html().format(gridsize);
var cartoCss = $('#cartocss_template').html().format(gridsize);
var sublayer;
// add cartodb layer with one sublayer
cartodb.createLayer(map, {
user_name: 'wsjgraphics',
type: 'cartodb',
sublayers: [{
sql: baseSql,
cartocss: cartoCss
}]
})
.addTo(map)
.done(function(layer) {
sublayer = layer.getSubLayer(0);
sublayer.setInteraction(true);
addCursorInteraction(sublayer);
});
}
String.prototype.format = (function (i, safe, arg) {
function format() {
var str = this,
len = arguments.length + 1;
for (i = 0; i < len; arg = arguments[i++]) {
safe = typeof arg === 'object' ? JSON.stringify(arg) : arg;
str = str.replace(RegExp('\\{' + (i - 1) + '\\}', 'g'), safe);
}
return str;
}
//format.native = String.prototype.format;
return format;
})();
// you could use $(window).load(main);
window.onload = main;
</script>
</body>
</html>
/* Change the styles below in order to customize your template */
body{font-family: Helvetica, Arial; font-weight: regular; font-size: 15px; color: #555; background-color: #FFF; margin: 0;}
h1{font-weight: bold; font-size: 31px; letter-spacing: -1px; color: #333; line-height: 33px;}
h3{font-weight: bold; font-size: 12px; color: #CCC; text-transform: uppercase; margin: 10px 0 0 0;}
p{margin: 8px 0 20px 0; line-height: 18px;}
a, a:visited{color: #397DB8; text-decoration: none;}
a:hover{text-decoration: underline;}
.wrapper{display: block; padding: 4px 30px 0 30px;}
.map{background-color:#eee; position: absolute; top: 0; left: 0; bottom: 0; width: 67%; *height:100%;}
.sidepanel{background-color:#FFF; position: absolute; top: 0; right: 0; bottom: 0; width: 33%; height: 100%; overflow: auto;}
.context{font-family: Helvetica, Arial; font-size: 13px; color: #999; padding: 10px 0 0 0;}
.subheader{border-bottom: 1px solid #ddd;}
.footer{border-top: 1px solid #ddd; margin-top: 30px;}
.titleBlock{text-align: right;}
/* Here are the styles that makes the template responsive */
@media only screen and (max-width: 768px) {
.map{position: inherit; height: 400px; width: 100%; display: block;}
.sidepanel{position: inherit; width: 100%;}
}
@media only screen and (max-width: 480px) {
.map {height: 300px;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment