0

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?

  • Do you get any errors in the console? Are the callback objs in the console.log printed to the console? BTW subLayerInde should match subLayerIndex – Andy Eschbacher Jun 3 '15 at 13:13
  • You might just need to add layer.getSubLayer(0).setInteraction(true); docs.cartodb.com/cartodb-platform/… – Andy Eschbacher Jun 3 '15 at 13:27
  • @AndyEschbacher No errors in the console. I fixed the subLayerInde typo. I added setInteraction(true). Still won't work. – Username Jun 3 '15 at 15:03
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']
          }]
        })
  • Hmm, still nothing. To make this a little easier, I've added to my question a link to the Git repo with the files themselves. – Username Jun 4 '15 at 21:54
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.