From 4907f038dab1c909370f15c7eb3066563d2f73e6 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Sun, 26 Jun 2022 13:02:01 +0200
Subject: [PATCH] Make raw track not look like a river (fixes #252)

---
 frontend/src/mapstyles/index.js        | 7 +++++--
 frontend/src/pages/TrackPage/index.tsx | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/mapstyles/index.js b/frontend/src/mapstyles/index.js
index 56a8449..c3a62fb 100644
--- a/frontend/src/mapstyles/index.js
+++ b/frontend/src/mapstyles/index.js
@@ -73,13 +73,16 @@ export const trackLayer = {
   paint: {
     'line-width': ['interpolate', ['linear'], ['zoom'], 14, 2, 17, 5],
     'line-color': '#F06292',
+    'line-opacity': 0.6,
   },
 }
 
 export const trackLayerRaw = produce(trackLayer, draft => {
-  draft.paint['line-color'] = '#81D4FA'
+  // draft.paint['line-color'] = '#81D4FA'
   draft.paint['line-width'][4] = 1
-  draft.paint['line-width'][6] = 3
+  draft.paint['line-width'][6] = 2
+  draft.paint['line-dasharray'] = [3, 3]
+  delete draft.paint['line-opacity']
 })
 
 export const basemap = positron
diff --git a/frontend/src/pages/TrackPage/index.tsx b/frontend/src/pages/TrackPage/index.tsx
index 32c25aa..5004b8e 100644
--- a/frontend/src/pages/TrackPage/index.tsx
+++ b/frontend/src/pages/TrackPage/index.tsx
@@ -33,11 +33,11 @@ function TrackMapSettings({showTrack, setShowTrack, pointsMode, setPointsMode, s
         <List.Item>
           <Checkbox checked={showTrack} onChange={(e, d) => setShowTrack(d.checked)} /> Show track
           <div style={{marginTop: 8}}>
-            <span style={{background: trackLayerRaw.paint['line-color'], height: 6, width: 24, display: 'inline-block', verticalAlign: 'middle', marginRight: 4}} />
+            <span style={{borderTop: '3px dashed ' + trackLayerRaw.paint['line-color'], height: 0, width: 24, display: 'inline-block', verticalAlign: 'middle', marginRight: 4}} />
             GPS track
           </div>
           <div>
-            <span style={{background: trackLayer.paint['line-color'], height: 6, width: 24, display: 'inline-block', verticalAlign: 'middle', marginRight: 4}} />
+            <span style={{borderTop: '6px solid ' + trackLayerRaw.paint['line-color'], height: 6, width: 24, display: 'inline-block', verticalAlign: 'middle', marginRight: 4}} />
             Snapped to road
           </div>
         </List.Item>