Figured it out. I think my main issue was not updating the time slider correctly as quite a few settings changed based on the layer, timeExtent, fullTimeExtent and stops.
We use the slider as well as the LayerList widget. So when the user picks a layer in the layer list, we set a context variable in React, which the slider then watches for in a useEffect. When it is changed we run the code below based on the layer selected to update the slider.
We have 3 time aware layers, Weather Radar and 2, 72 future forecast layers (precip and wind)
layerlist.listItemCreatedFunction = function (event) {
if (item.title === "Weather Radar") {
//set the flag to fire the useEffect
if (appContext.value.timeSliderLayerID != null) {
const utcDateNow = new Date(Date.now());
let year = utcDateNow.getFullYear();
let month = utcDateNow.getMonth();
let day = utcDateNow.getDate();
let hour = utcDateNow.getUTCHours();
let minutes = utcDateNow.getUTCMinutes();
//Swap time Extents based on layer selected
if (appContext.value.timeSliderLayerID == "WeatherRadar") {
slider.stops = {
interval: {
unit: "minutes",
value: 10
}
};
//To display animated and time enabled radar, we have to go back 4 hours to get the date and time
//we use this to create a time extent, the slider then knows how to query for the proper layers regarding the current timeExtent on the slider
//we have to manually create the time extents as it is nor in the layer itself like other layers may have it
const timeExtent = new TimeExtent({
start: new Date(Date.UTC(year, month, day, hour - 4, minutes)),
end: new Date(Date.UTC(year, month, day, hour, minutes))
});
slider.fullTimeExtent = timeExtent;
slider.timeExtent = {
start: new Date(Date.UTC(year, month, day, hour - 4, minutes)),
end: new Date(Date.UTC(year, month, day, hour - 4, minutes + 10)),
}
}
else if (appContext.value.timeSliderLayerID == "WeatherWindSpeed") {
//note: weatherWindSpeed is a group layer
//get the time info from the layer itself
let windLayer = appContext.value.view.map.findLayerById('NationalLevelWindspeed');
slider.fullTimeExtent = windLayer.timeInfo.fullTimeExtent.expandTo("hours");
//slider.stops = windLayer.timeInfo.interval;
slider.stops = {
interval: {
unit: "hours",
value: 3
}
};
slider.timeExtent = {
start: new Date(Date.UTC(year, month, day, hour, minutes)),
end: new Date(Date.UTC(year, month, day, hour + 3, minutes)),
}
}
else if (appContext.value.timeSliderLayerID == "PrecipitationForecast") {
//get the time info from the layer itself
let precipLayer = appContext.value.view.map.findLayerById('PrecipitationForecast');
slider.fullTimeExtent = precipLayer.timeInfo.fullTimeExtent.expandTo("hours");
slider.stops = {
interval: precipLayer.timeInfo.interval
};
slider.timeExtent = {
start: new Date(Date.UTC(year, month, day, hour, minutes)),
end: new Date(Date.UTC(year, month, day, hour + 3, minutes)),
}
}
}
