Try it out:
The background style and colors in this component are set via attribute as shown in the code block below. Background color can be defined in any standard css color format. The example demonstrates this by using both keyword for color0 and hex for color1.
<voyager-explorer id="voyager" style="display: block; position: relative; height: 450px"
bgcolor="red #000" bgstyle="LinearGradient" root="https://3d-api.si.edu/content/document/d8c636ce-4ebc-11ea-b77f-2e728ce88125/"
document="document.json">
Set a new background style (Solid, LinearGradient, RadialGradient) and click ‘Set Style’ to apply it to the component. Depending on the active style, set the primary and secondary colors and click ‘Set Color’ to apply.
How it works:
Below we will break down the javascript from this page that makes use of the setBackgroundColor() and setBackgroundStyle() API functions.
Note that in each case the respective HTML input elements are passed in to provide access to the user input.
function setBackgroundStyle(style) {
// Get reference to the Explorer element by id
var voyagerElement = document.getElementById("voyager");
// Call the style function with the value of the
// option input element as the parameter
voyagerElement.setBackgroundStyle(style.value);
}
To set the color we follow the same pattern. Pass in the two color inputs and find the Explorer element.
function setBackgroundColor(color0,color1) {
// Get reference to the Explorer element by id
var voyagerElement = document.getElementById("voyager");
// Call the color function with the color input
// element current values
voyagerElement.setBackgroundColor(color0.value, color1.value);
}
