Advanced Interactive Web Mapping, Programming, and Design

In-class Excercises: CartoDB.js

Part 1: Add a done handler

  1. Start with the code from last time. If you don't have it handy, you can work with this jsbin.
  2. Add a done handler to createVis().
  3. Here's a start, building from the last part: 
    $(document).ready(function () {
    cartodb.createVis('map', /* Your CartoDB visualization's CartoDB.js URL */, {
        option1: option1-value,
        option2: option2-value,
        option3: option3-value
    })
        .done(function (vis, layers) {
            // layers[1] contains the visualization's layers
        });
});
  4. Use console.log() to convince yourself that the done callback is called.
  5. Hide the layer containing your visualization's layers. All of the methods you can call on layers are in the documentation.

Part 2: Get and set a sublayer's SQL

  1. Start with the code from Part 1.
  2. In the done callback, use getSubLayer() to get a visualization layer from your visualization.
  3. Once you do, use console.log() to print out the results of getSQL() on the layer.
  4. Use setSQL() on the layer to filter the data.

Part 3: Set a sublayer's SQL in reaction to a button click

  1. Start with the code from Part 2.
  2. Add a button to your page.
  3. In the done callback, use getSubLayer() to get a visualization layer from your visualization. Store this in a variable that is declared outside of the done callback.
  4. When the button is clicked, use setSQL() on the layer to filter the data.

Part 4: Using Leaflet plugins through CartoDB.js

  1. Start with the code from Part 3.
  2. Add the code for the Mapzen Search Leaflet plugin to your page. This is step 1 in the plugin's documentation.
  3. Skip step two in the plugin's documentation—CartoDB takes care of this for you.
  4. In the done callback use vis.getNativeMap() to get the Leaflet map that underlies the visualization and initialize the plugin. This is step three in the plugin's documentation.