Tutorial: Timeseries with GeoServer and OpenLayers

In this tutorial I will show how to set up a timeseries in GeoServer and connect it to an OpenLayers webviewer.

GeoServer
An open-source server program made for serving spatial data (vector and raster). GeoServer is capable of instant tiling, styling and projection transformation. GeoServer also allows the client to request the data in many data formats and supports both WMS and WFS.

OpenLayers
A small open-source JavaScript library for interactive maps. A good alternative can be Leaflet.

1. A prerequisite for GeoServer is the Java Runtime Environment (JRE). At the time of writing GeoServer requires JRE 8. You can download it here: http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html
2. Install the .exe of JRE and follow all the steps.
3. Download GeoServer from http://geoserver.org/download/
4. Launch the .exe of the GeoServer. You can accept the standard settings. You also need to specify where you installed the JRE 8 (normally you can find the folder in your ‘Program Files’).

5. Take note of the administration credentials. You can accept the standard (Username: ‘admin’, Password: ‘geoserver’ for now and change them later.

6. Take note of the web server port. You can leave it on port 8080.

7. Finish the installation.

Congratulations! You now have your own GeoServer installed. Let’s start it up.

8. Start the GeoServer (Start => All Programs => GeoServer … => Start GeoServer).

9. Wait for the comman shell to start everything up. Then go to http://localhost:8080/geoserver/ (if you have entered a different port you need to use this instead of 8080).
10. Login with your admin credentials (username: ‘admin’, password: ‘geoserver’).
11. Go to ‘Workspaces’ and click on ‘Add new workspace’.

12. Add a name (I will use ‘timeseries’) and a Namespace URI (I will use timeseries.earder.com) and click submit.

13. Go to ‘Stores’ and click on ‘Add new Store’.

14. Click on ImageMosaic.

15. Go to the coverages folder in your data directory of your GeoServer (Start => All Programs => GeoServer … => data_dir => coverages) and create a new folder for your data. I will call this folder ‘timeseries’. Now add your data to this folder. You can use the following files: timeseries_20030517.tif, timeseries_20130201.tif, timeseries_20170803.tif

16. We also need to add some properties files to specify how to extract the date from the file title. We can use the following files and place them in the same folder: indexer.properties and timeregex.properties

17. We can now go back to our browser and select the workspace and data directory.

18. Click ‘save’ and then on ‘Publish’.

19. Go to ‘Dimensions’ and check ‘Time: Enabled’, and make the ‘Presentation’ a list. Then click ‘Save’.

20. We now have a online layer with a timestamp enabled. We can now create our OpenLayers viewer. You can use any html/JavaScript editor you like. If you don’t have one installed yet, I like Atom: https://atom.io.


<!DOCTYPE html>
<html>
  <head>
    <title>WMS Time</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>

    <style>

    /* Setting up the slider styling */
    .slidecontainer {
        width: 120px;
        margin-top: -30px;
        margin-left: 10px;
        z-index: 100px;
    }

    .slider {
        -webkit-appearance: none;
        width: 100%;
        height: 15px;
        border-radius: 5px;
        background: #d3d3d3;
        outline: none;
        opacity: 0.7;
        -webkit-transition: .2s;
        transition: opacity .2s;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: 	#00008B;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background: #4CAF50;
        cursor: pointer;
      }
    </style>
  </head>
<body>
    <!-- Create map container -->
    <div id="map" class="map"></div>
    <div role="group" aria-label="Animation controls">

<!-- Create slider container -->
    <div class="slidecontainer">
      <input type="range" min="0" max="2" value="0" class="slider" id="myRange">
      <p>Date: <span id="date_value"></span></p>
    </div>

    <script>

      // Set up the layers
      var layers = [
        new ol.layer.Tile({
            source: new ol.source.OSM()
          }),
        new ol.layer.Tile({
          source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/timeseries/wms',
            params: {'LAYERS': 'timeseries:timeseries'}
          })
        })
      ];

      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          // Defining the location in Lat Lon. In this case our image is from Brazil
          center:  ol.proj.transform([-55.3,-6.6], 'EPSG:4326', 'EPSG:3857'),
          zoom: 12
        })
      });

      // Define the available dates
      var dates = ['2003-05-17T00:00:00.000Z', '2013-02-01T00:00:00.000Z', '2017-08-03T00:00:00.000Z']

      var sliderRange = document.getElementById("myRange");
      sliderRange.max = dates.length-1;

      var dateValue = document.getElementById("date_value");
      dateValue.innerHTML = dates[sliderRange.value].slice(0,10);
      layers[1].getSource().updateParams({'TIME': dates[sliderRange.value]});

      // Update the current slider value (each time you drag the slider handle)
      sliderRange.oninput = function() {
      dateValue.innerHTML = dates[this.value].slice(0,10);
      layers[1].getSource().updateParams({'TIME': dates[this.value]});
      }
    </script>
  </body>
</html>

Creating a Timeseries with GeoServer and Open Layers