index.html
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="//libs.cartodb.com/cartodb.js/v2/themes/css/cartodb.css" />
</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="//rambo.webcindario.com/images/18447755.jpg"></src>
<h4>{{content.data.name}}</h4>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<script src="//libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script>
function main() {
var map = L.map('map', {
zoomControl: false,
center: [0, 0],
zoom: 3
})
L.tileLayer('//a.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png', {
attribution: 'MapBox'
}).addTo(map);
cartodb.createLayer(map, '//examples-beta.cartodb.com/api/v1/viz/219/viz.json')
.on('done', function(layer) {
map.addLayer(layer);
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>