arcgis-time-slider

// Create a TimeSlider with two actions to snap the thumb to
// two specific time extents.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2011, 0, 1),
    end: new Date(2012, 0, 1)
  },
  mode: "instant",
  actions: [
    {
      id: "quake",
      icon: "exclamation-mark-triangle",
      title: "Jump to Earthquake"
    },
    {
      id: "quake-plus-one-month",
      icon: "organization",
      title: "One month later"
    }
  ]
});

// listen to timeSlider's trigger-action event
// check what action user clicked on and respond accordingly.
timeSlider.on("trigger-action", (event) => {
  const quake = new Date(Date.UTC(2011, 3, 11, 8, 16, 12));
  const oneMonthLater = new Date(quake.getTime()).setMonth(quake.getMonth() + 1);
  switch(event.action.id) {
    case "quake":
      timeSlider.timeExtent = {
        start: quake,
        end: quake
      };
      break;
    case "quake-plus-one-month":
      timeSlider.timeExtent = {
        start: oneMonthLater,
        end: oneMonthLater
      };
      break;
  }
});

// Create a timeslider widget that is initially disabled.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2000, 5, 1),
    end: new Date(2010, 0, 1)
  },
  disabled: true
});

timeSlider.effectiveStops.forEach((stop) => {
  console.log(stop);
});

// Create a new TimeSlider with set dates
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  view: view
});

// wait for the time-aware layer to load
layer.when(() => {
  // set up time slider properties based on layer timeInfo
  timeSlider.fullTimeExtent = layer.timeInfo.fullTimeExtent;
  timeSlider.stops = {
   interval: layer.timeInfo.interval
  };
});

timeSlider.layout = "compact";

// Start a time slider animation that advances every second
// and restarts when it reaches the end.
timeSlider.set({
  loop: true,
  playRate: 1000
});
timeSlider.play();

// Create a single thumbed time slider that includes all historic content.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  view: view,
  mode: "cumulative-from-start",
  fullTimeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2010, 0, 1)
  },
  timeExtent: {
    start: null,
    end: new Date(2001, 0, 1) //end date
  }
});

// Start a time slider animation that advances
// ten times a second and stops when it reaches the end.
timeSlider.set({
  loop: false,
  playRate: 100
});
timeSlider.play();

// Display the current state of the view model.
switch (timeSlider.viewModel.state) {
  case "disabled":
    console.log("The view is not ready or some property are not set.");
    break;
  case "ready":
    console.log("The time slider is ready for use.");
    break;
  case "playing":
    console.log("The time slider is currently animating.");
    break;
}

// By default in "en-US" the TimeSlider will display ticks with "2010, 2011, 2012, etc".
// Overwrite TimeSlider tick configuration so that labels display "'10, '12, '14, etc" in red.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  fullTimeExtent: {
    start: new Date(2010, 0, 1),
    end: new Date(2020, 0, 1)
  },
  tickConfigs: [{
    mode: "position",
    values: [
      new Date(2010, 0, 1), new Date(2012, 0, 1), new Date(2014, 0, 1),
      new Date(2016, 0, 1), new Date(2018, 0, 1), new Date(2020, 0, 1)
    ].map((date) => date.getTime()),
    labelsVisible: true,
    labelFormatFunction: (value) => {
      const date = new Date(value);
      return `'${date.getUTCFullYear() - 2000}`;
    },
    tickCreatedFunction: (value, tickElement, labelElement) => {
      tickElement.classList.add("custom-ticks");
      labelElement.classList.add("custom-labels");
    }
  }]
};

// this CSS goes with the snippet above.
#timeSlider .custom-ticks {
  background-color: red;
  width: 1px;
  height: 8px;
}
#timeSlider .custom-labels {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 15px;
  color: red;
}

// Display the time extent to the console whenever it changes.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  mode: "time-window",
  fullTimeExtent: {
    start: new Date(2019, 2, 3),
    end: new Date(2019, 2, 5)
  },
  timeExtent: {
    start: new Date(2019, 2, 1),
    end: new Date(2019, 2, 28)
  }
});

reactiveUtils.watch(
  () => timeSlider.timeExtent,
  (timeExtent) => {
    console.log("Time extent now starts at", timeExtent.start, "and finishes at:", timeExtent.end);
  }
);

// For time sliders with a small time extent it may be useful to display times as shown below.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  mode: "time-window",
  timeVisible: true,
  fullTimeExtent: {
    start: new Date(2019, 2, 3),
    end: new Date(2019, 2, 5)
  },
  timeExtent: {
    start: new Date(2019, 2, 1),
    end: new Date(2019, 2, 28)
  }
});

// Create and then add a TimeSlider component and then listen to changes in the View's time extent.
const timeSlider = new TimeSlider({
  container: "timeSliderDiv",
  view: view,
  mode: "instant",
  fullTimeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2010, 0, 1)
  },
  timeExtent: {
    start: new Date(2000, 0, 1),
    end: new Date(2000, 0, 1)
  }
});
view.ui.add(timeSlider, "top-left");

reactiveUtils.watch(
  () => view.timeExtent,
  (timeExtent) => {
    console.log("New view time is: ", timeExtent.start);
  }
);

const arcgisTimeSlider = document.querySelector("arcgis-time-slider");
document.body.append(arcgisTimeSlider);
await arcgisTimeSlider.componentOnReady();
console.log("arcgis-time-slider is ready to go!");