TimeSlider API and caching

08-30-2019 12:44 PM
New Contributor

I'm trying to use the new TimeSlider in a SceneView using an time based MapImageLayer.

The slider seems to work correctly.  However why is it that the different images are not cached at all on the browser side.  It seems that every time the LayerView.filter is updated with a new timeExtent, a full http get request is performed every time.

Example:  In this example from arcgis online if you look at the network traffic (F12) you will notice that once the time slider goes thru a full cycle, it then starts getting images from the browser cache.


I'm basically trying to do the same as the example above but using ArcGIS Javascript API on a web browser, but it's very slow because every interval is doing a full get to the noaa radar server


Here is my sample code:

rainfallLayer = new MapImageLayer({
         id: "radarImageLayerId",
         title: "Radar imagery nexrad time",
         url: "https://nowcoast.noaa.gov/arcgis/rest/services/nowcoast/radar_meteo_imagery_nexrad_time/MapServer",
         refreshInterval: 0,
         opacity: 0.6,
         sublayers: [
            title: "Radar overlay",
            id: 3,
            visible: true
         visible: true

map = new Map({
      basemap: "streets",
      layers: [rainfallLayer]

mapView = new SceneView({
   container: "viewDiv",
   map: map,
   camera: {
      position: {
      x: -81.66,
      y: 29.65,
      z: 20654
      tilt: 73
      constraints: {
         altitude: {
         min: 100

const timerStart = new Date();
const timerEnd = new Date();
timerStart.setHours(timerStart.getHours() - 2);
const timerStartDefault = new Date();
timerStartDefault.setMinutes(timerEnd.getMinutes() -30);

const timeSlider = new TimeSlider({
   container: "timeSlider",
   mode: "instant",
   view: mapView,
   playRate: 4000,
   stops: {
      interval: {
         value: 30,
         unit: "minutes"
   fullTimeExtent: {
   start: timerStart,
   end: timerEnd
   values: [timerStart, timerEnd]
//default the timeSlider to the end.
mapView.ui.add(timeSlider, "manual");

let timeLayerView;
mapView.whenLayerView(rainfallLayer).then(function(lv) {
      timeLayerView = lv;
      const fullTimeExtent = rainfallLayer.timeInfo.fullTimeExtent;
      const start = fullTimeExtent.start;

timeSlider.watch("timeExtent", function(value) {
      timeLayerView.filter = {
      timeExtent: value

0 Kudos
0 Replies