Improvements to time support for WMSLayers
Dear all,
Version 4.17 introduced Time support for WMSLayers which is very welcomed. There are, however, a few quirks, at least for our use case.
Our application utilizes multiple meteorological layers from multiple WMS-servers. The layers have different TimeDimensions (both start/end and intervals) and user is able to mix and match these as he deems fit. The user is also thereafter able to replay the data via a TimeSlider, and view the Time dimensions for the different layers.
The above is what we are trying to replicate in ArcGIS. It shows the data from 4 layers from three different servers. The layers all have different start/end times (visualized by the colored bars) and different intervals (the number inside the parentheses and the vertical lines across the colored bars)
The ArcGIS WMSLayer docs state that "The timeInfo property is automatically set at layer initialization if the layer has one or more time dimensions." This is true to some extent, no pun intended, however, there's room for improvement.
WMSLayer.timeInfo.fullTimeExtent{start|end} seem to currently be set to the min/max values of ALL the layers available on the provided WMS server, regardless of the fact that only a few layers are selected in WMSLayer.sublayers. This becomes problematic for WMS servers with hundreds of layers available of which one only wants to use a few (whose time dimensions are subsets of the servers min/max).
Furthermore WMSLayer.timeInfo.interval doesn't seem to be set at all, even though the information is present in getCapabilities.
Here's a code-pen describing my problems with the API.
Best Regards,
Emil Aura
Hi Anne,
Is it possible to make this work? https://pavics.ouranos.ca/twitcher/ows/proxy/thredds/wms/birdhouse/cccs_portal/indices/Final/ANUSPLI...
I cannot use Javascript to load this to a simple web app. However, I am able to get this from ipyleaflet easily:
The WMS layer can be added to a web map from enterprise Portal too. Are there any tricks in order to make it work using the latest JavaScript API?
Here is the code pen.
Thanks.
Finally, I got this work, using ArcGIS JavaScript API 4.21. Just to share the experience, here is the picture:
the code (put the code under your web server, say, C:\inetpub\wwwroot\wms)
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>TimeSlider widget | Sample | ArcGIS API for JavaScript 4.21</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.21/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#timeSlider {
position: absolute;
left: 5%;
right: 5%;
bottom: 20px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/WMSLayer",
"esri/widgets/TimeSlider",
"esri/core/urlUtils"
], function (Map, MapView, WMSLayer, TimeSlider, urlUtils) {
urlUtils.addProxyRule({
urlPrefix: "https://pavics.ouranos.ca",
proxyUrl: "../proxy/proxy.ashx"
});
const map = new Map({
basemap: "hybrid"
});
const view = new MapView({
map,
container: "viewDiv"
});
const layer = new WMSLayer({
url: "https://pavics.ouranos.ca/twitcher/ows/proxy/thredds/wms/birdhouse/cccs_portal/indices/Final/ANUSPLIN_v1/rx1day/YS/nrcan_canada_1950-2013_rx1day_YS.nc"
});
layer.load().then(function(lyr){
const precipitation = layer.allSublayers.find((l) => l.name === "rx1day");
layer.sublayers = [precipitation];
map.add(layer);
const { dimensions } = precipitation;
const timeDimension = dimensions.find((d) => d.name === "time");
const dates = timeDimension.extent;
const start = dates[1];
const end = dates[63];
const timeSlider = new TimeSlider({
container: "timeSlider",
view,
mode: "instant",
timeVisible: true,
loop: true,
fullTimeExtent: {
start,
end
},
stops: {
interval: {
value: 1,
unit: "years"
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="timeSlider"></div>
</body>
</html>
The tricks are the following:
1. Add proxy: copy the contents inside the DotNet folder to your web server, say, C:\inetpub\wwwroot\proxy. This is required as the WMS layer server does not support CORS.
2. Make changes to the proxy.ashx file: In the copyRequestHeaders method, add case "origin":
I.e., make sure "the proxy does not send the Origin". This is the key. Thanks to @AnneFitz for it.
