1

I've made a map with cartoDB.js with the createLayer method. I've defined the sublayers,inside a variables called layerSource, giving them an interactivity field like this:

sublayers:[ {sql: "SELECT * FROM db_name",
interactivity: "cartodb_id",
cartocss: "styles"},...more sublayers...

After this I've added the layers to the map

cartodb.createLayer(map,layerSource)
                    .addTo(map)
                    .done(function(layer) {
                       for (var i = 0; i < layer.getSubLayerCount(); i++) {
                           sublayers[i] = layer.getSubLayer(i);
                       }
                    })
                    .error(function(err) {
                        console.log("error: " + err);
                    });

But the sublayers are not interactive. I've seen in the documentation that I have to enable the interactivity with setInteraction:true, but where I should activate this option?? Inside the createLayer (as an argument?), inside the .done??.. I assume this should be something very obvious but I'm new to javaScript and not being able to get this done.

EDIT:

After @Andy_Eschbacher answer.
I'm trying to do what you said but with the first block of code

.done(function(layer) {
                      for (var i = 0; i < layer.getSubLayerCount(); i++) {
                           sublayers[i] = layer.getSubLayer(i);
                       };

                        sublayer[0].on('featureClick',function(event, latlng, pos, data, layerIndex) {
                            console.log(data);
                        });
                    })
                    .error(function(err) {
                        console.log("error: " + err);
                    });

the console sends an error because sublayer is not defined, so I define a sublayer = layer.getSubLayer(0);as you do in this tutorial but no action is triggered.

  • oops, looks like i made a typo below. try changing it to sublayers[0].on(.... (I left out the "s" on sublayers). – Andy Eschbacher Jun 10 '15 at 16:49
  • @Andy_Eschbacher i've already done this but no action is triggered, nor with "featureOver". I've set interaction to true and erased interactivity from the sublayer definition but the console gives an error:" Cannot read property 'setInteraction' of undefined" :( – Javi Abia Jun 10 '15 at 17:14
  • oops, my mistake. setInteraction(true) needs to be added. see below for updated answer. – Andy Eschbacher Jun 10 '15 at 17:43
1

You enabled interactivity, but you've not created infowindows, hovers, or printed anything to the console yet.

If you add the following within .done(function(layer) {....});, it will print to the console:

sublayers[0].setInteraction(true);
sublayers[0].on('featureClick',function(event, latlng, pos, data, layerIndex) {
    console.log(data);
});

If you want to enable infowindows, you need to add the following:

cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['cartodb_id']);

This process is walked through in a tutorial on making public maps from private data.

  • Thanks @Andy_Eschbacher. Now it si working but it has a strange behaviour. When the page is loaded for the first time the interactivity is not activated, an element should be clicked to activate the interactivity in each sublayer. And once the interactivity is activated when I click the first element one infoWindow appears, but when I click another element two windows pop-up (one on top of the other), when I click again three (and so on) so I have to close one window at a time... may be because of the for loop used to add the sublayers? Any advice on this? Thanks. – Javi Abia Jun 11 '15 at 9:09
  • If you're going to enable infowindows on different sublayers, I recommend configuring that in the CartoDB editor first and then using the viz.json. You can customize everything just as much this way. – Andy Eschbacher Jun 11 '15 at 15:21

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.