Hi everybody,
I've been working on displaying a multi-dimensional mosaic dataset in a web app with js (which wouldn't have been possible without this forum so far: thank you).
I'm nearly done with everything, but there's one lingering problem:
My dataset intends to show scenarios in five year increments starting at +5 years and going to +100 years (in the future starting from when the user is looking at the data [or intends to implement said scenario]).
Currently, the date field is set in years and I have added 2000 to each of the scenarios so that TimeSlider would work. So my date slider looks like:
After changing a few things in the CSS, namely:
#timeSlider {
position: absolute;
width: 33%;
left: 33%;
}
.esri-time-slider__time-extent,
.esri-time-slider__min,
.esri-time-slider__max,
.esri-slider__tick.minorTick {
display: none !important;
}
It looks like this:
Just in case, here's the JS used to create TimeSlider:
const timeSlider = new TimeSlider({
container: 'timeSlider',
mode: 'instant',
view: view
});
view.ui.add(timeSlider, 'manual');
let timeLayerView;
view.whenLayerView(layer).then(function(layerView) {
timeLayerView = layerView;
const fullTimeExtent = layer.timeInfo.fullTimeExtent;
const start = fullTimeExtent.start;
timeSlider.fullTimeExtent = fullTimeExtent;
timeSlider.values = [start];
timeSlider.stops = {
interval: layer.timeInfo.interval
};
});
What I would like is an *animated* slider with labels in 5 year increments starting at 5 and ending at 100.
-------------------------------------------------------------------------------------------------------------------------------------------------------
So the way I see, there would be three ways to 'solve' this problem:
- Somehow hack time-enabled layers and TimeSlider JS to accept values less than 100 as temporal
- Allow TimeSlider to configure user-defined labels
- Use CSS to define labels
Are any of these even possible?