0

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?

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() });

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.