featureClick won't work in cartoDB

Question

EDIT: Link to repo containing the files. Open the index.html file in the imports and exports folders.

I can get everything except featurecClick to work.

My JS:

window.onload = function(){
    var cartoDbTableName = 'sipri_import_export_map_1950_2014';
    var domId = 'map';
    var mapStyle = document.getElementsByClassName('map-style');
    var lat = 0;
    var lon = 0;
    var zoomLvl = 2;
    var options = {
        center: [lat,lon],
        zoom: zoomLvl
    };
    var mapObject = new L.Map(domId,options);
    var layerSource = {
        user_name: 'chrismp',
        type: 'cartodb',
        sublayers: [
            {
                sql: "SELECT * FROM "+cartoDbTableName+" WHERE (gwsyear <= 1950 AND gwsyear > 0)",
                cartocss: mapStyle[0].innerHTML
            }
        ]
    };

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
        .addTo(mapObject);

    cartodb.createLayer(mapObject,layerSource)
        .addTo(mapObject)
        .on('done',function(layer){
                layer.getSubLayer(0).on('featureClick', function(e, latlng, pos, data, subLayerIndex) {
                  console.log(e, latlng, pos, data, subLayerIndex);
                }).on('error',function(err){
                    console.log('featureClick error: '+err);
                });
        }).on('error',function(err){
            console.log(err);
        });
};

The map loads, but I can't actually click any country. What gives?

Answer 1

You need to define the available interactivity columns in your layer:

cartodb.createLayer(map,{
          type: "cartodb",
          user_name: userName,
          sublayers: [{
            sql: "SELECT * FROM table",
            cartocss: myCSS,
            interactivity: ['cartodb_id','attribute1','attribute2']
          }]
        })

Answer 2

To make interactivity work, you need to be sure to include the columns from your datatable that you want to interact with. In your case, it looks like you could be interested in the gwsyear column of your data.

You need to alter your code as follows within createLayer:

cartodb.createLayer(mapObject,layerSource)
        .addTo(mapObject)
        .on('done',function(layer){
            layer.getSubLayer(0).setInteraction(true);
            layer.getSubLayer(0).setInteractivity('gwsyear'); // need to include at least one column to enable interactivity

            layer.getSubLayer(0).on('featureClick', function(e, latlng, pos, data, subLayerIndex) {
                    console.log(e, latlng, pos, data, subLayerIndex);
                }).on('error',function(err){
                    console.log('featureClick error: '+err);
                });
        }).on('error',function(err){
            console.log(err);
        });

The difference is the addition of:

layer.getSubLayer(0).layer.getSubLayer(0).setInteraction(true);
layer.getSubLayer(0).setInteractivity('gwsyear');

If you aren't concerned about which column to include, put in cartodb_id instead as it's a more agnostic column.