descripcion reportes

parent 5ae7dc20
...@@ -121,7 +121,8 @@ ...@@ -121,7 +121,8 @@
<!-- Main content --> <!-- Main content -->
<div id="timeLine" class="container floating-panel slidecontainer" style="position:absolute; display:block; bottom: 40px; left: 12%; width: 500px; z-index: 1000"> <div id="timeLine" class="container floating-panel slidecontainer" style="position:absolute; display:block; bottom: 40px; left: 12%; width: 500px; z-index: 1000">
<div class="range-control" id="rangecontrol"> <div class="range-control" id="rangecontrol">
<span id="tooltiptext">{{ labels|first|slice:"6:8" }}/{{ labels|first|slice:"4:6" }}/{{ labels|first|slice:"0:4" }}</span> <div id="rangecontrol2"></div>
<input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;"> <input class="cross-range" id="inputRange" type="range" min="0" max="{{ labels|length|add:'-1' }}" step="1" value="0" data-thumbwidth="20" style="background: transparent;">
...@@ -308,6 +309,13 @@ ...@@ -308,6 +309,13 @@
let fecha = $("option:eq(" + controlVal + ")").text(); let fecha = $("option:eq(" + controlVal + ")").text();
let valor = $("option:eq(" + controlVal + ")").val(); let valor = $("option:eq(" + controlVal + ")").val();
var slider3 = $("#inputRange")[0];
var sliderPos = slider3.value / slider3.max;
var pixelPostion = slider3.clientWidth * sliderPos;
//this is your pixel value
console.log(pixelPostion);
addImageLayer({ addImageLayer({
layerDate: valor layerDate: valor
}); });
...@@ -316,12 +324,18 @@ ...@@ -316,12 +324,18 @@
$("#maptitle").append("Map Date: " + fecha); $("#maptitle").append("Map Date: " + fecha);
$("#tooltiptext").empty(); $("#tooltiptext").empty();
$("#tooltiptext").append(fecha); $("#tooltiptext").append(fecha);
}); console.log(position);
$("#rangecontrol2").empty();
$("#rangecontrol2").append('<span class="arrow_box" id="tooltiptext">'+fecha+'</span>');
$('.arrow_box').css({'left':Math.round(pixelPostion-35) + 'px'})
});
/*
var slider2 = document.getElementById("inputRange"); var slider2 = document.getElementById("inputRange");
var sliderOffsetX = slider2.getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left; var sliderOffsetX = slider2.getBoundingClientRect().left ;//- document.documentElement.getBoundingClientRect().left;
var sliderOffsetY = slider2.getBoundingClientRect().top - document.documentElement.getBoundingClientRect().top; var sliderOffsetY = slider2.getBoundingClientRect().top ;//- document.documentElement.getBoundingClientRect().top;
var sliderWidth = slider2.offsetWidth - 1; var sliderWidth = slider2.offsetWidth ;
slider2.addEventListener('mousemove', function (event) { slider2.addEventListener('mousemove', function (event) {
var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX; var currentMouseXPos = (event.clientX + window.pageXOffset) - sliderOffsetX;
...@@ -330,10 +344,10 @@ ...@@ -330,10 +344,10 @@
var fecha = $("option:eq(" + value + ")").text(); var fecha = $("option:eq(" + value + ")").text();
var valor = $("option:eq(" + value + ")").val(); var valor = $("option:eq(" + value + ")").val();
$("#tooltiptext").empty(); //$("#tooltiptext").empty();
$("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'}); //$("#tooltiptext").css({"margin-left": currentMouseXPos + 'px', "margin-top": sliderOffsetY + 'px'});
$("#tooltiptext").append(fecha); //$("#tooltiptext").append(fecha);
}); });*/
</script> </script>
<!-- page script --> <!-- page script -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment