USE CASE

Route planning that follows actual roads.

The route tool snaps to road networks via a routing API you pick. The output is a plain LineString you can send to any downstream system.

The problem

Drawing a route on a map, as a user, means clicking waypoints and getting a path that follows roads — not a straight line between them. Most map-drawing libraries ship a "line" tool that draws straight-line LineStrings and call the problem solved. That's not a route; that's an as-the-crow-flies path.

How Element Editor fits

The route tool (C) takes your clicks as waypoints and calls a routing API to snap the path to the road network. The API is configurable — OpenRouteService (an API key in config.network.routing), your own OSRM or ORS server, or the public OSRM demo (car-only, not for production). The output is a standard LineString with a _drawType: 'route' foreign member so you know it came from the router (and the clicked waypoints in properties._waypoints).

Click waypoints, get a road-snapped path. Typed properties per route.

What matters most for this use case

  • Route drawing tool — C key, road-snapped via your chosen routing provider.
  • Schema-backed properties — attach driver, scheduled time, cargo class, or any domain-specific fields.
  • Measure tool — preview a route's distance before committing to it.
  • Vertex editing — fix a route by hand. Editing its points turns it into a plain line; it isn't re-routed.

A minimal setup

import { ElementEditor } from '@element-editor/react'
import type { Schema } from '@element-editor/react'
import '@element-editor/react/style.css'

const routeSchema: Schema = {
  id: 'route',
  name: 'Route',
  fields: [
    { key: 'route_name', label: 'Route', type: 'text', required: true },
    { key: 'driver', label: 'Driver', type: 'text', required: false },
    { key: 'scheduled_at', label: 'Scheduled', type: 'date', required: false },
    { key: 'cargo_class', label: 'Cargo', type: 'select', required: false,
      options: ['general', 'refrigerated', 'hazardous', 'oversized'] },
  ],
}

export default function RoutePlanner() {
  return (
    <div style={{ height: 600 }}>
      <ElementEditor
        schema={routeSchema}
        tools={['route', 'line']}
        config={{ network: { routing: { apiKey: process.env.NEXT_PUBLIC_ORS_KEY } } }}
        onChange={(data) => saveRoutes(data)}
      />
    </div>
  )
}

line is kept in the tool list as an escape hatch for users who want a straight path (e.g., for flight planning). route is the road-snapped tool.

Note

The route tool is best for operational routing — delivery routes, field-team assignments, custom-traced paths. For turn-by-turn navigation with live traffic, you need a dedicated routing engine and driver app.

Ready to try it?

Open in playground →

Drawing tools

Measure tool