Logo
DocsExamplesGitHubGetting started

Line

Component to connect coordinates, show routes, or illustrate data flows from one location to another on a mapchart.

import { Line } from "react-simple-maps"

Example

The following example shows how to use lines to connect two points on a mapchart.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.

Coordinates

You can connect more than just two points at a time. Use the coordinates prop to pass a series of coordinates to visualize a path or route with multiple stops on a mapchart.

* The boundaries and the designations used on this map do not imply the expression of any opinion on the part of the react-simple-maps team or z creative labs and are used for illustrative purposes only. The boundaries and shapes are not part of the react-simple-maps library and are sourced from Natural Earth Data and gadm.org.

Props

NameTypeDefault
fromArray[0, 0]
toArray[0, 0]
coordinatesArray[]
strokeStringcurrentcolor
strokeWidthNumber3
fillStringtransparent

Newsletter

Sign up to the React Simple Maps newsletter and be the first one to know when we publish new stuff.

Hire Us!

Are you looking for someone to create beautiful mapcharts?

Contact us

React Simple Maps

Home
Documentation
Examples
GitHub

More Tools

Check out these other design and development tools by z creative labs.

Blobmaker
Get Waves

© 2019 z creative labs