Better highlighting in case of multiple overlapping routes

src/components/MapRoute.vue

@@ -41,6 +41,18 @@ export default {
   mixins: [tracks],
   computed: {
     trackLayer () {
+      let lineColor = '#1cd60d'
+      let lineOpacity = 0.75
+      let lineWidth = 3
+      if (this.route.highlight === true) {
+        lineColor = '#4fe005'
+        lineOpacity = 0.85
+        lineWidth = 4.5
+      } else if (this.route.highlight === false) {
+        lineColor = '#86bc6b'
+        lineOpacity = 0.25
+      }
+
       return {
         type: 'line',
         layout: {
@@ -48,9 +60,9 @@ export default {
           'line-cap': 'round'
         },
         paint: {
-          'line-color': this.route.highlight ? '#4fe005' : '#1cd60d',
-          'line-width': this.route.highlight ? 4.5 : 3,
-          'line-opacity': this.route.highlight ? 0.85 : 0.75
+          'line-color': lineColor,
+          'line-width': lineWidth,
+          'line-opacity': lineOpacity
         }
       }
     },

src/views/Summit.vue

@@ -415,9 +415,21 @@ export default {
     },
     routeDetailsOpen (route) {
       this.$set(route, 'highlight', true)
+      this.routes.forEach(curRoute => {
+        if (curRoute.highlight !== true) {
+          this.$set(curRoute, 'highlight', false)
+        }
+      })
     },
     routeDetailsClose (route) {
       this.$set(route, 'highlight', false)
+
+      // If all route highlights are false, set them all to null
+      if (this.routes.every(curRoute => curRoute.highlight === false)) {
+        this.routes.forEach(curRoute => {
+          this.$set(curRoute, 'highlight', null)
+        })
+      }
     },
     mapReposition (coordinates) {
       if (coordinates) {