Skip to content

Instantly share code, notes, and snippets.

@jsanz

jsanz/README.md

Last active February 10, 2017 22:01
Show Gist options
  • Save jsanz/d74d38a3410ab9b9816defea31e7d401 to your computer and use it in GitHub Desktop.
Save jsanz/d74d38a3410ab9b9816defea31e7d401 to your computer and use it in GitHub Desktop.
Download ZIP
JavaScritpt: bind event to custom infowindow visibility change in carto.js
Raw
README.md

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.

Raw
index.html
<!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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment