Add year slider to map page

src/angular/planit/src/app/map/map.component.html

@@ -86,6 +86,17 @@
           </aol-layer-vectortile>
         </ng-container>
       </aol-map>
+      <div class="chart-options slider" *ngIf="showSlider">
+          <div class="chart-options-body">
+              <nouislider class="chart-options-group"
+                          [config]="sliderConfig"
+                          [ngModel]="selectedYear"
+                          [min]="sliderMin"
+                          [max]="sliderMax"
+                          (slide)="changeLayerYear($event)">
+              </nouislider>
+          </div>
+      </div>
     </div>
   </section>
 </main>

src/angular/planit/src/app/map/map.component.ts

@@ -35,6 +35,7 @@ import { CommunitySystem, Impact, LayerConfig, LayerType, Location, Organization
 
 
 const BORDER_COLOR = '#ccc';
+const PARSEINT_RADIX = 10; // eslint complains if parseInt is called without an explicit radix
 
 
 @Component({
@@ -60,6 +61,21 @@ export class MapComponent implements OnInit, AfterViewInit {
   public impact: Impact = null;
   public impacts: Impact[] = null;
 
+  public selectedYear = 0;
+  public sliderConfig: any = {
+    start: 0,
+    step: 1,
+    pips: {
+      mode: 'positions',
+      values: [0, 25, 50, 75, 100],
+      density: 4,
+      stepped: true
+    }
+  };
+
+  public sliderMin = 0;
+  public sliderMax = 100;
+  public showSlider = false;
   private mapStyles = [
     {
       featureType: 'poi',
@@ -71,6 +87,7 @@ export class MapComponent implements OnInit, AfterViewInit {
       ]
     }
   ];
+  private selectedYearIndex = 0;
 
   private counties: BehaviorSubject<Feature[]> = new BehaviorSubject(undefined);
 
@@ -82,7 +99,8 @@ export class MapComponent implements OnInit, AfterViewInit {
 
   ngOnInit() {
     this.getCounties();
-      this.setupMap();
+    this.setupMap();
+    this.selectedYearIndex = 0;
 
     this.userService.current().subscribe((user) => {
       this.organization = user.primary_organization;
@@ -113,6 +131,7 @@ export class MapComponent implements OnInit, AfterViewInit {
           const olmap = this.map.instance;
           // Double-check that the layer is still visible before loading data
           if (countyLayer.getLayerState().sourceState === 'ready') {
+            this.setupSlider(counties);
             vectorSource.addFeatures(counties);
             olmap.getView().fit(vectorSource.getExtent(), olmap.getSize());
           }
@@ -132,6 +151,31 @@ export class MapComponent implements OnInit, AfterViewInit {
     vectorTileSource.changed();
   }
 
+  changeLayerYear(newYear) {
+    this.selectedYearIndex = newYear - this.sliderMin;
+    // tell map to update the layer
+    const layer = this.countyLayer.first;
+    if (layer) {
+      layer.instance.getSource().changed();
+    }
+  }
+
+  setupSlider(features) {
+    if (!features || !features.length || typeof features[0] !== 'object') {
+      this.showSlider = false;
+      return;
+    }
+    const val = features[0].getProperties().indicators[this.layer.attribute];
+    const years = Object.keys(val);
+    const minYear = parseInt(years[0], PARSEINT_RADIX);
+    const maxYear = parseInt(years[years.length - 1], PARSEINT_RADIX);
+    this.sliderMin = minYear;
+    this.sliderMax = maxYear;
+    // Default to the last available year
+    this.selectedYear = this.sliderMax;
+    this.selectedYearIndex = this.sliderMax - this.sliderMin;
+    this.showSlider = true;
+  }
 
   fitToOrganization() {
     const olmap = this.map.instance;
@@ -150,6 +194,7 @@ export class MapComponent implements OnInit, AfterViewInit {
   }
 
   setLayer() {
+    this.showSlider = false;
     this.impact = this.impacts[this.layerIndex];
     if (this.impact) {
       this.layer = this.impact.map_layer;
@@ -176,7 +221,7 @@ export class MapComponent implements OnInit, AfterViewInit {
     // For Historical and projected layers, val will be an object with years
     // as keys and numbers as values
     if (typeof val === 'object') {
-      val = Object.values(val)[0];
+      val = Object.values(val)[this.selectedYearIndex];
     }
     return this.styleFeature(feature, val);
   }

src/angular/planit/src/app/map/map.module.ts

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 
 import { AgmCoreModule } from '@agm/core';
 import { AngularOpenlayersModule  } from 'ngx-openlayers';
+import { NouisliderModule } from 'ng2-nouislider';
 
 import { SharedModule } from '../shared/shared.module';
 import { MapRoutingModule } from './map-routing.module';
@@ -18,6 +19,7 @@ import { MapComponent } from './map.component';
     HttpClientModule,
     FormsModule,
     AngularOpenlayersModule,
+    NouisliderModule,
     SharedModule,
     MapRoutingModule
   ],

src/angular/planit/src/assets/sass/pages/_map.scss

@@ -47,6 +47,24 @@ app-map {
         width: 100%;
         display: block;
       }
+
+      .slider {
+        position: absolute;
+        bottom: 5rem;
+        left: 30%;
+        right: 30%;
+        background: $dark-grey-background;
+        padding: 10px 30px 40px 20px;
+        border-radius: 15px;
+        width: 40%;
+
+        .noUi-pips {
+          color: $white;
+        }
+        .noUi-marker, .noUi-marker-large {
+          background: $neutral-2;
+        }
+      }
     }
   }
 }