Adding a timeslider controller to openlayers

Question

I have a database that contains some weather data in a .csv format. Each table represents the weather condition at specific point in time. Using the geoserver, I can visualise each of these tables on my browser. What I have been searching for a way to do, is something to add as slider to my html code, so it shows the weather condition at each minute, as I slide across the slider.

I have found some .js code here, but honestly speaking, don't know where to add to fit my purpose (or even if it really fits the purpose or not)

https://github.com/metno/openlayers-timeslider

Also, I don't know if this would be helpful, but the part of the html that shows the data on the map is as following:

var rainLayer = new ol.layer.Tile({
  source: new ol.source.TileWMS({
  url: 'http://x.x.x.x/geoserver/wms',
  params: {'LAYERS': 'storename:layername'}
});

Answer 1

You can use ImageMosaic plugin for raster time-series data of Geoserver. Here is the documentation for implementing a time enabled ImageMosaic. after implementing the mosaic you need to pass the time parameter to the geoserver in the openlayers like this:

var wms = new ol.layer.Tile({
            name: name,
            opacity: opacity,
            source: new ol.source.TileWMS({
                url: global.geoserverWMS2 + 'wms',
                params: {
                    'LAYERS': layer_name,
                    'TILED': true,
                    'TIME': '2017-01-01', // this is an example
                },
                serverType: 'geoserver'
            })
        });

and once you wanted to change the time parameter in order to render the corresponding weather image just use the updatePrams() on the wms layer like this:

wms.getSource().updateParams({'time': '2016-01-01'})
wms.getSource().updateParams({'time': '2015-01-01'})
wms.getSource().updateParams({'time': '2014-01-01'})

and it will refresh the data source and render the new imagery.