Adding a Story

Adding a story requires you to perform the following:

1. Encode the story metadata and a series of keyframes into a JSON file
2. Add the story as a new item in the software menu

Story JSON format

The JSON data structure looks as follows:

{
    "title": "Example",
    "thumbnail": "http://placehold.it/264x204",
    "timelineLabels": {
        "1985": "1985",
        "1988": "1988",
        "1991": "1991",
        "1994": "1994",
        "1997": "1997",
        "2000": "2000",
        "2003": "2003",
        "2006": "2006",
        "2009": "2009",
        "2012": "2012",
        "2015": "2015"
    },
    "keyframes": [
        {
            "Text": "This is keyframe 1",
            "BoundingBox": {
                "xmin": 239318.1997833043,
                "xmax": 243329.75371107023,
                "ymin": 522985.54512794747,
                "ymax": 525046.8030298844
            },
            "Pause": false,
            "StopFrame": "1984",
            "Layers": [],
            "Map": "landsat-base"
        },
        {
            "Text": "This is keyframe 2",
            "BoundingBox": {
                "xmin": 241335.64161644113,
                "xmax": 243022.59307168378,
                "ymin": 523816.2365739558,
                "ymax": 524608.7004080642
            },
            "Pause": true,
            "StopFrame": "2015",
            "Layers": [],
            "Map": "landsat-base"
        },
        {
            "Text": "This is keyframe 2",
            "BoundingBox": {
                "xmin": 241335.64161644113,
                "xmax": 243022.59307168378,
                "ymin": 523816.2365739558,
                "ymax": 524608.7004080642
            },
            "Pause": false,
            "StopFrame": "1984",
            "Layers": [],
            "Map": "landsat-base"
        }
    ]
}

As you can see, the file begins with two attributes: title and thumbnail image, which are pretty straightforward. Next, the thumbnailLabels contains the capture times that you want displayed on the timeline; the left hand side represent original capture times, and the right hand side represent the timeline labels (in case you want to show different text). Finally, we have an array of keyframes.

Each keyframe consists of the following attributes:

• Text: this is what the Explain box will tell the user
• BoundingBox: defines the view of the keyframe
• Pause: whether the timeline should be playing and looping
• StopFrame: where the timeline animation should begin
• Layers: the list of layers that should be active for the keyframe
• Map: the base map layer to use

Showing the story

Go to modes-menu.html and use the addStory function.