Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/index.html

Last active October 13, 2015 18:08
Show Gist options
  • Save wboykinm/4235778 to your computer and use it in GitHub Desktop.
Save wboykinm/4235778 to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB Custom Infowindow
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
</body>
<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">
<img style="width: 100%" src="http://chart.apis.google.com/chart?chs=270x200&cht=p3&chco=A6CEE3|1F78B4|B2DF8A|33A02C|FB9A99|E31A1C|FDBF6F&chd=t:{{content.data.sum_white}},{{content.data.sum_black}},{{content.data.sum_amind}},{{content.data.sum_asian}},{{content.data.sum_hawpac}},{{content.data.sum_tworac}},{{content.data.sum_other}}&chdl=White|Black|American+Indian|Asian|Hawaiian%2FPacific+Native|Multiracial|Other&chdlp=b&chp=2&chl={{content.data.sum_white}}|{{content.data.sum_black}}|{{content.data.sum_amind}}|{{content.data.sum_asian}}|{{content.data.sum_hawpac}}|{{content.data.sum_tworac}}|{{content.data.sum_other}}&chds=a&chma=5,5,10,5|5"></src>
<!-- content.data contains the field info -->
<hr>
<h4>Ward {{content.data.ward}}</h4>
<h4>Total Population: {{content.data.sum_totalp}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script>
function main() {
var map = L.map('map', {
zoomControl: true,
center: [44.4758825, -73.212072],
zoom: 13
})
// add a nice baselayer from mapbox
L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-a0wbwf43/{z}/{x}/{y}.png', {
attribution: 'MapBox'
}).addTo(map);
cartodb.createLayer(map, 'http://geosprocket.cartodb.com/api/v1/viz/table_4ward_summary_race3/viz.json?callback=vizjson')
.on('done', function(layer) {
map.addLayer(layer);
L.tileLayer('http://a.tiles.mapbox.com/v3/landplanner.map-0wnm9063/{z}/{x}/{y}.png', {
attribution: 'MapBox'
}).addTo(map);
layer.infowindow.set('template', $('#infowindow_template').html());
layer.on('featureOver', function(e, pos, latlng, data) {
console.log(e, pos, latlng, data);
});
layer.on('error', function(err) {
console.log('error: ' + err);
});
}).on('error', function() {
console.log("some error occurred");
});
}
window.onload = main;
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment