Select to view content in your preferred language

TimeSlider API and caching

556
0
08-30-2019 12:44 PM
JocelynGranger
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.

https://www.arcgis.com/home/webmap/viewer.html?webmap=548e700f50bb4434be222ddd7aa1e756 

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

Thanks.

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.
timeSlider.previous();
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