On this page

GuidedTour

GuidedTour Widget class

Constructor

new GuidedTour(itownsView, tourConfig, mediaConfig)

It initializes the widget.

Parameters:

Name Type Description

itownsView

itowns.PlanarView

The itowns view.

tourConfig

object

The configuration of the widget

Properties

Name	Type	Description
`name`	string	Name of the GuidedTour
`description`	string	Description of the GuidedTour
`startIndex`	number	Index of the first step of the tour
`endIndex`	number	Index of the last step of the tour
`steps`	Array.<Step>	Array of steps

mediaConfig

Array.<Media>

All media of the tour

Source: index.js, line 48

Example

Config Example
{
  "steps": [
    {
      "previous": 0,
      "next": 1,
      "layers": ["layer_1", "layer_2"],
      "media": [],
      "position": {"x": 10, "y": 20, "z": 30},
      "rotation": {"x": 0.5, "y": 0, "z": 0.24, "w": 0}
    },
    {
      "previous": 0,
      "next": 1,
      "layers": ["layer_3"],
      "media": ["media_1", "media_2"]
    }
  ],
 "name": "Example",
 "description": "This is an example of GuidedTour config",
 "startIndex": 0,
 "endIndex": 1
}

Classes

GuidedTour

Members

currentIndex :number

Index of the current step

Type:

number

Source: index.js, line 100

description :string

Description of the GuidedTour

Type:

string

Source: index.js, line 76

domElement :HTMLElement

Root html of GuidedTour view

Type:

HTMLElement

Source: index.js, line 112

endIndex :number

Index of the last step of the GuidedTour

Type:

number

Source: index.js, line 88

itownsView :module:itowns~PlanarView

Type:

module:itowns~PlanarView

Source: index.js, line 64

mediaConfig :Array.<object>

Config of all media of the tour

Type:

Array.<object>

Source: index.js, line 106

mediaContainer :HTMLElement

Html div containing media of the step

Type:

HTMLElement

Source: index.js, line 118

name :string

Name of the GuidedTour

Type:

string

Source: index.js, line 70

nextButton :HTMLElement

Button to go to next step

Type:

HTMLElement

Source: index.js, line 130

previousButton :HTMLElement

Button to go to previous step

Type:

HTMLElement

Source: index.js, line 124

startIndex :number

Index of the first step of the GuidedTour

Type:

number

Source: index.js, line 82

steps :Array.<object>

Array of steps

Type:

Array.<object>

Source: index.js, line 94

Methods

addMedia(mediaIds)

Add media in the media container

Parameters:

Name	Type	Description
`mediaIds`	Array.<string>	The list of media IDs

Source: index.js, line 206

createMediaDiv(media) → {HTMLElement}

Creates a HTML element from a media config

Parameters:

Name	Type	Description
`media`	Media	The media config

Source: index.js, line 221

Returns:

The media as a HTML element

Type:: HTMLElement

dispose()

Dispose the DOM element

Source: index.js, line 253

filterLayers(layerIds)

Filters layers, displaying only those whose ID appears in the list

Parameters:

Name	Type	Description
`layerIds`	Array.<string>	Array of layer IDs

Source: index.js, line 195

getCurrentStep() → {Step}

Returns the current step of the tour

Source: index.js, line 264

Returns:

The current step of the tour

Type:: Step

getMediaById(mediaId) → {Media|null}

Returns the media config with the matching ID

Parameters:

Name	Type	Description
`mediaId`	string	The ID of the media

Source: index.js, line 274

Returns:

The media config

Type:: Media | null

goToStep(index)

Go to the step corresponding to the index

Parameters:

Name	Type	Description
`index`	number	Index of the step

Source: index.js, line 169

initHtml()

Creates the HTML of the GuidedTour

Source: index.js, line 138

travelToPosition(position, rotation)

Travel to the targeted position and rotation

Parameters:

Name	Type	Description
`position`	object	Target postion
`rotation`	object	Target rotation

Source: index.js, line 184