Make raw track not look like a river (fixes #252)

This commit is contained in:
Paul Bienkowski 2022-06-26 13:02:01 +02:00
parent 8bc83a5f18
commit 4907f038da
2 changed files with 7 additions and 4 deletions

View file

@ -73,13 +73,16 @@ export const trackLayer = {
paint: { paint: {
'line-width': ['interpolate', ['linear'], ['zoom'], 14, 2, 17, 5], 'line-width': ['interpolate', ['linear'], ['zoom'], 14, 2, 17, 5],
'line-color': '#F06292', 'line-color': '#F06292',
'line-opacity': 0.6,
}, },
} }
export const trackLayerRaw = produce(trackLayer, draft => { 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'][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 export const basemap = positron

View file

@ -33,11 +33,11 @@ function TrackMapSettings({showTrack, setShowTrack, pointsMode, setPointsMode, s
<List.Item> <List.Item>
<Checkbox checked={showTrack} onChange={(e, d) => setShowTrack(d.checked)} /> Show track <Checkbox checked={showTrack} onChange={(e, d) => setShowTrack(d.checked)} /> Show track
<div style={{marginTop: 8}}> <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 GPS track
</div> </div>
<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 Snapped to road
</div> </div>
</List.Item> </List.Item>