MapPath

A route line drawn across a parent Map — the 'here's how you drive in' overlay. Renders editor chrome only; the parent Map draws the line on the live site. Use for businesses that are hard to find (set back from the street, behind another building, shared lot).

Required Props: id, path

Structure

Child of Map, alongside MapPoint. Pair a MapPath (the route) with a MapPoint (the destination pin) so the map shows both the way in and the endpoint. All styling goes in props.className as a single Tailwind utility string.

Properties

Property	Type	Description	Examples
`path`	string	The route, as `lat,lng` pairs in travel order, one per line (semicolons and pipes also work). Two or more points are required or nothing draws.	`34.16124,-118.30049 34.16143,-118.30046 34.16158,-118.30041`
`color`	string	Stroke colour. Prefer a theme token so the route matches the palette. Default: `"var(--color-primary)"`	`var(--color-primary)var(--color-accent)`
`weight`	number	Stroke thickness in px Default: `4`	-
`opacity`	number	Stroke opacity, 0-1 Default: `1`	-
`dashed`	boolean	Draw as a dashed line. Dashes read as 'a route to follow' rather than a boundary. Default: `true`	-
`label`	string	Short caption drawn on the map, centred halfway along the route. Rendered with a halo so it stays readable over tiles. Keep it to a few words. Default: `""`	`Enter hereDrive to the backAround the corner`
`title`	string	Accessible name for the route. Not drawn on the map — use `label` for visible text. Default: `""`	-
`canDelete`	boolean	- Default: `true`	-
`canEditName`	boolean	- Default: `true`	-
`custom`	object	-	-
`className`	string	Tailwind utility classes string. Mobile-first: unprefixed = base, md: = 768px+, sm: = 640px+, lg: = 1024px+. Includes layout, spacing, surface design, and typography.	-
`role`	string	-	-
`aria-label`	string	-	-
`aria-hidden`	string	-	-
`aria-describedby`	string	-	-
`aria-live`	string polite \| assertive \| off	-	-
`root`	object	-	-

Examples

Drive-in route

{
  "path": "34.16124,-118.30049\n34.16143,-118.30046\n34.16158,-118.30041",
  "label": "Enter here",
  "title": "Route in from S. Victory Blvd",
  "dashed": true
}