v3.0.0
gzip size
Github

Documentation

Getting started
Map files
Projections
Styling



Advanced

Line

Component to connect coordinates, show routes, or illustrate data flows from one location to another on a mapchart using a geojson lineString. It can be specified as either a start and end point, or a set of coordinates.

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

js

Example

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

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.

Line 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.

Contact us

React Simple Maps was created by z creative labs. We turn ideas into digital products and specialise in dataviz and data-driven design. Are you looking for someone to create custom mapcharts and data visualisations?

Get in touch

React Simple Maps