Loading a map

Click Load Map in the sidebar. You can load:

• Images — PNG, JPEG, WebP, or any other format the browser supports.
• PDFs — The first page of the PDF is rendered at high resolution (3× scale) automatically.

Once loaded, the map fills the workspace and is fitted to the available screen width. Use the scroll wheel or the + / − buttons to zoom in, and drag the map to pan.

Choosing a workflow

Two analysis workflows are available, selectable near the top of the sidebar:

• Course — Place controls in sequence to define a full orienteering course, then analyse legs one by one.
• Independent Legs — Define individual legs separately, without building a full course. Useful when you only want to study one or two key route choices.

Start with Course mode for a typical analysis session.

Distance values shown in the app are computed from three settings: Map Scale, DPI, and Drawing Scale. Getting these right is essential for accurate metre measurements.

Setting the map scale

In the Settings section of the sidebar, choose your map's scale from the dropdown. Common scales are provided (1:4 000, 1:5 000, 1:7 500, 1:10 000, 1:15 000). If you select a scale that matches your map, distances will be correct once the DPI is also correct.

Setting DPI manually

If you know the DPI of your map image (for example, if you exported it at a specific resolution), type the value directly into the DPI field in Settings. A typical scanned or exported orienteering map might be 150–300 DPI.

Calibrating DPI from the map

If you do not know the DPI, use the built-in calibration tool:

1. Enter Calibrate mode using the mode selector in the sidebar.
2. Find two points on the map whose real-world distance you know — for example, a scale bar, or the straight-line distance between two controls from your results.
3. Click the first point on the map, then click the second point.
4. A dialog appears asking for the known distance in metres. Enter the value and click Confirm.

The app calculates and sets the DPI automatically. Switch back to Controls or Variants mode when done.

Tip: For best accuracy, choose two points that are as far apart as possible on the map to reduce the effect of small pixel-placement errors.

Drawing Scale

Drawing Scale is a visual zoom multiplier that affects how thick lines and how large control circles appear on screen. It does not affect distance calculations — it is purely cosmetic. Increase it if you're working with a very large map image and the controls look too small.

The Course workflow is the primary way to analyse a complete orienteering course. Controls are placed in sequential order to define all legs automatically, and each leg can then have multiple route variants drawn and compared.

Placing controls

Select Controls mode in the sidebar and click on the map:

The last control placed is treated as the Finish (F).

Adjusting controls

• Alt + drag a control to move it without leaving Controls mode.
• Shift + click anywhere on the map to remove the most recently placed control.

Drawing routechoices for a leg

Switch to Routechoice mode. The drawing panel appears in the sidebar with the active leg shown.

1. Use the ← / → buttons to select the leg you want to work on.
2. Click on the map to add route points. The first point automatically starts at the leg's start control.
3. Continue clicking to add as many intermediate points as needed.
4. Right-click anywhere on the map (or press Save in the sidebar) to finish the routechoice and save it.

The routechoice is rendered as a coloured path with a letter label (A, B, C …). The sidebar shows the straight-line distance of the leg alongside the measured length of the drawn route.

Editing a routechoice

Click the Edit (pencil) icon next to a saved variant in the analysis panel. The variant's points become draggable — hold Alt and drag any point to reposition it. Save again when done.

Deleting a routechoice

Click the Delete (trash) icon next to a routechoice in the analysis panel.

Moving a routechoice label

Hold Alt and drag the letter label on the map to offset it from its default position.

Selecting the chosen route

In the leg analysis panel, click the checkmark next to a routechoice to mark it as your chosen/preferred route. The chosen routechoice is highlighted in the export. Click the checkmark again to deselect it.

Adding leg notes

Each leg has a Notes button (speech bubble icon) in the analysis panel. Click it to open a text editor where you can add observations about the leg — visible in exports.

Auto-Rotate

Enable the Auto-Rotate toggle in the drawing panel to make the map automatically rotate and zoom to focus on the currently selected leg each time you change legs. This keeps the leg roughly horizontal in the viewport for easier drawing.

Navigating between legs

Use the ← / → arrows in the drawing panel to step through legs, or click directly on a leg entry in the analysis list.

Independent Legs mode lets you define point-to-point legs directly — without sequencing them into a full course. This is useful when you only want to study one or two key route choices, or when comparing legs from different races on the same map.

Switching to Independent Legs mode

Open the Workflow selector near the top of the sidebar and choose Independent Legs. The map workspace and sidebar panels update to reflect the new workflow.

Creating a leg

1. Make sure the mode selector is set to Controls.
2. Click once on the map to place the start of the leg. A pending start marker appears.
3. Click a second time to place the end of the leg. The leg is created and added to the legs list in the sidebar.

To cancel a pending start before placing the end, hold Shift and click anywhere on the map.

You can create as many independent legs as you like. Each leg is assigned a sequential ID and label.

Adjusting legs

• Alt + drag the start or end endpoint of a leg to move it. All variants attached to that leg update their endpoints automatically.

Drawing routechoices for an independent leg

1. Select the leg in the sidebar list that you want to analyse.
2. Switch the mode to Routechoices.
3. Click on the map to add points. The first point automatically starts at the leg's start control.
4. Right-click (or click Save in the sidebar) to finish the routechoice. The end point of the leg is automatically added as the final point.

Adding, editing, deleting routechoices and selecting a chosen route work the same way as in Course Workflow.

Managing legs

• Click a leg in the sidebar list to select it and view its routechoices.
• Click the Delete icon beside a leg to remove it and all its routechoices.
• Use the Reset button at the bottom of the sidebar to clear all independent legs and routechoices.

Analysis panel

Each independent leg shows:

• The straight-line distance between its start and end controls.
• A list of routechoices with their drawn distances and colour labels.
• The chosen routechoice, if one has been selected.
• Any notes added to the leg.

Saving and loading project data

Your analysis is stored in the browser only while the tab is open. To persist your work, save it to a JSON file and reload it later.

Save Data

Click Save Data in the Project Files section of the sidebar. A file called course_planning_data.json is downloaded. This file contains:

• Map scale, DPI, and drawing scale settings.
• All control positions.
• All variant paths, labels, colours, and chosen flags.
• Leg notes.
• Event name.
• All independent legs and their variants (if any).

Load Data

Click Load Data and select a previously saved .json file. All controls, variants, and settings are restored. You will still need to Load Map separately, as the map image is not embedded in the JSON file.

Note: Load your map image first, then load the data file so that controls and variants render in the correct positions.

HTML export

The Export HTML button (available in both Course and Independent Legs mode via the export buttons in the sidebar) generates a self-contained HTML file that can be opened in any browser without the app being running.

The exported page includes:

• The map image embedded as a data URL.
• Each leg rendered individually with its route variants overlaid.
• Distance measurements for every variant.
• The chosen variant highlighted.
• Leg notes, if any were added.
• The event name as the page title.

Share this file directly with teammates or coaches — no server required.

PDF export

The Export PDF button generates a multi-page printable PDF. Each leg is rendered on its own page (or tile) with the route variants and distances shown. The PDF is suitable for printing on A4 or letter-size paper.

PDF rendering happens client-side using html2canvas and jsPDF, so it may take a few seconds for larger courses.

Event name

The event name entered in the Event field at the top of the sidebar appears as the title in both HTML and PDF exports. Setting a descriptive name (e.g. WOC 2024 Sprint Q Analysis) makes shared files easier to identify.

Map interactions

Dragging with Alt

Hold Alt before pressing the mouse button to enter drag mode instead of placing a point.

Release the mouse button to confirm the new position.

Viewport controls

Sidebar controls