import DocsNote from '$lib/components/docs/DocsNote.svelte';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
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>.
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>.
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.
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.
### <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.