Skip to content

Instantly share code, notes, and snippets.

@tobybellwood

tobybellwood/index.html

Created February 15, 2014 10:48
Show Gist options
  • Save tobybellwood/9017564 to your computer and use it in GitHub Desktop.
Save tobybellwood/9017564 to your computer and use it in GitHub Desktop.
Download ZIP
Client side colouring of CartoDB geojson
Raw
readme.md

Client side colouring of CartoDB geojson

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<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]-->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
</head>
<body>
<div id="map-container" style="width: 1000px; height: 500px; margin: 0 auto"></div>
<script type="text/javascript">
mycolors = ["#b35806" ,"#f1a340","#fee0b6","#d8daeb","#998ec3","#542788" ];
myranges = ["nil" ,"< 203","203 < 298","298 < 379","379 < 488","488 +" ];
var map = new L.Map('map-container', {
center: [-35.25, 149],
zoom: 12
});
L.tileLayer('http://{s}.www.toolserver.org/tiles/bw-mapnik/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
}).addTo(map);
var layerUrl = 'http://dpsparllib.cartodb.com/api/v2/viz/606ef0e8-91ef-11e3-824e-0e49973114de/viz.json';
cartodb.createLayer(map, layerUrl).addTo(map)
.on('done', function(layer) {
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM sa1_2011_aust_30pc WHERE state_code = '8'",
cartocss: '#sa1_2011_aust_30pc {polygon-opacity: 0.3; line-color: #13B5EA} ' +
'#sa1_2011_aust_30pc[sa1_7digit="8101903"] {polygon-fill: ' + mycolors[0] + ';} ' +
'#sa1_2011_aust_30pc[sa1_7digit="8101902"] {polygon-fill: ' + mycolors[1] + ';} ' +
'#sa1_2011_aust_30pc[sa1_7digit="8101901"] {polygon-fill: ' + mycolors[2] + ';} ' +
'#sa1_2011_aust_30pc[sa1_7digit="8101905"] {polygon-fill: ' + mycolors[3] + ';} ' + '#sa1_2011_aust_30pc[sa1_7digit="8101501"] {polygon-fill: ' + mycolors[4] + ';} ' + '#sa1_2011_aust_30pc[sa1_7digit="8102801"] {polygon-fill: ' + mycolors[5] + ';} '
};
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayer.infowindow.set('template', function(data) {
//get the lat long and additional information on click
//location
var clickPosLatLng = this.model.get('latlng');
var fields = this.model.get('content').fields;
//test to see if it's still loading and if not go ahead and set
//the infowindow
if (fields && fields[0].type !== 'loading') {
//I'm grabbing the county name but you could grab the ID and use it
//in a query to cartodb to get other attributes
var obj = _.find(fields, function(obj) {
return obj.title == 'sa1_7digit';
}).value;
}
});
});
</script>
<script type="infowindow/html" id="infowindow_template">
<div class="cartodb-popup">
<a href="#close" class="cartodb-popup-close-button close">x</a>
<div class="cartodb-popup-content-wrapper">
<div class="cartodb-popup-content">
<!-- content.data contains the field info -->
<h4>SA1: </h4>
<p>{{content.data.sa1_7digit}}</p>
</div>
</div>
</div>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment