Project the whole track to the map, and show both versions

api/obs/api/process.py

@@ -151,7 +151,9 @@ async def process_track(session, track, data_source):
         )
 
         annotator = AnnotateMeasurements(
-            data_source, cache_dir=app.config.OBS_FACE_CACHE_DIR
+            data_source,
+            cache_dir=app.config.OBS_FACE_CACHE_DIR,
+            fully_annotate_unconfirmed=True,
         )
         input_data = await annotator.annotate(imported_data)
 
@@ -188,10 +190,19 @@ async def process_track(session, track, data_source):
             },
         }
 
+        track_raw_json = {
+            "type": "Feature",
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [[m["longitude_GPS"], m["latitude_GPS"]] for m in track_points],
+            },
+        }
+
         for output_filename, data in [
             ("measurements.json", measurements_json),
             ("overtakingEvents.json", overtaking_events_json),
             ("track.json", track_json),
+            ("trackRaw.json", track_raw_json),
         ]:
             target = join(output_dir, output_filename)
             log.debug("Writing file %s", target)

api/obs/api/routes/tracks.py

@@ -181,6 +181,7 @@ async def get_track_data(req, slug: str):
         "measurements": "measurements.json",
         "overtakingEvents": "overtakingEvents.json",
         "track": "track.json",
+        "trackRaw": "trackRaw.json",
     }
 
     result = {}

frontend/src/mapstyles/index.js

@@ -1,4 +1,5 @@
 import _ from 'lodash'
+import produce from 'immer'
 
 import bright from './bright.json'
 import positron from './positron.json'
@@ -70,4 +71,10 @@ export const trackLayer = {
   },
 }
 
+export const trackLayerRaw = produce(trackLayer, draft => {
+  draft.paint['line-color'] = '#81D4FA'
+  draft.paint['line-width'][4] = 1
+  draft.paint['line-width'][6] = 3
+})
+
 export const basemap = positron

frontend/src/pages/TrackPage/TrackMap.tsx

@@ -4,7 +4,7 @@ import {Source, Layer} from 'react-map-gl'
 import type {TrackData} from 'types'
 import {Map} from 'components'
 
-import {colorByDistance, trackLayer} from '../../mapstyles'
+import {colorByDistance, trackLayer, trackLayerRaw} from '../../mapstyles'
 
 export default function TrackMap({
   trackData,
@@ -25,14 +25,20 @@ export default function TrackMap({
   return (
     <div style={props.style}>
       <Map boundsFromJson={trackData.track}>
+        {showTrack && trackData.trackRaw != null && (
+          <Source key="trackRaw" id="trackRaw" type="geojson" data={trackData.trackRaw}>
+            <Layer id="trackRaw" {...trackLayerRaw} />
+          </Source>
+        )}
+
         {showTrack && (
-          <Source id="route" type="geojson" data={trackData.track}>
+          <Source key="track" id="track" type="geojson" data={trackData.track}>
-            <Layer id="route" {...trackLayer} />
+            <Layer id="track" {...trackLayer} />
           </Source>
         )}
 
         {pointsMode !== 'none' && (
-          <Source id="overtakingEvents" type="geojson" data={trackData[pointsMode]}>
+          <Source key="overtakingEvents" id="overtakingEvents" type="geojson" data={trackData[pointsMode]}>
             <Layer
               id="overtakingEvents"
               type="circle"

frontend/src/pages/TrackPage/index.tsx

@@ -10,6 +10,7 @@ import Markdown from 'react-markdown'
 import api from 'api'
 import {Page} from 'components'
 import type {Track, TrackData, TrackComment} from 'types'
+import {trackLayer, trackLayerRaw} from '../../mapstyles'
 
 import TrackActions from './TrackActions'
 import TrackComments from './TrackComments'
@@ -31,6 +32,14 @@ function TrackMapSettings({showTrack, setShowTrack, pointsMode, setPointsMode, s
       <List>
         <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}} />
+            GPS track
+          </div>
+          <div>
+            <span style={{background: trackLayer.paint['line-color'], height: 6, width: 24, display: 'inline-block', verticalAlign: 'middle', marginRight: 4}} />
+            Snapped to road
+          </div>
         </List.Item>
         <List.Item>
           <List.Header>Points</List.Header>