remove map color by toggle and hard-code color scheme to "difficulty"

src/app/store/modules/river-index.js

@@ -9,7 +9,6 @@ const initialState = {
   error: null,
   userLocation: null,
   mapStyle: 'topo',
-  mapColorBy: 'difficulty',
   fullscreen: null,
   mapBounds: null,
   mouseoveredFeature: null,
@@ -44,9 +43,6 @@ export default {
     ['MAP_STYLE'](state, payload) {
       Object.assign(state, { loading: false, mapStyle: payload })
     },
-    ['MAP_COLOR_BY'](state, payload) {
-      Object.assign(state, { loading: false, mapColorBy: payload })
-    },
     ['MAP_BOUNDS'](state, payload) {
       Object.assign(state, { loading: false, mapBounds: payload })
     },
@@ -81,9 +77,6 @@ export default {
     setMapStyle(context, data) {
       context.commit('MAP_STYLE', data)
     },
-    setMapColorBy(context, data) {
-      context.commit('MAP_COLOR_BY', data)
-    },
     setMapBounds(context, data) {
       context.commit('MAP_BOUNDS', data)
     },

src/app/views/river-index/components/index.js

@@ -3,7 +3,6 @@ export { default as NwiMapStyles } from './nwi-map-styles.js'
 export { default as NwiResultCounter } from './nwi-result-counter.vue'
 export { default as NwiFullscreenToggle } from './nwi-fullscreen-toggle.vue'
 export { default as NwiBasemapToggle } from './nwi-basemap-toggle.vue'
-export { default as NwiColorByToggle } from './nwi-color-by-toggle.vue'
 export { default as NwiMapControls } from './nwi-map-controls.vue'
 export { default as NwiMapSearch } from './nwi-map-search.vue'
 export { default as NwiRiversTable } from './nwi-rivers-table.vue'

src/app/views/river-index/components/nwi-map-controls.vue

@@ -4,10 +4,6 @@
       v-if="controlEnabled('baseMap')"
       :style="getControlOffset('baseMap')"
     />
-    <nwi-color-by-toggle
-      v-if="controlEnabled('colorBy')"
-      :style="getControlOffset('colorBy')"
-    />
     <nwi-fullscreen-toggle
       v-if="controlEnabled('fullscreen')"
       :fullscreen-target="fullscreenTarget"
@@ -20,13 +16,11 @@
 import {
   NwiFullscreenToggle,
   NwiBasemapToggle,
-  NwiColorByToggle
 } from '.'
 export default {
   name: 'nwi-map-controls',
   components: {
     NwiBasemapToggle,
-    NwiColorByToggle,
     NwiFullscreenToggle
   },
   props: {
@@ -36,7 +30,7 @@ export default {
     },
     mapControls: {
       type: Array,
-      default: () => ['baseMap', 'colorBy', 'fullscreen']
+      default: () => ['baseMap', 'fullscreen']
     }
   },
   methods: {
@@ -51,9 +45,6 @@ export default {
       if (this.controlEnabled('fullscreen')) {
         offsetString += ' + 50px'
       }
-      if (control === 'baseMap' && this.controlEnabled('colorBy')) {
-        offsetString += ' + 8rem + 10px'
-      }
       return `right: calc(${offsetString})`
     }
   }

src/app/views/river-index/components/nwi-map-legend.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="nwi-legend">
     <h5 class="bx--type-zeta">
-      {{ colorByTitle }}
+      Difficulty
     </h5>
     <div
       v-for="(color, label) in colorScheme"
@@ -19,25 +19,10 @@ import MapStyles from './nwi-map-styles'
 
 export default {
   name: 'nwi-map-legend',
-  props: {
-    colorBy: {
-      type: String,
-      required: true
-    }
-  },
   computed: {
     colorScheme () {
-      return MapStyles.colorSchemes[this.colorBy]
+      return MapStyles.colorSchemes["difficulty"]
     },
-    // this feels sort of silly but alternative is to write some kind of titlecase-ish
-    // method that is way more complex than this. If we add more color schemes it's something
-    // to consider.
-    colorByTitle () {
-      if (this.colorBy === 'currentFlow') {
-        return 'Current Flow'
-      }
-      return 'Difficulty'
-    }
   }
 }
 </script>

src/app/views/river-index/components/nwi-map-styles.js

@@ -358,12 +358,6 @@ export default {
       'III-III+': 'blue',
       'IV-IV+': 'black',
       'V-V+': 'red'
-    },
-    currentFlow: {
-      unknown: '#f5f5f5',
-      low: '#ff8684',
-      running: '#59e68d',
-      'too high': '#5dace1'
     }
   }
 }

src/app/views/river-index/components/nwi-map.vue

@@ -9,7 +9,7 @@
     />
     <nwi-map-legend
       v-if="includeLegend"
-      :color-by="colorBy"
+      color-by="difficulty"
     />
     <nwi-map-controls
       :map-controls="mapControls"
@@ -75,11 +75,6 @@ export default {
       type: Number,
       required: false
     },
-    // defines the color scheme for the reach-segments layer
-    initialColorBy: {
-      type: String,
-      default: 'difficulty'
-    },
     // if present, causes the map to zoom to the geometry of this feature
     featureToCenter: {
       type: Object,
@@ -109,7 +104,7 @@ export default {
     // passes list of desired toolbar controls into the NwiMapControls component
     mapControls: {
       type: Array,
-      default: () => ['baseMap', 'colorBy', 'fullscreen']
+      default: () => ['baseMap', 'fullscreen']
     }
   },
   data () {
@@ -122,7 +117,6 @@ export default {
     ...mapState({
       mapStyle: state => state.RiverIndex.mapStyle,
       mapBounds: state => state.RiverIndex.mapBounds,
-      colorBy: state => state.RiverIndex.mapColorBy,
       mouseoveredFeature: state => state.RiverIndex.mouseoveredFeature
     }),
     containerHeight () {
@@ -164,9 +158,6 @@ export default {
         }
       }
     },
-    colorBy (newVal) {
-      this.updateMapColorScheme(newVal)
-    },
     // centers the map on a given feature
     featureToCenter (feature) {
       if (feature) {
@@ -188,7 +179,7 @@ export default {
     detailReachId () {
       this.adjustMapForDetailReach()
       // this has to be re-called since we're changing paint props again
-      this.updateMapColorScheme(this.colorBy)
+      this.updateMapColorScheme()
     },
     startingBounds (newBounds) {
       this.map.fitBounds(newBounds, fitBoundsOptions)
@@ -217,37 +208,21 @@ export default {
     mouseoverFeature (feature) {
       this.$store.dispatch('RiverIndex/mouseOverFeature', feature)
     },
-    updateMapColorScheme (newScheme) {
-      const colors = Object.values(NwiMapStyles.colorSchemes[newScheme])
-      let colorScheme
-      if (newScheme === 'difficulty') {
-        colorScheme = [
-          'case',
-          ['>', ['get', 'difficulty'], 6],
-          colors[3],
-          ['>', ['get', 'difficulty'], 4],
-          colors[2],
-          ['>', ['get', 'difficulty'], 2],
-          colors[1],
-          ['<=', ['get', 'difficulty'], 2],
-          colors[0],
-          '#53789a'
-        ]
-      } else if (newScheme === 'currentFlow') {
-        colorScheme = [
-          'match',
-          ['get', 'condition'],
-          'low',
-          colors[1],
-          'med',
-          colors[2],
-          'high',
-          colors[3],
-          colors[0]
-        ]
-      } else {
-        colorScheme = '#53789a'
-      }
+    updateMapColorScheme () {
+      const colors = Object.values(NwiMapStyles.colorSchemes["difficulty"])
+      let colorScheme;
+      colorScheme = [
+        'case',
+        ['>', ['get', 'difficulty'], 6],
+        colors[3],
+        ['>', ['get', 'difficulty'], 4],
+        colors[2],
+        ['>', ['get', 'difficulty'], 2],
+        colors[1],
+        ['<=', ['get', 'difficulty'], 2],
+        colors[0],
+        '#53789a'
+      ]
       if (this.sourceLayers.includes('reach-segments')) {
         this.map.setPaintProperty('reachSegments', 'line-color', colorScheme)
         this.map.setPaintProperty('reachSegmentDashes', 'line-color', colorScheme)
@@ -314,7 +289,7 @@ export default {
           this.adjustMapForDetailReach()
         }
 
-        this.updateMapColorScheme(this.colorBy)
+        this.updateMapColorScheme()
 
         // the assumption when you set `sourceLayers` prop is that the last layer
         // displays on top. Unfortunately, when attaching mouse events, we want