gpx.studio/website/src/lib/docs/cs/toolbar/routing.mdx

---
title: Route planning and editing
---

<script>
    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } 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.
You can minimize the dialog to save space by clicking on <button><SquareArrowUpLeft size="16" class="inline-block" style="margin-bottom: 2px" /></button>.

<div class="flex flex-row justify-center">
    <Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
</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.
This setting can also be toggled by pressing <kbd>F5</kbd>.

### <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 point.

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.
On touch devices, you can tap on the segment to insert a new anchor point.

<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 you 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.