Using the ArcGIS JavaScript 4 SDK/API to load the WMS service of a NOAA Coast Watch Sea Surface Temperature dataset. The dataset that is trying to be loaded is an aggregated dataset which should contain the daily data for the entire year of 2022. See [here][1] in the online file server for the years available. Clicking through to the WMS server reveals the WMS get capabilities request in the browser; this details the dates on which the data is contained. The goal is to create something like [this][2] but natively in ArcGIS JS SDK. View the full codepen [here][3].
The WMS layer is loaded by the below code:
// SST (aggregated)
const layer2 = new WMSLayer({
url: "https://www.star.nesdis.noaa.gov/thredds/wms/BlendedSST5kmNightAggGHRSSTOSPO2022?service=WMS&version=1.3.0&request=GetCapabilities",
sublayers: [{ name: "analysed_sst" }],
customParameters: {
STYLES: 'boxfill/Rainbow',
COLORSCALERANGE: '271,310',
FORMAT: 'image/png',
NUMCOLORBANDS: 215
},
timeExtent: {
start: new Date(Date.UTC(2022, 0, 2))
},
useViewTime: false
});
const map = new Map({
basemap: new Basemap({ // "dark-gray-vector" // Basemap layer service. OG -> arcgis-topographic
portalItem: {
id: "1a386c5dfd864bfda3f03ab428e57640" // dark-gray-vector WGS84
}
})
});
const view = new MapView({
map: map,
container: "viewDiv", // Div element
center: [-75.056, 38.540], // Longitude, latitude
zoom: 5 // Zoom level
});
The map's time extent is not set explicitly, so the ```useViewTime``` is set to false.
I tried using a watch function to monitor and update the ```timeExtent``` property of the WMS layer. However, the ```timeExtent``` of the WMS layer is not set before it is called in the watch function (hence the commented out ```console.log()``` statement. The watch statement and time slider initialization is below:
const timeSlider = new TimeSlider({
container: "TimeSliderDiv",
// show data within a given time range
// in this case data within one year
mode: "instant",
fullTimeExtent: { // entire extent of the timeSlider
start: new Date(Date.UTC(2022, 0, 2)),
end: new Date(Date.UTC(2022, 11, 31))
},
timeExtent: { // location of timeSlider thumbs
start: new Date(Date.UTC(2022, 0, 2))
},
stops: {
interval: {
value: 1,
unit: "days"
}
}
});
view.ui.add(timeSlider, "bottom");
timeSlider.watch("timeExtent", (time) => {
console.log("Time extent now starts at", time.start, "and finishes at:", time.end);
// console.log(layer2.timeExtent.start,layer2.timeExtent.end);
layer2.timeExtent = time;
console.log(layer2.timeExtent.start,layer2.timeExtent.end);
});
map.add(layer2);
});
Removing any part of the time extent from either place they are at now did not fix my problem.
How do I get the time slider to update the WMS layer's time component and ensure that the date in the time slider is correct for the data being pulled?
[1]: https://www.star.nesdis.noaa.gov/thredds/catalog/socd/coastwatch/catalog_coastwatch_sst_blended_ghrs...
[2]: https://coastwatch.noaa.gov/cw_html/cwViewer.html?lat=27.00&lon=-80.80&z=3&date=20231015&layer0=base...
[3]: https://codepen.io/mendesd/pen/ZEVNdmE/
