Here's my very simple code.
<title>Leaflet multilayer 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="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<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-header">
<img style="width: 100%" src="http://cartodb.com/assets/logos/logos_full_cartodb_light-5ef5e4ff558f4f8d178ab2c8faa231c1.png"></src>
</div>
<div class="cartodb-popup-content">
<!-- content.data contains the field info -->
<h4>City: </h4>
<p></p>
</div>
</div>
<div class="cartodb-popup-tip-container"></div>
</div>
</script>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script>
function main() {
// create leaflet map
var map = L.map('map', {
zoomControl: false,
center: [43, 0],
zoom: 3
})
// add a base layer
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
// add cartodb layer with one sublayer
cartodb.createLayer(map, {
user_name: 'examples',
type: 'cartodb',
sublayers: [{
sql: 'select * from country_boundaries',
cartocss: '#layer { polygon-fill: #F00; polygon-opacity: 0.3; line-color: #F00; }',
interactivity: 'cartodb_id'
}]
})
.addTo(map)
.done(function(layer) {
var sublayer = layer.getSubLayer(0);
sublayer.infowindow.set('template', $('#infowindow_template').html());
});
}
// $(window).load(main);
window.onload = main;
</script>
</body>
</html>
But nothing is showing on click,
here is the github Gist
and the codepen here can anyone see where problem is?
Best Answer
I think your problem is related to this question, this answer and this bl.ock.
at least one issue is that you haven't defined #infowindow_template, but you can get a simple onclick popup of the country name by adding the following:
in place of:
It looks like an infowindow template should be possible as the fourth argument to that
addInfowindow()function, but I wasn't able to get it to work. You will at least need to define it somewhere in your code, as shown in the above linked examples, and also here: