Line

Draws a projected path between coordinates. Because it goes through the projection, the line follows the map's curvature instead of being straight in screen space.

Usage

import { ComposableMap, Line } from "react-simple-maps"
 
const Map = () => (
  <ComposableMap>
    <Line
      from={[-0.1276, 51.5072]}
      to={[139.6917, 35.6895]}
      stroke="#0066ff"
      strokeWidth={2}
      strokeLinecap="round"
    />
  </ComposableMap>
)

The rendered <path> gets the class rsm-line.

Props

from

[longitude, latitude] start point. Defaults to [0, 0]. Ignored when coordinates is set.

to

[longitude, latitude] end point. Defaults to [0, 0]. Ignored when coordinates is set.

coordinates

An array of [longitude, latitude] pairs for a multi-point path. Takes precedence over from and to.

<Line
  coordinates={[
    [-0.1276, 51.5072],
    [2.3522, 48.8566],
    [12.4964, 41.9028],
  ]}
/>

stroke

Stroke colour. Defaults to "currentcolor".

strokeWidth

Stroke width. Defaults to 3.

fill

Fill of the path. Defaults to "transparent". Leave it alone unless you are deliberately drawing a closed shape.

className

Appended to the built-in rsm-line class.

SVG attributes

Any other prop is forwarded to the <path> — strokeDasharray, strokeLinecap, markerEnd, opacity, and so on.

<Line from={a} to={b} strokeDasharray="4,4" markerEnd="url(#arrow)" />