Make use of actions

1. 1. Define the action

First the action needs to be defined. This is done inside the array of the actions key in the items.json file. For a viewpoint action this could look like:

    "actions": [
        {
            "id": "viewpoint-PotsdamerPlatz",
            "type": "viewpoint",
            "viewpoint": {
                "distance": 533.79,
                "groundPosition": [
                    13.375510, 52.509600, 35.240790
                ],
                "heading": 263.71,
                "pitch": -44.86,
                "roll": 0,
                "animate": true
            }
        }
    ]

The value of "id" needs to be a unique action id, the value of "type" is the action type. All other keys are action type specific. In this case it is the "viewpoint" key containing the settings for the viewpoint action.

For a parameter description of the viewpoint action and other available action types see Action Reference.

The next step is to link the action to an html element. This is done by adding objects to the items key of the the items.json file. There are two ways to trigger an action, either by a scroll or by a click interaction. The type of the interaction is specified within those objects. Usually scroll interactions are linked to div elements, click interactions to button elements.

In order to trigger a scroll interaction the class attribute class="story-content" has to be added to the corresponding html element.

The requirement for a click interaction is that the clickable element has an id.

The previously created viewpoint action should now be linked as an scroll interaction to the following HTML element of the index.html. As it is an scroll interaction the div element must have the "story-content" class attribute.

<div id="demo-viewpoint" class="story-content">
    [..]
</div>

Therefore the following object needs to be added to the items array:

"items": [
    {
        "htmlID": "#demo-viewpoint",
        "scrollInteraction": [
            "viewpoint-PotsdamerPlatz"
        ]
    }
]

The value of the "htmlID" is the id of the html element the action should be linked to. The second key is either "scrollInteraction" or "clickInteraction" with an array of actions that will be executed. The order of the array is also the order in which the actions are executed.