Skip to content

Instantly share code, notes, and snippets.

@andrewbt

andrewbt/index.html

Created June 1, 2015 23:55
Show Gist options
  • Save andrewbt/ea0f295f293753b7d9d2 to your computer and use it in GitHub Desktop.
Save andrewbt/ea0f295f293753b7d9d2 to your computer and use it in GitHub Desktop.
Download ZIP
Vis w/ great circles and leaflet q-cluster
Raw
gistfile1.txt
https://gist.githubusercontent.com/andrewbt/ad553ea50079b69d5f25/raw/784b7792ba28c8dd7c01a1295b1505dc0c4c750c/commercial-data.json
Raw
index.html
<html>
<head>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<link rel="stylesheet" href="//spatialdev.github.io/q-cluster/demo/css/normalize.css">
<link rel="stylesheet" href="//spatialdev.github.io/q-cluster/demo/css/main.css">
<link rel="stylesheet" href="//spatialdev.github.io/q-cluster/css/q-cluster.css">
<script src="//spatialdev.github.io/q-cluster/demo/js/vendor/modernizr-2.7.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>-->
<script src="//spatialdev.github.io/q-cluster/src/utils.js"></script>
<script src="//spatialdev.github.io/q-cluster/src/clustering.js"></script>
<script src="//spatialdev.github.io/q-cluster/src/point-clusterer.js"></script>
<script src="//spatialdev.github.io/q-cluster/src/make-donuts.js"></script>
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#cartodb-map { width: 100%; height:100%; background: black;}
</style>
<script>
var map;
function init(){
// initiate leaflet map
/*map = new L.Map('cartodb-map', {
center: [40,-98],
zoom: 4
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);*/
map = new L.Map('cartodb-map', {
center: [32.9, -88.3],
zoom: 9
})
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
var layerUrl = 'https://team.cartodb.com/u/athompson/api/v2_1/viz/f0cf16f4-0647-11e5-9fc4-0e9d821ea90d/viz.json';
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM example_cartodbjs_1 where adm0_a3 = 'USA'",
cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
}
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
//layer.getSubLayer(0).set(subLayerOptions);
}).on('error', function() {
//log the error
});
$.ajax({
context: this,
type: 'GET',
dataType: "json",
url: 'https://gist.githubusercontent.com/andrewbt/ad553ea50079b69d5f25/raw/784b7792ba28c8dd7c01a1295b1505dc0c4c750c/commercial-data.json',
success: function(data, textStatus, jqXHR){
var pointClusterer = new QCluster.PointClusterer(data, 'loans', map, 'loan-layer',
{
reportingProperty: 'consumer_commercial',
backgroundColor: '#0099dd'
});
},
error: function(jqXHR, textStatus, errorThrown){
}
});
}
</script>
</head>
<body onload="init()">
<div id='cartodb-map'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment