Daylight

If true, the component will not be destroyed automatically when it is disconnected from the document. This is useful when you want to move the component to a different place on the page, or temporarily hide it. If this is set, make sure to call the destroy method when you are done to prevent memory leaks.

Attribute

auto-destroy-disabled

Default value

false

Sets the season that is used when the component displays the season picker. Each season uses a fixed date corresponding to the seasonal equinoxes and solstices.

See also

• dateOrSeason

Attribute

current-season

Controls whether the component displays a date or a season picker. When the date picker is set, the user selects the date from a calendar. The season picker allows the user to choose a season from a drop-down list. Each season uses a fixed date corresponding to the equinoxes and solstices of 2014.

Attribute

date-or-season

Default value

"date"

Starts or pauses the daytime animation cycling through the minutes of the day. Set the property to true to start the animation and to false to pause it.

Attribute

day-playing

Default value

false

Indicates the heading level to use for the component title.

Attribute

heading-level

Default value

2

Attribute

hide-date-picker

Default value

false

Attribute

hide-header

Default value

false

Attribute

hide-play-buttons

Default value

false

Attribute

hide-shadows-toggle

Default value

false

Attribute

hide-sun-lighting-toggle

Default value

false

Attribute

hide-timezone

Default value

false

Icon which represents the component. Typically used when the component is controlled by another component (e.g. by the Expand component).

See also

• Calcite Icons

Attribute

icon

Default value

"brightness"

The component's default label.

Attribute

label

The calendar date in the timezone given by utcOffset.

Examples

1
daylight.localDate = new Date("2005-08-25");

1
2
3
4
// Alternatively, the date can be set by configuring the `date` property of `SunLighting`.
viewElement.environment.lighting = new SunLighting({
  date: new Date("2005-08-25T16:00:00")
});

Attribute

local-date

Controls the daytime animation speed.

Example

1
2
// Plays the daylight animation at half of the default speed
daylight.playSpeedMultiplier = 0.5;

Attribute

play-speed-multiplier

Default value

1.0

Attribute

position

By assigning the id attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.

See also

• Associate components with a Map or Scene component

Attribute

reference-element

Slider position for the time of day in the timezone given by utcOffset. The position represents the time of the day in minutes. Possible values range between 0 and 1440.

Examples

1
2
// Set the time to 4:00 PM (16:00) in the given timezone.
daylight.timeSliderPosition = 16 * 60;

1
2
3
4
5
// Alternatively, the time can be set by configuring the `date` property of `SunLighting`.
// Then, the time slider gets updated automatically.
viewElement.environment.lighting = new SunLighting({
  date: new Date("2005-08-25T16:00:00")
});

Attribute

time-slider-position

Sets the interval, in minutes, with which the time slider increments or decrements as it is dragged or changed via the keyboard.

Example

1
2
// Set steps at an interval of 60. Then, the slider thumb snaps at each hour of the day.
daylight.timeSliderSteps = 60;

Attribute

time-slider-steps

Default value

5

The difference in hours between UTC time and the time displayed in the component.

Examples

1
daylight.utcOffset = -8;

1
2
3
4
// Alternatively, the UTC offset can be set by configuring the `displayUTCOffset` property of `SunLighting`.
viewElement.environment.lighting = new SunLighting({
  displayUTCOffset: -8
});

Attribute

utc-offset

The view associated with the component.

Note: The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this view property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the Daylight component will be associated with a map or scene component rather than using the view property.

Starts or pauses the date animation cycling through the months of the year. Set the property to true to start the animation and to false to pause it.

Attribute

year-playing

Default value

false

Create a promise that resolves once component is fully loaded.

Example

1
2
3
4
const arcgisDaylight = document.querySelector("arcgis-daylight");
document.body.append(arcgisDaylight);
await arcgisDaylight.componentOnReady();
console.log("arcgis-daylight is ready to go!");

Returns

Promise<void>

Permanently destroy the component.

Returns

Promise<void>

Emitted when the component associated with a map or scene view is ready to be interacted with.

Fires when the user changes the date or time in the component by interacting with the slider, the date picker, the season selector or the play buttons.