API Example: UI Configuration

Try it out:

Enter any combination of EUIElements values (none, menu, title, logo, language) in the input box below and click “Update UI” to refresh the page with that UI config. Use “|” to concatenate multiple options.

How it works:

The ‘uiMode’ attribute can either be set directly on the Voyager Explorer component, or can be passed in as a URL parameter. For this example we chose to do the latter and append the parameter to the window location and refresh the page.

function updateUI(textinput) {
	window.location = window.location.pathname + "?uiMode=" + textinput.value;
}

The code below shows option two with the example tag uiMode attribute directly set to display no UI.

<voyager-explorer style="display: block; position: relative; height: 450px" root="https://3d-api.si.edu/content/document/d8c636ce-4ebc-11ea-b77f-2e728ce88125/document.json" uiMode="none" dracoroot="https://voyager-dev.glitch.me/draco/" document="document.json"></voyager-explorer>