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().

• cbunn: Nice work! I rebuilt it locally and the tooltips are acting strangely (they appear to the left of the textbox and only flash briefly). I may be missing your stylesheet that handles the tooltips though.
• clhenrick: @cbunn you can view the full code here: github.com/clhenrick/BushwickCommunityMap and the demo here: bushwickcommunitymap.org
• cbunn: Awesome map! Will be a great example for me to follow for future webmaps. Very useful, thank you.
• clhenrick: no problem, let me know if you have any questions or if you find a solution to this problem. One of the cartodb folks mentioned using the core library of cartodb.js but I didn't look into too far...

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.