# MapRoute

Render a route from host-supplied coordinates.

## Public import

```svelte
<script lang="ts">
  import { MapRoute } from "rom-ui/maps";
  import "rom-studio/styles";
</script>
```

## Composition and responsibility

The host supplies data, callbacks and application policy. The component does not provide persistence or authorization.

Public names: `MapRoute`.

## Declared props

This declaration comes from the installed package. Imported types retain their upstream meaning.

```ts
interface Props {
    /** Optional unique identifier for the route layer */
    id?: string;
    /** Array of [longitude, latitude] coordinate pairs defining the route */
    coordinates: [number, number][];
    /** Line color as CSS color value (default: "#4285F4") */
    color?: string;
    /** Line width in pixels (default: 3) */
    width?: number;
    /** Line opacity from 0 to 1 (default: 0.8) */
    opacity?: number;
    /** Dash pattern [dash length, gap length] for dashed lines */
    dashArray?: [number, number];
    /** Fraction traveled, from 0 to 1. Drives RouteProgress and RouteMarker. */
    progress?: number;
    /** Raise this route above siblings and apply the active styles. */
    active?: boolean;
    activeColor?: string;
    activeWidth?: number;
    activeOpacity?: number;
    activeDashArray?: [number, number];
    /** Insert the route and its child layers below this MapLibre layer. */
    beforeId?: string;
    children?: Snippet;
    /** Callback when the route line is clicked */
    onclick?: () => void;
    /** Callback when mouse enters the route line */
    onmouseenter?: () => void;
    /** Callback when mouse leaves the route line */
    onmouseleave?: () => void;
    /** Whether the route is interactive - shows pointer cursor on hover (default: true) */
    interactive?: boolean;
  }
```

## Source and version

ROM UI **0.1.0-alpha.7**. [Component source](https://github.com/pmikstacki/rom-ui/blob/v0.1.0-alpha.7/src/lib/maps/MapRoute.svelte).

Install the optional `maplibre-gl` peer and its styles. Provider contracts and attribution remain host responsibilities.

See [the composition guide](/docs/studio-compositions/) for host integration boundaries.