Class: GuidedTour

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

CODE

 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

	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
	}