Route Creator Tool

Visual editor for creating route data with video synchronization

Overview

Create routes with video synchronization from just a map image and video file. The Route Creator provides a visual interface for clicking points on your map and syncing them with video timestamps.

What You Can Do

  • Upload a map image and video file
  • Click on the map to create route points with video timings
  • Export route data as JSON for use with map-routing

Try it Now!

Launch the Route Creator tool in your browser

Open Route Creator →

Basic Workflow

1. Upload Files

Start by uploading your map image and video file:

2. Create Points

Click on the map to add route points. The Route Creator supports three click modes:

Regular Click - Add to end

Simply click anywhere on the map to add a point at the end of your route.

Shift+Click - Insert between points

Select a point first, then hold Shift and click on the map. The new point will be inserted immediately after the selected point.

Use case: You've placed all your points but realize you missed one in the middle.

Ctrl+Click - Reposition point

Select a point first, then hold Ctrl (or Cmd on Mac) and click on the map. The selected point moves to the clicked location.

Use case: Fine-tune point positions without deleting and recreating them.

3. Sync with Video

Once you have points on the map, sync them with your video:

  1. Press Space to play the video
  2. Pause at a key moment where you want a point
  3. Select the corresponding point in the Point Editor
  4. Click "Set Current" next to "Timestamp (marked)"
  5. Repeat for all points

Tip: It's usually faster to place all points first, then go back and add timestamps, rather than alternating between placement and timing.

4. Configure Point Properties

Each point can have additional properties:

Timestamps

Data Attributes

5. Export Your Route

When you're done, click "Export JSON" to download your route data. You can also click "Import JSON" to load a previously saved route.

Keyboard Shortcuts

Key Action
Space Play/pause video
Delete Delete selected point
Ctrl+Z (or Cmd+Z) Undo last point addition or relocation

Tips & Tricks

Workflow: Placement First, Timing Later

The most efficient workflow is:

  1. Click to place all route points on the map
  2. Play through the video once, pausing at key moments
  3. Select each point and click "Set Current" for its timestamp
  4. Use Previous/Next buttons to navigate between points

This is much faster than alternating between placement and timing.

Use Shift+Click for Missed Points

Realized you missed a point between two existing ones? No problem:

  1. Select the point before where you want to insert
  2. Hold Shift and click on the map
  3. The new point is inserted in the right place

No need to delete and recreate later points!

Fine-Tune with Ctrl+Click

Point not quite in the right spot?

  1. Select the point you want to move
  2. Hold Ctrl (or Cmd) and click the new location
  3. The point moves without affecting your other points

Much faster than deleting and recreating!

Undo History

Made a mistake? Press Ctrl+Z (or Cmd+Z) to undo:

  • Point additions (regular click and Shift+Click)
  • Point relocations (Ctrl+Click)

You can undo multiple times through your entire click history!

Using Data Attributes

Hidden points: Use data: hidden for points that guide the route but shouldn't be visible. Perfect for smooth curves or paths that need intermediate control points.

Jump lines: Use data: jump for teleports, fast travel, or non-linear movement. Creates a dashed line to indicate the path is discontinuous.

Export Format

The Route Creator exports JSON in this format:

[
  {
    "x": 0.234,
    "y": 0.567,
    "marked": 5.2
  },
  {
    "x": 0.456,
    "y": 0.789,
    "start": 10.5,
    "end": 15.3,
    "data": "hidden"
  },
  {
    "x": 0.678,
    "y": 0.345,
    "marked": 20.0,
    "data": "jump"
  }
]

Using Your Route Data

Once you've exported your JSON file, use it with the map-routing package:

import { ImageRoute } from 'map-routing';
import routeData from './route-data.json';

function MyMap() {
  return (
    <ImageRoute points={routeData}>
      <img src="your-map.png" alt="Map" />
    </ImageRoute>
  );
}

See the API Reference for more details on using routes in your application.

Troubleshooting

Video Not Playing

If your video won't play:

  • Check video format compatibility (MP4 with H.264 codec recommended)
  • Some codecs may not work in all browsers
  • Try converting to a more compatible format using tools like HandBrake or FFmpeg

Shift+Click or Ctrl+Click Not Working

These modifier clicks require a point to be selected first:

  • Click a point in the Points list to select it
  • Make sure you're holding the modifier key while clicking
  • The selected point will have an orange circle indicator on the map

Export Button Disabled

The export button is disabled when there are no points. Add at least one point by clicking on the map.

Undo Not Working

The undo history only tracks:

  • Point additions (regular click and Shift+Click)
  • Point relocations (Ctrl+Click)

It does NOT track:

  • Point deletions
  • Manual edits to timestamps or data attributes

Technical Details

Point Properties Reference

Property Type Required Description
x number ✅ Horizontal position (0-1 normalized)
y number ✅ Vertical position (0-1 normalized)
marked number ❌ Timestamp when point should be reached (seconds)
start number ❌ Optional custom start time (seconds)
end number ❌ Optional custom end time (seconds)
data string ❌ Special attributes: "hidden" or "jump"

Browser Compatibility

Dependencies