1

I am using CartoDB API to develop a map viewer and I would like to get the information from featureClick into a content panel instead of the typical infowindow. Is there any method to do it directly? I mean, I have seen some examples about how to include a template dinamically but it is always displayed as an infowindow popup. Could the template be linked to another html element and disable infowindow popup?

I know that layer has the attributes and values (also using layer interactivity fields) but I would like to know if there is a method which can be used as similar as the template-infowindow.

2

Yes, it's pretty easy to get the data to any DOM element you specify.

If you look at the definition of events on layers, you'll see that the requested data is returned as a callback object:

layer.on('featureOver', function(e, latlng, pos, data, subLayerIndex) {
    console.log("mouse over polygon with data: " + data);
});

If you specify in your HTML document a div element, say <div id="info"></div>, you can include this code to make the clicked data appear in the div element:

layer.on('featureOver', function(e, latlng, pos, data, subLayerIndex) {
    $("#info").html("<h4>Name</h4><p>" + data.name + "</p>");
});

Make sure you enable interactivity using sublayer.setInteraction(true) and sublayer.setInteractivity('column1, column2, ...') to ensure that the data is associated with an interaction. See their method references here and here.

If you want to disable the template infowindows, you do so in the CartoDB Editor by deselecting all the fields if you are using a viz.json file. If you are making a map by defining dynamic layers, infowindows are disabled by default.

Here's a working example that uses what was discussed above.

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.