Using more than one time aware layer with the time slider

Question

ESRI JS API 2.24.7
ES Modules & React

We are trying to use 2 different time aware layers and each has a different timeExtent. One of the timeExtents we can get directly from the layer and the other we have to manually set the timeExtent. Individually we can do either one no issue, switching between them is the issue.

One layer is Future Wind Forecast for the next 72 hours, the other layer is Weather Radar, from 4 hours in the past to the current time. So we have to change the slider to use the new extents when we switch layers.

Question is: I'm not sure how to update the view or use the other layers extent when we switch. What is the process to switch between layers with different TimeExtents, how to do we get the map/view to be aware we are using a different extent?

Do we connect the slider to the View and change the extent on the slide and it updates the view or is there another way we should be doing this?

Thanks

ChrisSchreiber · Answer

Thanks! This may help me with a similar issue!

EricLake1 · Answer

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)),
				}
			}
		}