Time base layer display for Imagery Services

shay-geo

Hello,

 

How do you get the imagery services working with TimeSlider widget

Was trying to follow this example https://developers.arcgis.com/javascript/latest/sample-code/widgets-timeslider/ with the below service https://idpgis.ncep.noaa.gov/arcgis/rest/services/radar/radar_base_reflectivity_time/ImageServer

Also tried to load it as a ImageryLayer, but slider looks disabled due to the wrong start , end and stop values.

"esri/layers/ImageryLayer",
//"esri/layers/ImageServiceParameters"
], (Map, MapView, FeatureLayer, TimeSlider, Expand, Legend, ImageryLayer) => {

const layer = new ImageryLayer("https://idpgis.ncep.noaa.gov/arcgis/rest/services/radar/radar_base_reflectivity_time/ImageServer");

 

 

 

UndralBatsukh

Hi there, 

So there are couple of issues with the metadata of the image service. As of time of my checking, the service's metadata says the following. However, the image service is returning the data for today (Dec 9, 2021). So setting the timeSlider.timeExtent to the ImageryLayer.timeInfo.fullTimeExtent won't work because it would be set to Oct.

Time Info:
Start Time Field: IDP_ValidTime
End Time Field: IDP_ValidEndTime
Time Extent:
[2021/10/25 10:08:19 UTC, 2021/10/25 14:10:57 UTC]

 

So to get this service working with the TimeSlider, couple of things need to happen. We need to query all the rasters to dynamically update the TimeSlider.fullTimeExtent whenever the app loads. Please see the code snippet with explanations.

// the service's timeInfo advertises really old time extent
// therefore, the query should be done to fetch all time attributes
// from the service while ordering the results by the IDP_ValidTime field
// set the timeslidder's fullTimeExtent based on the first and last values
// from the result
const query = {
  where: "1=1",
  outFields: ["objectid", "IDP_ValidTime", "IDP_ValidEndTime"],
  returnGeometry: false, 
  orderByFields: ["IDP_ValidTime"]
};
        
layer.queryRasters(query).then((results) =>{
  const fullTimeExtent =  {
    start: results.features[0].attributes.idp_validendtime,
    end: results.features[results.features.length -1].attributes.idp_validendtime
  };
  // set up time slider properties
  timeSlider.fullTimeExtent = fullTimeExtent;
       
  // service's metadata says the data is updated with 10 minute interval
  // so setting the timeSlider animate the data with 10 minute interval
  timeSlider.stops = {
    interval: {
      value: 10, 
      unit: "minutes"
    }
  };
});

 

Check out this working codepen to see this in action. 

 

Hope this helps,

-Undral