Is it possible to change interactivity in Carto.js map when called from Carto

Question

I am making a carto map using carto.js and a map/data from my Carto account. I know I can set the interactivity there for clicking on polygons, etc. in the wizard, but am not able to alter that in my carto.js code.

Example:

cartodb.createLayer(map, vizjson)
                .addTo(map)
                .on('done', function(layer) {
                    layer.setInteraction(true);

                    var subLayerOptions = {
                        sql: "SELECT * FROM final_1",
                        cartocss: "#final_1{polygon-fill: #F84F40; line-color: #000;}",
                        interactivity: "name"
                        }

                    var sublayer = layer.getSubLayer(0);

                    sublayer.set(subLayerOptions);

                    sublayers.push(sublayer);

                    alert("this is a map");


                });

My subLayerOptions interactivity line does not seem to have any effect on the data when I include that line. Instead, it just displays a popup that is forever "loading". How can I set the interactivity in the carto.js code instead of on the Carto builder side?

Answer 1

After setting the interactivity, you need to add an infowindow to display a pop up. Here you have the documentation. In addition, have a look at this working example. Basically, you have to add two things:

• an infowindow template, such as this one:

<!-- HTML template for custom infowindow -->
<script type="infowindow/html" id="infowindow_template">
    <div class="infowindow-custom">
      <a href="#close" class="cartodb-popup-close-button close">x</a>
       <div class="cartodb-popup-content">
        <div class="content" style="padding:20px">
          <h3>Name:</h3> 
          <p>{{content.data.name}}</p>
      <div>
      <div class="cartodb-popup-tip-container"></div>
    </div>
</script>

• and add this method to the visualization object:

cdb.vis.Vis.addInfowindow( map, layer, ['name'], { infowindowTemplate: $('#infowindow_template').html() });