Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
custom infowindow requesting data form server
<!DOCTYPE html>
<title>Custom infowindow example | CartoDB.js</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="shortcut icon" href="" />
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
<link rel="stylesheet" href="" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="" />
<div id="map"></div>
<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">
<ul id="mylist">
<div class="cartodb-popup-tip-container"></div>
<script src=""></script>
function main() {
var map ='map', {
zoomControl: false,
center: [0, 0],
zoom: 3
// add a nice baselayer from Stamen
L.tileLayer('http://{s}{z}/{x}/{y}.png', {
attribution: 'Stamen'
cartodb.createLayer(map, '')
.on('done', function(layer) {
var infowindow = layer.getSubLayer(0).infowindow
infowindow.set('template', function(data) {
var clickPosLatLng = this.model.get('latlng');
$.get(' * from generate_series(1, 3)', function(data) {
var rows = _.pluck(data.rows, 'generate_series');
$('#mylist').html(, function(r) { return '<li> data:' + r + '</li>' }).join('\n'));
return $('#infowindow_template').html();
// get sublayer 0 and set the infowindow template
}).on('error', function() {
console.log("some error occurred");
window.onload = main;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment