a

src/app/pages/tecnalia-module/bike-trajectory/bike-trajectory.component.ts

@@ -51,7 +51,7 @@ export class BikeTrajectoryComponent implements OnInit {
   public day:string = '2020-10-10';
   public oday:string = '1999-09-09';
   //public maxval:number = 359;
-  public static qs:any = [-1, -1, -1, -1, 1, 11, 24, 359];
+  public static qs:any = [1, 2, 3, 4, 5, 6, 7, 8];
   public legend: any;
   public static clrs:any  = ['#F2D7D5', '#E6B0AA', '#D98880', '#CD6155', '#A93226', '#922B21', '#641E16'];
   public static clrs3:any = ['#fef5f0', '#fbd7c4', '#f6a585', '#f37048', '#e23218', '#b40b02', '#630000'];
@@ -211,13 +211,17 @@ export class BikeTrajectoryComponent implements OnInit {
   }
 
   tooltipChange() {
+    console.log("tooltipChange::: this.toggleLbs="+this.toggleLbls);
     this.toggleLbls = !this.toggleLbls;
     this.change();
   }
 
   change() {
+    console.log("change::: this.city="+this.city);
+    console.log("change::: this.toggleLbs="+this.toggleLbls);
     if ( this.toggleLbls ){
-      if ( this.city === "1" ){ this.get_vels0(); }
+    if ( this.city === "1" ){ }
+      this.get_vels0();
     }else{
       this.get_day0();
     }
@@ -259,7 +263,7 @@ export class BikeTrajectoryComponent implements OnInit {
     if (pilotName === "BILBAO" || pilotName === "URBANITE") { 
       this.city = "0"; 
       document.getElementById('controls').style.display='none';
-      document.getElementById('vel_tab').style.display="block";
+      document.getElementById('vel_tab').style.display="none";
       document.getElementById('day_tab').style.display="block";
       document.getElementById('info').style.display="none";      
     }
@@ -283,6 +287,7 @@ export class BikeTrajectoryComponent implements OnInit {
       this.lon = BikeTrajectoryComponent.BIO_LON;
       this.MIN_DATE = new Date('2019-04-11').getTime() / 1000;
       this.MAX_DATE = new Date('2021-02-20').getTime() / 1000;
+      //document.getElementById('define_sims').style.display='none';
       //document.getElementById('day_label').style.display = 'none';
       //document.getElementById('day_select').style.display = 'none';      
     }
@@ -292,6 +297,7 @@ export class BikeTrajectoryComponent implements OnInit {
       this.zoom = 13;
       this.MIN_DATE = new Date('2022-06-15').getTime() / 1000;
       this.MAX_DATE = new Date('2022-06-15').getTime() / 1000;   
+      document.getElementById('define_sims').style.display='block';   
       document.getElementById('daySlider').style.display = 'none';
 
     }
@@ -464,7 +470,8 @@ export class BikeTrajectoryComponent implements OnInit {
     let vals = data['vals'];
     document.getElementById("num_points").innerHTML = Object.keys(vals).length+"";
     //let arrs = data['arrs'];
-    BikeTrajectoryComponent.qs[BikeTrajectoryComponent.qs.length-1] = data['maxval'];
+    //BikeTrajectoryComponent.qs[0]                                   = data['minval'];
+    //BikeTrajectoryComponent.qs[BikeTrajectoryComponent.qs.length-1] = data['maxval'];
     let output_error = true;
     this.values = {};
     for(let j=0;j<data['quantiles'].length;j++){
@@ -549,7 +556,7 @@ export class BikeTrajectoryComponent implements OnInit {
     this.create_legend(clr_idx);
     //console.log("process_result::: len(markers)=" + Object.keys(this.markers).length + ' updated');
   }
-
+/*
   create_legend(clr_idx: number) {
     this.legend = new (L.Control.extend({options: { position: 'bottomright' }}));
     this.legend.onAdd = function (map: object) {
@@ -560,12 +567,14 @@ export class BikeTrajectoryComponent implements OnInit {
       let labels = [];
       if ( clr_idx == 0 ){
         let minVal = 5.0;
-        let vv = minVal.toFixed(1) + ' - ' + BikeTrajectoryComponent.qs[0].toFixed(1);
+        //let vv = minVal.toFixed(1) + ' - ' + BikeTrajectoryComponent.qs[0].toFixed(1);
+        let vv = BikeTrajectoryComponent.qs[0].toFixed(1) + ' - ' + BikeTrajectoryComponent.qs[1].toFixed(1);
         div.innerHTML +=
           labels.push('<div style="width:25px;height:14px;padding-left:10px;white-space:nowrap;"><div style="width:25px;height:23px;background:' + 'white' + '"></div><label style="position:absolute;left:45px;top:' + 5 + 'px">' + vv + '</label></div>');
       }else{
         let minVal = 0.0;
-        let vv = minVal.toFixed(1) + ' - ' + BikeTrajectoryComponent.qs[0].toFixed(1);
+        //let vv = minVal.toFixed(1) + ' - ' + BikeTrajectoryComponent.qs[0].toFixed(1);
+        let vv = BikeTrajectoryComponent.qs[0].toFixed(1) + ' - ' + BikeTrajectoryComponent.qs[1].toFixed(1);
         div.innerHTML +=
           labels.push('<div style="width:25px;height:14px;padding-left:10px;white-space:nowrap;"><div style="width:25px;height:23px;background:' + 'white'  + '"></div><label style="position:absolute;left:45px;top:' + 5 + 'px">' + vv + '</label></div>');
       }
@@ -597,7 +606,39 @@ export class BikeTrajectoryComponent implements OnInit {
       return div;
     };
     this.legend.addTo(this.map);
+  }*/
+
+  create_legend(clr_idx: number) {
+    this.legend = new (L.Control.extend({options: { position: 'bottomright' }}));
+    this.legend.onAdd = function (map: object) {
+      var div = L.DomUtil.create('div', 'info legend');
+      div.style.background = '#C0C0C0DD';
+      div.style.width = '150px';
+      div.style.height = '260px';
+      let labels = [];
+      let i = 0;
+      let vv =  ' < ' + BikeTrajectoryComponent.qs[0].toFixed(1); 
+      div.innerHTML +=
+      labels.push('<div style="width:25px;height:14px;padding-left:10px;white-space:nowrap;"><div style="width:25px;height:23px;background:white"></div><label style="position:absolute;left:45px;top:' + (5 + 32 * (i)) + 'px">' + vv + '</label></div>');      
+      for (i = 0; i < BikeTrajectoryComponent.qs.length-1; i++) {
+        let vv = BikeTrajectoryComponent.qs[i].toFixed(1) + ' - ' + BikeTrajectoryComponent.qs[i + 1].toFixed(1); 
+        if ( clr_idx == 0 ){
+          div.innerHTML +=
+            labels.push('<div style="width:25px;height:14px;padding-left:10px;white-space:nowrap;"><div style="width:25px;height:23px;background:' + BikeTrajectoryComponent.clrs[i] + '"></div><label style="position:absolute;left:45px;top:' + (5 + 32 * (i+1)) + 'px">' + vv + '</label></div>');
+        }else{
+          div.innerHTML +=
+            labels.push('<div style="width:25px;height:14px;padding-left:10px;white-space:nowrap;"><div style="width:25px;height:23px;background:' + BikeTrajectoryComponent.clrs2[i] + '"></div><label style="position:absolute;left:45px;top:' + (5 + 32 * (i+1)) + 'px">' + vv + '</label></div>');
         }
+      }
+
+
+      div.innerHTML = labels.join('<br>');
+      return div;
+    };
+    this.legend.addTo(this.map);
+  }
+
+
 
   create_legend2() {
     this.legend = new (L.Control.extend({options: { position: 'bottomright' }}));
@@ -637,6 +678,7 @@ export class BikeTrajectoryComponent implements OnInit {
     };
     this.legend.addTo(this.map);
   }
+  
   slider_change() {
     console.log(Date.now()+": slider_change in routine:::");
     this.day = this.fromValtoDay(this.sliderValue);