--- a/client/src/components/map/Map.vue	Mon Sep 30 12:38:56 2019 +0200
+++ b/client/src/components/map/Map.vue	Mon Sep 30 12:58:23 2019 +0200
@@ -131,31 +131,94 @@
       }
     },
     selectedStretchId(id) {
-      this.layers
-        .get("STRETCHES")
+      let stretch = this.layers.get("STRETCHES");
+      stretch
+        .getSource()
+        .getFeatures()
+        .forEach(f => {
+          f.set("highlighted", false);
+          f.setStyle(null);
+          if (id === f.getId()) {
+            f.set("highlighted", true);
+            let highlight = new Style({
+              fill: new Fill({
+                color: this.colorLuminance(
+                  stretch
+                    .getStyle()
+                    .getFill()
+                    .getColor(),
+                  0.3
+                )
+              }),
+              stroke: new Stroke({
+                color: this.colorLuminance(
+                  stretch
+                    .getStyle()
+                    .getStroke()
+                    .getColor(),
+                  0.3
+                ),
+                width: 3
+              })
+            });
+            f.setStyle(highlight);
+          }
+        });
+    },
+    selectedSectionId(id) {
+      let section = this.layers.get("SECTIONS");
+      section
         .getSource()
         .getFeatures()
         .forEach(f => {
           f.set("highlighted", false);
           if (id === f.getId()) {
             f.set("highlighted", true);
-          }
-        });
-    },
-    selectedSectionId(id) {
-      this.layers
-        .get("SECTIONS")
-        .getSource()
-        .getFeatures()
-        .forEach(f => {
-          f.set("highlighted", false);
-          if (id === f.getId()) {
-            f.set("highlighted", true);
+            let highlight = new Style({
+              fill: new Fill({
+                color: this.colorLuminance(
+                  section
+                    .getStyle()
+                    .getFill()
+                    .getColor(),
+                  0.3
+                )
+              }),
+              stroke: new Stroke({
+                color: this.colorLuminance(
+                  section
+                    .getStyle()
+                    .getStroke()
+                    .getColor(),
+                  0.3
+                ),
+                width: 4
+              })
+            });
+            f.setStyle(highlight);
           }
         });
     }
   },
   methods: {
+    colorLuminance(hex, lum) {
+      hex = String(hex).replace(/[^0-9a-f]/gi, "");
+      if (hex.length < 6) {
+        hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
+      }
+      lum = lum || 0;
+      let opacity = hex.substr(6, 2);
+      var rgb = "#",
+        c,
+        i;
+      for (i = 0; i < 3; i++) {
+        c = parseInt(hex.substr(i * 2, 2), 16);
+        c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16);
+        rgb += ("00" + c).substr(c.length);
+      }
+
+      return rgb + opacity;
+    },
     updateBottleneckFilter(bottleneck_id, datestr) {
       if (!bottleneck_id) return;
       const exists = bottleneck_id != "does_not_exist";