Your search returned no results

Try another search term or view Stack Exchange, where we have active conversations with Developers about GIS.

    http://gis.stackexchange.com/
    Support channel in Stack Exchange

    Thousands of developers around the world have helped make CartoDB a success, and we have active conversations with them about GIS in Stack Exchange.

    Go to Stack Exchange

    Custom Interactivity

    Summary

    If you have mastered the basics of making maps with CARTO.js, it’s now time to start doing more interesting things. Here we will show you how to register click events to data on your maps, and then how to create infowindows using click-events and data contained in your CARTO tables.

    Getting Started

    In the basic CARTO.js tutorial we built a basic point map. You can continue this tutorial using the same file we developed last time. If you skipped that tutorial, you can use the tutorial-1-finished.html file contained in the tutorial zip file. Whichever way you get started, make a copy of your file and call it tutorial-2.html. This new file will be the one we use for the rest of this tutorial.

    Custom Infowindows

    If you click on any of the dots on your map, you may find that infowindows are already drawn. Infowindows can be set in your CARTO dashboard and are passed through the Viz JSON. If you don’t want the ones set on CARTO you can easily create custom ones. The CARTO.js library comes with shortcuts to help you design your own infowindows painlessly. Once you have the basic HTML for the content of your infowindow defined, the rest is a breeze.

    Infowindow Templates

    A common way to define the content is through the use of templates. For a discussion of how or why these are used, we suggest reading over this StackOverflow thread and some of the links within the post. For now, you’ll need to add a template to your tutorial-2.html file. Add the following directly below the closing style tag:

    <script type="infowindow/html" id="infowindow_template">
      <div class="cartodb-popup v2">
        <a href="#close" class="cartodb-popup-close-button close">x</a>
         <div class="cartodb-popup-content-wrapper">
           <div class="cartodb-popup-header">
             <img style="width: 100%" src="https://cartodb.com/assets/logos/logos_full_cartodb_light.png"></src>
           </div>
           <div class="cartodb-popup-content">
             <!-- content.data contains the field info -->
             <h4>City: </h4>
             <p>{{content.data.name}}</p>
           </div>
         </div>
         <div class="cartodb-popup-tip-container"></div>
      </div>
    </script>

    This is basically HTML stored in a script tag. It also has a template value, {{content.data.name}}. Just like how we used {{table_name}} in the previous tutorial, this value will be swapped out by values from the objects we click in our maps. You can use any HTML markup for your infowindows, but you’ll have to define the CSS for how it will look. The HTML used here is designed to use CSS contained inside the cartodb.css file we include.

    Passing Templates to CARTO.js Layers

    Next we’ll need to tell our layer to use our custom template for infowindows. Within the code where we define our CARTO layer, locate the line where we add the layer. Directly below that line add the following:

    var sublayer = layer.getSubLayer(0);
    
    sublayer.infowindow.set('template', $('#infowindow_template').html());

    This is pulling the HTML template we created above and passing it to the sublayer for use. Save your tutorial-2.html file and refresh the page, you should see your new infowindows.

    cartodb.createLayer(map, layerUrl, layerOptions)
    .addTo(map)
    .on('done', function(layer) {
      // get sublayer 0 and set the infowindow template
      var sublayer = layer.getSubLayer(0);
    
      sublayer.infowindow.set('template', $('#infowindow_template').html());
    }).on('error', function() {
      console.log("some error occurred");
    });

    Registering Click Events

    With CARTO maps and many others mapping tools, interactivity is very important. In CARTO maps we handle it by using click events, so when a object on your map is clicked we perform an action. In CARTO.js you can add click events at the same time you create your new CARTO layer. Change the createLayer portion of the code to look like this:

    cartodb.createLayer(map, layerUrl)
           .addTo(map)
           .on('done', function(layer) {
    
      // change the query for the first layer
      var subLayerOptions = {
          sql: "SELECT * FROM example_cartojs_1 where pop_other::float > 1000000",
          cartocss: "#example_cartojs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
            }
    
      var sublayer = layer.getSubLayer(0);
      sublayer.set(subLayerOptions);
    
      sublayer.infowindow.set('template', $('#infowindow_template').html());
    
      sublayer.on('featureClick', function(e, latlng, pos, data) {
              alert("Hey! You clicked " + data.cartodb_id);
        });
      }).on('error', function() {
            //log the error
    });

    Save the file and refresh your map. You should find that an alert is issued if you click one of the markers. You might also notice that an infowindow is drawn after you close the alert. Instead of loading an alert you could load new page content, redirect a user to a different page, or add any range of functions.