add routing docs

website/src/lib/docs/en/toolbar/routing.mdx

@@ -2,4 +2,77 @@
 title: Route planning and editing
 ---
 
-# { title }
+<script>
+    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay } from 'lucide-svelte';
+    import DocsNote from '$lib/components/docs/DocsNote.svelte';
+    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
+    import routingScreenshot from '$lib/assets/img/docs/tools/routing.png?enhanced';
+    import DocsImage from '$lib/components/docs/DocsImage.svelte';
+</script>
+
+# <Pencil size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
+
+The route planning and editing tool allows you to create and edit routes by placing or moving anchor points on the map.
+
+## Settings
+
+As shown below, the tool dialog contains a few settings to control the routing behavior.
+
+<div class="flex flex-row justify-center">
+    <Routing minimizable={false} class="text-foreground p-3 border rounded-md" />
+</div>
+
+### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
+
+When routing is enabled, anchor points placed or moved on the map will be connected by a route calculated on the <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> road network.
+Disable routing to connect anchor points with straight lines.
+
+### <Bike size="16" class="inline-block" style="margin-bottom: 2px" /> Activity
+
+Select the activity type to tailor the routes for.
+
+### <TriangleAlert size="16" class="inline-block" style="margin-bottom: 2px" /> Allow private roads
+
+When enabled, the routing engine will consider private roads when computing routes.
+
+<DocsNote type="warning">
+    Only use this option if you have local knowledge of the area and have permission to use the roads in question.
+</DocsNote>
+
+## Plotting and editing routes
+
+Creating a route or extending an existing one is as simple as clicking on the map to place a new anchor point.
+
+You can also drag an existing anchor point to reroute the segment connecting it with the previous and next anchor points.
+
+Furthermore, new anchor points can be inserted between existing ones by hovering over the segment connecting them and dragging the anchor point that appears to the desired location.
+
+<DocsNote>
+    When editing imported GPX files, an initial set of anchor points is created automatically.
+    To ease the editing process, the more the map is zoomed in, the more anchor points are displayed.
+    This allows the route to be edited at different levels of detail.
+</DocsNote>
+
+Finally, you can delete anchor points by clicking on them and selecting <button><Trash2 size="16" class="inline-block" style="margin-bottom: 4px" /> Delete</button> from the context menu.
+
+<DocsImage src={routingScreenshot} alt="Anchor points allow to easily edit a route." />
+
+## Additional tools
+
+The following tools automate some common route modification operations.
+
+### <ArrowRightLeft size="16" class="inline-block" style="margin-bottom: 2px" /> Reverse
+
+Reverse the direction of the route.
+
+### <Home size="16" class="inline-block" style="margin-bottom: 2px" /> Back to start
+
+Connect the last point of the route with the starting point, using the chosen routing settings.
+
+### <Repeat size="16" class="inline-block" style="margin-bottom: 2px" /> Round trip
+
+Return to the starting point by the same route.
+
+### <CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Change the start of the loop
+
+When the end point of the route is close enough to the start, you can change the start of the loop by clicking on any anchor point and selecting <button><CirclePlay size="16" class="inline-block" style="margin-bottom: 2px" /> Start loop here</button> from the context menu.