From 57fd4952d10b55cdd3f70b5f8d83effe7473102b Mon Sep 17 00:00:00 2001 From: Guillaume RYCKELYNCK Date: Fri, 10 Jun 2016 17:24:08 +0200 Subject: [PATCH 1/2] add timeviewer capability --- css/timeviewer.css | 34 ++++++++++++++++++++++++ index.html | 11 ++++++++ js/sviewer.js | 66 ++++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 106 insertions(+), 5 deletions(-) create mode 100644 css/timeviewer.css diff --git a/css/timeviewer.css b/css/timeviewer.css new file mode 100644 index 0000000..25cfe89 --- /dev/null +++ b/css/timeviewer.css @@ -0,0 +1,34 @@ +/* TimeBox CSS */ +#timeBox { + display: none; + position: absolute; + bottom: 33px; + width: 100%; +} +#timeSliderBox { + //position: absolute; + //right: 4px; + //bottom: 30px; + float: right; + width: 88%; +} +#timeSliderBox input#timeSlider { + display: none; +} +#timeSliderBox .ui-slider-track { + margin-left: -18px; + width: 99%; +} +/* +#timeSliderBox a.ui-slider-handle { + width: 100px; +} +*/ +#timeInputBox { + margin-left: 4px; + float: left; + width: 10%; +} +#timeInput { + text-align: center; +} \ No newline at end of file diff --git a/index.html b/index.html index 90a2e47..06f3de2 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,8 @@ + + @@ -151,6 +153,15 @@

Map

+ +
+
+ +
+
+ +
+
diff --git a/js/sviewer.js b/js/sviewer.js index 52c81a9..66c570f 100644 --- a/js/sviewer.js +++ b/js/sviewer.js @@ -146,7 +146,7 @@ var SViewer = function() { mdLayer = this; } }); - + if (mdLayer) { html.push('
'); legendArgs = { @@ -202,6 +202,19 @@ var SViewer = function() { html.push('
'); $('#legend').append(html.join('')); + + // timeViewer : get dates if timeLayer param exist + if (mdLayer.hasOwnProperty('Dimension') && mdLayer.Dimension) { + $.each(mdLayer.Dimension, function(id, dimension) { + console.log(dimension.values); + if (dimension.name == 'time') { + timeLayerDates = dimension.values.split(',').map(function(val, index) { + return val.substr(0,10); + }); + showTimeBox(); + } + }); + } } }, failure: function() { @@ -1290,6 +1303,12 @@ ol.extent.getTopRight(extent).reverse().join(" "), config.searchparams = {}; $("#addressForm label").text('Features or ' + $("#addressForm label").text()); } + + // querystring param: add timeLayer for timeViewer + if (qs.timeLayer) { + console.log(qs.timeLayer) + config.layersQueryable.push(new LayerQueryable(qs.timeLayer)); + } } @@ -1361,7 +1380,6 @@ ol.extent.getTopRight(extent).reverse().join(" "), view.setRotation(0); } - // marker overlay for geoloc and queries marker = new ol.Overlay({ element: $('#marker')[0], @@ -1434,14 +1452,52 @@ ol.extent.getTopRight(extent).reverse().join(" "), ); } } - + + /** + * show timeViewer + */ + // helper function to get date from index in timeLayerDates array + function formatTimeLayerDate(date) { + d = date.split('-'); + return d[2] +'/'+d[1]+'/'+d[0] + } + // Bind timeSlider and timeInput + function showTimeBox() { + var timeLayerSource = map.getLayers().item(map.getLayers().getArray().length-1).getSource(); + var minValue = 0; + var maxValue = timeLayerDates.length-1; + var initValue = maxValue; + $('#timeInput').html(formatTimeLayerDate(timeLayerDates[initValue])); + $("#timeSlider").attr("min", minValue); + $("#timeSlider").attr("max", maxValue); + $("#timeSlider").attr("value", initValue); + $("#timeSlider").slider("refresh"); + $("#timeSlider").on('change', function() { + var index = $('#timeSlider').val(); + console.log(index, timeLayerDates); + $('#timeInput').val(formatTimeLayerDate(timeLayerDates[index])); + timeLayerSource.updateParams({'TIME': timeLayerDates[index]}); + }); + $('#timeBox').show(); + + $(document).on('submit', '#timeInputBox', function (e) { + e.preventDefault(); + var inputDate = $('#timeInput').html().split('/'); + console.log($('#timeInput').val()); + isoDate = inputDate[2]+'-'+inputDate[1]+'-'+inputDate[0]; + timeLayerSource.updateParams({'TIME': isoDate}); + $("#timeSlider").val(timeLayerDates.indexOf(isoDate)); + console.log(timeLayerDates); + console.log(isoDate); + $("#timeSlider").slider("refresh"); + return false; + }); + } // ------ Main ------------------------------------------------------------------------------------------ init(); - }; - $(document).ready(SViewer); \ No newline at end of file From d9b109643e8b2dbdb308e4c1fb4d318891312832 Mon Sep 17 00:00:00 2001 From: Guillaume RYCKELYNCK Date: Mon, 27 Jun 2016 14:56:23 +0200 Subject: [PATCH 2/2] Add timeviewer capability --- js/sviewer.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/js/sviewer.js b/js/sviewer.js index 66c570f..8c21954 100644 --- a/js/sviewer.js +++ b/js/sviewer.js @@ -206,7 +206,6 @@ var SViewer = function() { // timeViewer : get dates if timeLayer param exist if (mdLayer.hasOwnProperty('Dimension') && mdLayer.Dimension) { $.each(mdLayer.Dimension, function(id, dimension) { - console.log(dimension.values); if (dimension.name == 'time') { timeLayerDates = dimension.values.split(',').map(function(val, index) { return val.substr(0,10); @@ -1306,7 +1305,6 @@ ol.extent.getTopRight(extent).reverse().join(" "), // querystring param: add timeLayer for timeViewer if (qs.timeLayer) { - console.log(qs.timeLayer) config.layersQueryable.push(new LayerQueryable(qs.timeLayer)); } } @@ -1474,7 +1472,6 @@ ol.extent.getTopRight(extent).reverse().join(" "), $("#timeSlider").slider("refresh"); $("#timeSlider").on('change', function() { var index = $('#timeSlider').val(); - console.log(index, timeLayerDates); $('#timeInput').val(formatTimeLayerDate(timeLayerDates[index])); timeLayerSource.updateParams({'TIME': timeLayerDates[index]}); }); @@ -1483,12 +1480,9 @@ ol.extent.getTopRight(extent).reverse().join(" "), $(document).on('submit', '#timeInputBox', function (e) { e.preventDefault(); var inputDate = $('#timeInput').html().split('/'); - console.log($('#timeInput').val()); isoDate = inputDate[2]+'-'+inputDate[1]+'-'+inputDate[0]; timeLayerSource.updateParams({'TIME': isoDate}); $("#timeSlider").val(timeLayerDates.indexOf(isoDate)); - console.log(timeLayerDates); - console.log(isoDate); $("#timeSlider").slider("refresh"); return false; });