chingchai/timeseries.html

## timeseries.html
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      <meta name="description" content="Creating a Timeseries with GeoServer and OpenLayers" />
      <meta name="author" content="mapedia" />
      <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>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
	<meta name="description" content="Creating a Timeseries with GeoServer and OpenLayers" />
	<meta name="author" content="mapedia" />
	<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>