News

Create visual interactive stories with Odyssey.js

Share your journeys online using this interactive, story-telling web app, with a wealth of possibilities

main

main

There was a time when sharing a record of your travels amounted to pulling the old photo album off the shelf and boring friends and relatives with an endless string of well-worn anecdotes.

Thankfully, the real-time possibilities and sharing capabilities of the internet have gone a long way toward banishing dusty photo albums to history. Social media allows us to declare ‘I am here’ rather than ‘I was here’, and blogging makes our well-worn anecdotes a matter of choice.

However, for those of us who still like to present our tales of exploration in some form of story format, there is the newly developed Odyssey web app. Odyssey allows users to build an interactive, map-based story, charting your travels from location to location, complete with images and text. It has a browser-based and user-friendly interface for the everyday user, and an extendable API for development use.

Using the browser interface

step01

You love horror movies. Now you want to document locations from famous horror movies you have visited. Let’s explore the basics of Odyssey.js through the browser-based interface. This is where we will begin building our travel story. Go to cartodb.github.io/odyssey.js and click on the Create Story button.

Choosing a template

Odyssey comes with three templates. Slides tells your story in a series of single-screen steps, like a slideshow or PowerPoint presentation. Scroll uses the scrolling function to move the story along. Torque is an animated story, with elements changing along a timeline that can be paused. Choose SCROLL for this demo.

The Odyssey interface

Odyssey’s browser interface, or sandbox, is a mixture of a navigable map and a ‘Markdown’-based input box for the addition of your locations and other media. The use of Markdown, syntax designed to be as ‘readable’ as possible, for ease of use to non-developers, makes this interface extremely accessible. Odyssey even starts you off with example locations and text.

Name your Odyssey

step04

Our first interaction with the sandbox will be giving our story a title and author. Almost all our input is done in the right-hand sandbox window, already containing data to get us started. Title and Author appear at the top (highlighted). Once you have changed them, you will see the results on the bottom left and right-hand corners of the screen.

Map styles

There are three styles of map available. CartoDB Light is a simple blue/grey map with limited place names. Nokia Day is a more recognisable map style, with comprehensive place and road marks. Stamen Watercolour is an artistic layout, easy on the eye but with no place or road names at all. Nokia Day makes the location search easier.

First Location

The first location you visited was Burrow Head in Scotland, setting for the final scene in The Wicker Man (1973). In the right-hand box, delete the co-ordinates displayed underneath #Your first Odyssey.js story, but leave the ellipses above and below. Move the map and fix the centre crosshairs on your chosen location. The zoom buttons, left-hand side, can make this easier.

Set Location

With the crosshairs still fixed on the right spot, click on the small word ADD, next to #Your first Odyssey.js story. From the dropdown, click on both move map to current position and show marker at current position. You’ll see that center co-ordinates and marker co-ordinates appear in the space between the ellipses.

Finish the Chapter

Now we have the location marked, we can add the title and a little description. Change #Your first Odyssey.js story to whatever you wish the title to be, but ensure that you leave the hashtag where it is, as each hashtag denotes a new chapter. Below the co-ordinates, you can write as much description as you wish.

Add a picture

Now we can add a picture to finalise the chapter. Adding a picture is as simple as adding a link below the description text. The final chapter code should look as it does above. The Header Element is denoted by the hashtag. Those elements denoted by dashes are Actions, more of which will be explored later.

Adding next chapter

Now that you have a handle on the structure of your chapters, you can delete everything in the sandbox window that sits under your first chapter. Start off by adding the title, with a hashtag before it. Ours will be #Georgetown University, Washington DC. Once you have added this, you will see a new Add button appear to the left.

Manual location adding

step11

An alternative to finding your location by moving the map is to find the co-ordinates you need with, say, Google Maps and then enter them manually. Copy and paste the previous co-ordinates set and replace the co-ordinates with your new set. Use the Google Maps embed code to get the co-ordinates you need. Enter your description and picture as before.

Add all chapters

Now you can choose your preferred method and set about adding all the locations chapters to your story, simply repeating the process for each. It can be rather time consuming, but once you’ve added four or more, try scrolling up and down between to see the map changes working.

Change the styles

Now that we have all our chapters set, we can start experimenting with the different map styles Odyssey offers. Changing them does not cause you to lose any of your work as the styles change around your input. There is definitely something pleasing about the Stamen Watercolour style, so we’ll keep the change.

Exporting your Odyssey

Odyssey offers a few options for sharing your story. If you click on the paper aeroplane icon in the bottom right-hand corner, you will be taken to a screen which gives you the choice of using a prebuilt URL or an embeddable iframe. The button next to this allows you to download your story as an HTML file.

The Torque template

Unlike the Slide or Scroll templates, the Torque template requires a link to a Carto.DB Viz.JSON URL, available with a Carto.DB account. However, the template comes with one in use, allowing us to get a handle on the unique torque functions. Create a new story and choose the Torque template.

The Title code

step16

As with the other templates you have a title and author tag for the story, but there is also a link to the Viz.JSON URL. Opening a Carto.DB account allows the creation of torque-based visualisations which form the basis of the Torque template stories (see Technique). The duration sets the length of your animated story. the default setting is 30 seconds.

The Torque Markdown

Torque templates are a little different in that we are dealing with an animated timeline. You must set breakpoints for each of your slides, using extra options when clicking on the ADD button. Sleep, Insert Time, Pause and Play create pauses and plays within the timeline. View the example in the Template and then clear everything below your title tags.

Insert first step

This time we’ll create an opening section before the story starts. Enter the title of our opener with the #. Click on the ADD button which appears, then click on Insert Time. This creates our first step, at 0, the beginning of the story. Line up your crosshairs at the centre of the map and click ‘move map to current position’.

Chapter timing

Click on Pause to insert the pause action, and then Sleep. The default time setting for the Sleep is 1000, but you may edit this as you see fit. Click on Play to complete the sequence. We have now built the first timed sequence and can continue adding all of
our chapters.

Creating chapters

If you click on Insert Time before placing your chapter content into place, Odyssey will automatically create the current step based on the previous timings. This can be edited, though. Set your sleep times according to each chapter’s content. Add pictures and markers as with the previous templates. Ensure you don’t spill over the visualisation’s base runtime, however.

The final creation

Once you have inserted all your chapters, experiment with the map styles, download your source code and share your creation with the world with the available URL. With the app still in Beta stage, and development additions always on the way, you’ll be able to go back and refine your Odyssey over and
over again.

Improve your web design skills with Web Designer. Download issues direct from Great Digital Mags or from the ImagineShop

×