Using Odyssey.js with Cartodb.js?

Question

I'm looking to use Odyssey to create an interactive introduction to various data layers on an interactive web map I've created using CartoDB.js. I'd like to have different data layers turned on / off each time the user clicks through an Odyssey slide.

From what I understand that this can be done in the odyssey.js code by calling the cartodb.js methods for hiding and showing sublayers. I've tried searching for examples of this but haven't come across any.

Can anyone provide a link to an example such as a Github GIST / bl.ock?

---

I was able to use a hack where I create a custom javascript event to be fired when the odyssey slides change. I then created a function that listened for the custom event and tracks the index of the current slide in the div.slides-container array. This way it is possible to tell what current slide the user is viewing and then call cartodb.js methods outside of Odyssey.js as needed.

A Gist of the code may be found here and a live version may be viewed here.

Ideally I'd like to cut down on the redundancy of this code and call cartodb.js methods for showing or hiding layers, setting SQL or CartoCSS of various sublayers of a layer when calling cartodb.createLayer().

Answer 1

Using Odyssey.js with Cartodb.js is a big problem for using viz.json (vizjson) in odyssey.js. The CARTO Builder does not have the option to share the viz.json URL due to the current version of CARTO.js (v3.15). This version is not compatible with the Builder. The new version of CARTO.js (v4) will be released by March/April 2017 and CARTO says that it will be compatible with the CARTO builder...

Answer 2

I've worked on something similar. You can see and implementation here:

http://www.burdgis.com/cumberShaw/

I forget exactly what I did to get the layers turning on and off but I remember that going backwards caused a bit of glitch. That said the following piece of code might help you out:

    // fire this each time the user changes a slide
    function trackCurrentSlide() {

      slides = $('#slides').children(); // creates an array of slides                 
      slides.each(function(i){
        if ($(this).hasClass('selected')) {
          console.log('index: ', i);
          checkIndex(i);

        }

      });

    }

    // check the index being returned by trackCurrentSlide()
    // Hacked around with this to use the listener to switch layers on and off and set the SQL / CSS
    function checkIndex(index) {

      setSlide(index);
      // set the layer names for the cartoDB layers from the vizjson
      var layer_name = theLayer.layers[0].options.layer_name;
      var whatEverLayer1 = theLayer.getSubLayer(0);
      var whatEverLayer2 = theLayer.getSubLayer(1);
      var whatEverLayer3 = theLayer.getSubLayer(2);
      var whatEverLayer4 = theLayer.getSubLayer(3);

      // Initial SQL set up for draw orders etc

        // Parks layer options
        var layersOptions1 = {
            sql: "SELECT * FROM ...." // Set the query to select the layers you'd like
        }

        var layersOptions2 = {
            sql: "SELECT * FROM ...." // do it for each set of options you'd like
        }



      // This section allows you to show or hide layers depending on the slide number.
      // Slide 1
      if (index === 0) {

        whatEverLayer1.hide();
        whatEverLayer2.hide();
        whatEverLayer3.hide();
        whatEverLayer4.hide();

      } 
      // Slide 2
      else if (index === 1) {
        // Hide unused layers so back function works
        whatEverLayer2.hide();
        whatEverLayer3.hide();
        whatEverLayer4.hide();

        whatEverLayer1.set(layersOptions1); // SQL from above implemented
        whatEverLayer1.show(); // Show the chosen layer.

      }

Apologies for the state of the code on this but it should give you some pointers.