Skip to content

Commit c01f43e

Browse files
dobrovolskydobrovolsky
committed
rewrite part of route highlight
1 parent c4a7f59 commit c01f43e

File tree

2 files changed

+93
-120
lines changed

2 files changed

+93
-120
lines changed

‎website/src/lib/components/ElevationProfile.svelte‎

Lines changed: 0 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -247,10 +247,6 @@
247247
};
248248
});
249249
250-
const HIGHLIGHT_SOURCE_ID = 'elevation-selection';
251-
const HIGHLIGHT_LAYER_CASING_ID = 'elevation-selection-casing';
252-
const HIGHLIGHT_LAYER_ID = 'elevation-selection';
253-
254250
onMount(async () => {
255251
Chart.register((await import('chartjs-plugin-zoom')).default); // dynamic import to avoid SSR and 'window is not defined' error
256252
@@ -543,122 +539,6 @@
543539
}
544540
545541
$: $slicedGPXStatistics, $mode, updateOverlay();
546-
$: $slicedGPXStatistics, $gpxStatistics, $mode, $map, updateMapHighlight();
547-
548-
function ensureHighlightLayers() {
549-
if (!$map) return;
550-
const map = $map as mapboxgl.Map;
551-
if (!map.getSource(HIGHLIGHT_SOURCE_ID)) {
552-
map.addSource(HIGHLIGHT_SOURCE_ID, {
553-
type: 'geojson',
554-
data: {
555-
type: 'Feature',
556-
geometry: { type: 'LineString', coordinates: [] },
557-
properties: {},
558-
},
559-
});
560-
}
561-
if (!map.getLayer(HIGHLIGHT_LAYER_CASING_ID)) {
562-
map.addLayer({
563-
id: HIGHLIGHT_LAYER_CASING_ID,
564-
type: 'line',
565-
source: HIGHLIGHT_SOURCE_ID,
566-
layout: { 'line-join': 'round', 'line-cap': 'round' },
567-
paint: {
568-
'line-color': $mode === 'dark' ? '#ffffff' : '#000000',
569-
'line-width': 10,
570-
'line-opacity': 0.9,
571-
'line-blur': 0.2,
572-
},
573-
});
574-
}
575-
if (!map.getLayer(HIGHLIGHT_LAYER_ID)) {
576-
map.addLayer({
577-
id: HIGHLIGHT_LAYER_ID,
578-
type: 'line',
579-
source: HIGHLIGHT_SOURCE_ID,
580-
layout: { 'line-join': 'round', 'line-cap': 'round' },
581-
paint: {
582-
'line-color': '#ffeb3b', // bright yellow
583-
'line-width': 6,
584-
'line-opacity': 1,
585-
},
586-
});
587-
}
588-
try {
589-
map.moveLayer(HIGHLIGHT_LAYER_CASING_ID);
590-
map.moveLayer(HIGHLIGHT_LAYER_ID);
591-
} catch (e) {
592-
// ignore if already on top or not movable yet
593-
}
594-
}
595-
596-
function updateMapHighlight() {
597-
if (!$map) return;
598-
const map = $map as mapboxgl.Map;
599-
if ($slicedGPXStatistics === undefined) {
600-
if (map.getLayer(HIGHLIGHT_LAYER_ID)) map.removeLayer(HIGHLIGHT_LAYER_ID);
601-
if (map.getLayer(HIGHLIGHT_LAYER_CASING_ID)) map.removeLayer(HIGHLIGHT_LAYER_CASING_ID);
602-
if (map.getSource(HIGHLIGHT_SOURCE_ID)) map.removeSource(HIGHLIGHT_SOURCE_ID);
603-
return;
604-
}
605-
if (!$gpxStatistics?.local?.points?.length) return;
606-
607-
let startIndex = Math.min($slicedGPXStatistics[1], $slicedGPXStatistics[2]);
608-
let endIndex = Math.max($slicedGPXStatistics[1], $slicedGPXStatistics[2]);
609-
610-
startIndex = Math.max(0, Math.min(startIndex, $gpxStatistics.local.points.length - 1));
611-
endIndex = Math.max(0, Math.min(endIndex, $gpxStatistics.local.points.length - 1));
612-
if (endIndex <= startIndex) return;
613-
614-
const coords: [number, number][] = [];
615-
for (let i = startIndex; i <= endIndex; i++) {
616-
const c = $gpxStatistics.local.points[i].getCoordinates();
617-
coords.push([c.lon, c.lat]);
618-
}
619-
620-
ensureHighlightLayers();
621-
const src = $map.getSource(HIGHLIGHT_SOURCE_ID) as mapboxgl.GeoJSONSource;
622-
if (src) {
623-
src.setData({
624-
type: 'Feature',
625-
geometry: { type: 'LineString', coordinates: coords },
626-
properties: {},
627-
} as GeoJSON.Feature);
628-
}
629-
if ($map.getLayer(HIGHLIGHT_LAYER_CASING_ID)) {
630-
$map.setPaintProperty(
631-
HIGHLIGHT_LAYER_CASING_ID,
632-
'line-color',
633-
$mode === 'dark' ? '#ffffff' : '#000000'
634-
);
635-
}
636-
try {
637-
$map.moveLayer(HIGHLIGHT_LAYER_CASING_ID);
638-
$map.moveLayer(HIGHLIGHT_LAYER_ID);
639-
} catch (e) {}
640-
}
641-
642-
let styledataHooked = false;
643-
$: if ($map && !styledataHooked) {
644-
updateMapHighlight();
645-
const handler = () => {
646-
if ($slicedGPXStatistics) updateMapHighlight();
647-
};
648-
$map.on('styledata', handler);
649-
styledataHooked = true;
650-
onDestroy(() => {
651-
if ($map) {
652-
try {
653-
$map.off('styledata', handler);
654-
} catch (e) {}
655-
if ($map.getLayer(HIGHLIGHT_LAYER_ID)) $map.removeLayer(HIGHLIGHT_LAYER_ID);
656-
if ($map.getLayer(HIGHLIGHT_LAYER_CASING_ID))
657-
$map.removeLayer(HIGHLIGHT_LAYER_CASING_ID);
658-
if ($map.getSource(HIGHLIGHT_SOURCE_ID)) $map.removeSource(HIGHLIGHT_SOURCE_ID);
659-
}
660-
});
661-
}
662542
663543
onDestroy(() => {
664544
if (chart) {

‎website/src/lib/components/gpx-layer/StartEndMarkers.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { gpxStatistics, slicedGPXStatistics, currentTool, Tool } from '$lib/stor
22
import mapboxgl from 'mapbox-gl';
33
import { get } from 'svelte/store';
44

5+
const HIGHLIGHT_SOURCE_ID = 'elevation-selection';
6+
const HIGHLIGHT_LAYER_CASING_ID = 'elevation-selection-casing';
7+
const HIGHLIGHT_LAYER_ID = 'elevation-selection';
8+
59
export class StartEndMarkers {
610
map: mapboxgl.Map;
711
start: mapboxgl.Marker;
@@ -27,6 +31,91 @@ export class StartEndMarkers {
2731
this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
2832
}
2933

34+
private ensureHighlightLayers() {
35+
if (!this.map.getSource(HIGHLIGHT_SOURCE_ID)) {
36+
this.map.addSource(HIGHLIGHT_SOURCE_ID, {
37+
type: 'geojson',
38+
data: {
39+
type: 'Feature',
40+
geometry: { type: 'LineString', coordinates: [] },
41+
properties: {},
42+
},
43+
});
44+
}
45+
if (!this.map.getLayer(HIGHLIGHT_LAYER_CASING_ID)) {
46+
this.map.addLayer({
47+
id: HIGHLIGHT_LAYER_CASING_ID,
48+
type: 'line',
49+
source: HIGHLIGHT_SOURCE_ID,
50+
layout: { 'line-join': 'round', 'line-cap': 'round' },
51+
paint: {
52+
'line-color': '#000000',
53+
'line-width': 10,
54+
'line-opacity': 0.9,
55+
'line-blur': 0.2,
56+
},
57+
});
58+
}
59+
if (!this.map.getLayer(HIGHLIGHT_LAYER_ID)) {
60+
this.map.addLayer({
61+
id: HIGHLIGHT_LAYER_ID,
62+
type: 'line',
63+
source: HIGHLIGHT_SOURCE_ID,
64+
layout: { 'line-join': 'round', 'line-cap': 'round' },
65+
paint: {
66+
'line-color': '#ffeb3b',
67+
'line-width': 6,
68+
'line-opacity': 1,
69+
},
70+
});
71+
}
72+
try {
73+
this.map.moveLayer(HIGHLIGHT_LAYER_CASING_ID);
74+
this.map.moveLayer(HIGHLIGHT_LAYER_ID);
75+
} catch (e) {
76+
// ignore if already on top or not movable yet
77+
}
78+
}
79+
80+
private removeHighlight() {
81+
if (this.map.getLayer(HIGHLIGHT_LAYER_ID)) this.map.removeLayer(HIGHLIGHT_LAYER_ID);
82+
if (this.map.getLayer(HIGHLIGHT_LAYER_CASING_ID)) this.map.removeLayer(HIGHLIGHT_LAYER_CASING_ID);
83+
if (this.map.getSource(HIGHLIGHT_SOURCE_ID)) this.map.removeSource(HIGHLIGHT_SOURCE_ID);
84+
}
85+
86+
87+
private updateMapHighlight() {
88+
let statistics = get(slicedGPXStatistics)?.[0]
89+
if (!statistics) {
90+
this.removeHighlight();
91+
return;
92+
}
93+
const coords: [number, number][] = [];
94+
for (const c of statistics.local.points) {
95+
coords.push([c.getCoordinates().lon, c.getCoordinates().lat]);
96+
}
97+
this.ensureHighlightLayers();
98+
const src = this.map.getSource(HIGHLIGHT_SOURCE_ID) as mapboxgl.GeoJSONSource;
99+
if (src) {
100+
src.setData({
101+
type: 'Feature',
102+
geometry: { type: 'LineString', coordinates: coords },
103+
properties: {},
104+
});
105+
}
106+
if (this.map.getLayer(HIGHLIGHT_LAYER_CASING_ID)) {
107+
this.map.setPaintProperty(
108+
HIGHLIGHT_LAYER_CASING_ID,
109+
'line-color',
110+
'#000000'
111+
);
112+
}
113+
try {
114+
this.map.moveLayer(HIGHLIGHT_LAYER_CASING_ID);
115+
this.map.moveLayer(HIGHLIGHT_LAYER_ID);
116+
} catch (e) {}
117+
}
118+
30119
update() {
31120
let tool = get(currentTool);
32121
let statistics = get(slicedGPXStatistics)?.[0] ?? get(gpxStatistics);
@@ -37,9 +126,11 @@ export class StartEndMarkers {
37126
statistics.local.points[statistics.local.points.length - 1].getCoordinates()
38127
)
39128
.addTo(this.map);
129+
this.updateMapHighlight();
40130
} else {
41131
this.start.remove();
42132
this.end.remove();
133+
this.removeHighlight();
43134
}
44135
}
45136

@@ -48,5 +139,7 @@ export class StartEndMarkers {
48139

49140
this.start.remove();
50141
this.end.remove();
142+
143+
this.removeHighlight();
51144
}
52145
}

0 commit comments

Comments
 (0)