Time base layer display for Imagery Services

shay-geo — Thu, 09 Dec 2021 14:22:27 GMT

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");

Re: Time base layer display for Imagery Services

UndralBatsukh — Thu, 09 Dec 2021 18:20:09 GMT

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

topic Time base layer display for Imagery Services in ArcGIS JavaScript Maps SDK Questions

Time base layer display for Imagery Services

Re: Time base layer display for Imagery Services