Add info modal for speed colored polylines

This commit is contained in:
Eugene Burmakin 2025-01-13 21:57:19 +01:00
parent a1adc9875a
commit cebc4950e6
2 changed files with 31 additions and 2 deletions

View file

@ -69,8 +69,8 @@ const colorStops = [
{ speed: 0, color: '#00ff00' }, // Stationary/very slow (green) { speed: 0, color: '#00ff00' }, // Stationary/very slow (green)
{ speed: 15, color: '#00ffff' }, // Walking/jogging (cyan) { speed: 15, color: '#00ffff' }, // Walking/jogging (cyan)
{ speed: 30, color: '#ff00ff' }, // Cycling/slow driving (magenta) { speed: 30, color: '#ff00ff' }, // Cycling/slow driving (magenta)
{ speed: 50, color: '#ff3300' }, // Urban driving (orange-red) { speed: 50, color: '#ffff00' }, // Urban driving (yellow)
{ speed: 100, color: '#ffff00' } // Highway driving (yellow) { speed: 100, color: '#ff3300' } // Highway driving (red)
].map(stop => ({ ].map(stop => ({
...stop, ...stop,
rgb: hexToRGB(stop.color) rgb: hexToRGB(stop.color)

View file

@ -112,3 +112,32 @@
</div> </div>
<label class="modal-backdrop" for="points_rendering_mode_info">Close</label> <label class="modal-backdrop" for="points_rendering_mode_info">Close</label>
</div> </div>
<input type="checkbox" id="speed_colored_polylines_info" class="modal-toggle" />
<div class="modal focus:z-99" role="dialog">
<div class="modal-box">
<h3 class="text-lg font-bold">Speed-colored routes</h3>
<p class="py-4">
This checkbox will color the routes based on the speed of each segment.
</p>
<p class="py-4">
Uncheck this checkbox if you want to disable the speed-colored routes.
</p>
<p class="py-4">
Speed coloring is based on the following color stops:
<code>
0 km/h — green, stationary or walking
<br>
15 km/h — cyan, jogging
<br>
30 km/h — magenta, cycling
<br>
50 km/h — yellow, urban driving
<br>
100 km/h — orange-red, highway driving
</code>
</p>
</div>
<label class="modal-backdrop" for="speed_colored_polylines_info">Close</label>
</div>