- Minor tweaks to new altitude slider

* File formatting * Added cursor and title text hover
CMU-CREATE-Lab · Oct 2, 2019 · e8e53f4 · e8e53f4
1 parent f5013e9
commit e8e53f4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 48 deletions.
diff --git a/examples/webgl-timemachine/altitude-slider.css b/examples/webgl-timemachine/altitude-slider.css
@@ -6,12 +6,16 @@
   bottom: 300px;
   z-index: 99;
   display: none;
+  cursor: pointer;
 }
 
 #altitude-slider > div {
-    margin-left:-50px;
-	font-size: 18px;
-    position: relative;
-	color: white;
+  margin-left:-50px;
+  font-size: 18px;
+  position: relative;
+  color: white;
 }
 
+#altitude-slider .ui-slider-handle {
+  cursor: pointer;
+}
diff --git a/examples/webgl-timemachine/altitudeSlider.js b/examples/webgl-timemachine/altitudeSlider.js
@@ -1,64 +1,67 @@
 "use strict";
 var AltitudeSlider = function AltitudeSlider() {
-	this.initialValue = 260;
-	this.handle =  null;
-	this.altitudeLayer = null;
-	
-	//on document load
-	var that = this;
-	$(function() {
-		that.sliderObject = $( "#altitude-slider" );
-		that.altitudeDisplay = $("#altitude-slider > div");
-		
-		var updateSliderValue = function (event, logVal) {
-			that.handle = that.handle || $(".ui-slider-handle", that.sliderObject);
-			that.altitudeDisplay.text((parseInt(logVal) || that.initialValue) + "m")
-				.css(that.handle.position());
-		};
+  this.initialValue = 260;
+  this.handle = null;
+  this.altitudeLayer = null;
+
+  //on document load
+  var that = this;
+  $(function() {
+    that.sliderObject = $("#altitude-slider");
+    that.altitudeDisplay = $("#altitude-slider > div");
+
+    var updateSliderValue = function(event, logVal) {
+      that.handle = that.handle || $(".ui-slider-handle", that.sliderObject);
+      that.altitudeDisplay.text((parseInt(logVal) || that.initialValue) + "m")
+        .css(that.handle.position());
+    };
 
-		that.sliderObject.slider({
-			orientation: "vertical",
-			value: that.initialValue,
-			min: 33,
-			max: 114,
-			step: 1,
-			animate: "fast",
-			create: updateSliderValue,
-			slide: function( event, ui ) {
-				var dataLayer = activeEarthTimeLayers[activeEarthTimeLayers.length-1]; //TODO: debug this line with use of this.altitudeLayer
-				var logVal = Math.round(Math.pow(1.05,ui.value));
-				csvFileLayers.updateLayerData(dataLayer, {options: {"maxElevation" : logVal}}, false, false)
-				updateSliderValue(event,logVal);
-			}
-		});
-	});
+    that.sliderObject.slider({
+      orientation: "vertical",
+      value: that.initialValue,
+      min: 33,
+      max: 114,
+      step: 1,
+      animate: "fast",
+      create: updateSliderValue,
+      slide: function(event, ui) {
+        var dataLayer = activeEarthTimeLayers[activeEarthTimeLayers.length - 1]; //TODO: debug this line with use of this.altitudeLayer
+        var logVal = Math.round(Math.pow(1.05, ui.value));
+        csvFileLayers.updateLayerData(dataLayer, {
+          options: {
+            "maxElevation": logVal
+          }
+        }, false, false)
+        updateSliderValue(event, logVal);
+      }
+    }).attr("title", "Drag to change the max elevation being drawn");
+  });
 };
 
 // Update altitude layer stored in AltitudeSlider object
-AltitudeSlider.prototype.checkAltitudeLayer = function checkAltitudeLayer(layerList){
+AltitudeSlider.prototype.checkAltitudeLayer = function checkAltitudeLayer(layerList) {
   layerList = layerList || activeEarthTimeLayers;
   this.altitudeLayer = null;
-  for (var i=0; i< layerList.length; i++){
+  for (var i = 0; i < layerList.length; i++) {
     var layer = getLayer(layerList[i]);
-    if(layer && layer.setDataOptions && layer.setDataOptions.hasAltitude){
+    if (layer && layer.setDataOptions && layer.setDataOptions.hasAltitude) {
       this.altitudeLayer = layer;
-	  break;
+      break;
     }
   }
 }
 
 // Handle slider from page load or new layer added/removed (from data library)
-AltitudeSlider.prototype.handleAltitudeLayers = function handleAltitudeLayers(fromShareLink,layers){
+AltitudeSlider.prototype.handleAltitudeLayers = function handleAltitudeLayers(fromShareLink, layers) {
   this.checkAltitudeLayer(); //uses activeEarthTimeLayers if layers undefined
   updateAltitudeSlider(this); // hide/show calendar
 
 
-  function updateAltitudeSlider(that){
-    if (that.altitudeLayer == null){ //hide button if no altitude layers
+  function updateAltitudeSlider(that) {
+    if (that.altitudeLayer == null) { //hide button if no altitude layers
       $("#altitude-slider").hide();
-    }
-    else{ 
+    } else {
       $("#altitude-slider").show();
     }
   }
-}
+}
diff --git a/examples/webgl-timemachine/index.html b/examples/webgl-timemachine/index.html
@@ -4337,7 +4337,7 @@
         }
 
         dateRangePicker.handleCalendarLayers(false);
-		altitudeSlider.handleAltitudeLayers();
+        altitudeSlider.handleAltitudeLayers();
 
         var $layerContainer = $(e.target).parents("table");
         var $layerContainerHeader = $layerContainer.prev();
@@ -4826,7 +4826,7 @@
     var csvFileLayers = new CsvFileLayer();
     var csvDataGrapher = new CsvDataGrapher();
     var dateRangePicker = new DateRangePicker();
-	var altitudeSlider = new AltitudeSlider();
+    var altitudeSlider = new AltitudeSlider();
     var dotmapLayers = [];
     var dotmapLayerByName = {};
     var dotlayersLoadedPath;
@@ -7416,7 +7416,7 @@
           var layers = vals.l.split(",");
           if (loadedInitialCsvLayers){
             dateRangePicker.handleCalendarLayers(true, layers);
-			altitudeSlider.handleAltitudeLayers();
+            altitudeSlider.handleAltitudeLayers();
           }
           handleLayers(layers);
           // The time in a share link may correspond to a layer that has a different timeline than the default one.