On this simple carto.js example we add a custom infowindow using Mustache and bind to its model an event when the change:visibility
property changes.
Open the console for the Hi!
and Bye!
messages when showing and closing an infowindow.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Binding events to IW | CARTO</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="http://cartodb.com/assets/favicon.ico" /> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
</style> | |
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
</head> | |
<body> | |
<div id="map"></div> | |
<!-- Infowindow template --> | |
<script type="infowindow/html" id="infowindow_template"> | |
<div class="cartodb-popup header blue v2"> | |
<a href="#close" class="cartodb-popup-close-button close">x</a> | |
<div class="cartodb-popup-content-wrapper"> | |
Custom infowindow | |
<ul> | |
<li>{{ cartodb_id }}</li> | |
<li>{{ name }}</li> | |
<li>{{ pop_max }}</li> | |
{{{ script_call }}} | |
</ul> | |
</div> | |
<div class="cartodb-popup-tip-container"> | |
</div> | |
</div> | |
</script> | |
<!-- Drop your code between the script tags below! --> | |
<script> | |
/* Global function to be used on infowindow template */ | |
window.customFunction = function(number){ | |
return number/2; | |
} | |
function main() { | |
var map = L.map('map', { | |
zoomControl: true, | |
center: [0, 0], | |
zoom: 2 | |
}); | |
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { | |
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>' | |
}).addTo(map); | |
// add cartodb namedmap layer with one sublayer | |
cartodb.createLayer(map, { | |
user_name: 'documentation', | |
type: 'namedmap', | |
named_map: { | |
name: "namedmap_tutorial", | |
layers: [{ | |
layer_name: "t", | |
interactivity: "cartodb_id, name, pop_max" | |
}] | |
} | |
},{ | |
https:true | |
}) | |
.addTo(map) | |
.done(function(layer) { | |
layer.getSubLayer(0).setInteraction(true); | |
// show infowindows on click | |
var iw = cdb.vis.Vis.addInfowindow( | |
map, | |
layer.getSubLayer(0), | |
['cartodb_id','name', 'pop_max'],{ | |
}).model.set({ | |
'sanitizeTemplate':false, | |
'template' : function(object){ | |
if (object && object.cartodb_id){ | |
return Mustache.render($('#infowindow_template').html(),object) | |
} | |
} | |
}); | |
/* Bind to the visibility property change */ | |
iw.on('change:visibility',function(iw,visibility,changes){ | |
if (visibility){ | |
console.log('hi!'); | |
} else { | |
console.log('bye!'); | |
} | |
}); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |