brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Segments: color track green→red along direction of travel

Browse Source
This commit is contained in:
Davide Scaini
2026-05-17 09:32:31 +02:00
parent 9521a64da4
commit 6bc77486f1
2 changed files with 8 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/SegmentsView.svelte
+3 -8
View File
@@ -25,8 +25,7 @@
let fetchTimer: ReturnType<typeof setTimeout> | null = null;
const TILE_STYLE = 'https://tiles.openfreemap.org/styles/positron';
const SEG_COLOR = '#f59e0b';
const SEG_SEL = '#3b82f6';
const SEG_GRADIENT = ['interpolate', ['linear'], ['line-progress'], 0, '#22c55e', 1, '#ef4444'];
$: selectedSeg = segments.find(s => s.id === selectedId) ?? null;
@@ -44,6 +43,7 @@
map.on('load', () => {
map.addSource('segments', {
type: 'geojson',
lineMetrics: true,
data: { type: 'FeatureCollection', features: [] },
});
@@ -54,7 +54,7 @@
map.addLayer({ id: 'seg-line', type: 'line', source: 'segments',
layout: { 'line-cap': 'round', 'line-join': 'round' },
paint: {
'line-color': ['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR],
'line-gradient': SEG_GRADIENT,
'line-width': ['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3],
},
});
@@ -123,18 +123,13 @@
properties: { id: s.id, name: s.name },
})),
});
// Repaint selection colour
if (map.getLayer('seg-line')) {
map.setPaintProperty('seg-line', 'line-color',
['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR]);
map.setPaintProperty('seg-line', 'line-width',
['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3]);
}
}
$: if (map?.getLayer('seg-line') && selectedId !== undefined) {
map.setPaintProperty('seg-line', 'line-color',
['case', ['==', ['get', 'id'], selectedId ?? ''], SEG_SEL, SEG_COLOR]);
map.setPaintProperty('seg-line', 'line-width',
['case', ['==', ['get', 'id'], selectedId ?? ''], 5, 3]);
}