TimeSlider: Displaying data with 30 year window in 1 year steps

338
2
Jump to solution
08-12-2022 05:09 AM
MBenn22
New Contributor

Hello,

I have created a service that contains 30Y rolling mean values.

The raster layer (MapServer) has values values for intervals from 1950 to 2022. So, we have 1950-1980, 1951-1981, 1952-1982, ..., 1992-2022.

When I use the timeSlider in mode time-window it only displays the intervals 1950-1980, 1980-2010, ....

 

  const timeSlider = new TimeSlider({
	container: "timeSlider",
	mode: "time-window",
	view: view,
	timeVisible: false,
	fullTimeExtent: {
	  start: new Date(-631152000000), // Jan 1, 1950,
	  end: new Date(1640995200000) // Jan 1, 2022
	},
	stops: {
	  interval: {
		value: 30,
		unit: "years"
	  }
	}
  });
  view.ui.add(timeSlider, "bottom-left");

 

 

Is it possible to set the stepping interval to 1 or 5 year steps, like it is possible in ArcGIS Pro?

MBenn22_0-1660305842080.png

Alternatively, is it possible to configure custom ranges (not stops)?

JavaScript API is quite new to me, so please point me out to the right direction.

 

Thank you.

0 Kudos
1 Solution

Accepted Solutions
MBenn22
New Contributor

Thank you @UndralBatsukh for the hint. I had to set  stops, fullTimeExtent and timeExtent.

const timeSlider = new TimeSlider({
  container: "timeSlider",
  view: view,
  mode: "time-window",
  fullTimeExtent: { 
        start: new Date(1950, 0, 1),
        end: new Date(2020, 0, 1)
  },
  timeExtent: { 
        start: new Date(1951, 0, 1),
        end: new Date(1981, 0, 1)
  },
  stops: {
    interval: {
        value: 1,
        unit: "years"
    }
  }
});

 Previously I had only set the fullTimeExtent and stops.

View solution in original post

0 Kudos
2 Replies
UndralBatsukh
Esri Regular Contributor

Hi there, 

I hope I am following what you are asking here. In any case, just set the TimeSlider.stops to your desired interval steps (e.g 1 year). 

const timeSlider = new TimeSlider({
  ...
  stops: {
    interval: {
      value: 1,
      unit: "years"
     }
  }
 });
MBenn22
New Contributor

Thank you @UndralBatsukh for the hint. I had to set  stops, fullTimeExtent and timeExtent.

const timeSlider = new TimeSlider({
  container: "timeSlider",
  view: view,
  mode: "time-window",
  fullTimeExtent: { 
        start: new Date(1950, 0, 1),
        end: new Date(2020, 0, 1)
  },
  timeExtent: { 
        start: new Date(1951, 0, 1),
        end: new Date(1981, 0, 1)
  },
  stops: {
    interval: {
        value: 1,
        unit: "years"
    }
  }
});

 Previously I had only set the fullTimeExtent and stops.

0 Kudos