<!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>