gzip size


Getting started
Map files



Component to place markers on mapcharts, based on a set of coordinates. The marker component does not make any assumptions about what the marker should look like. It merely helps to position SVG elements geographically on a mapchart.

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



In order to display a marker in react-simple-maps, you need to specify the coordinates ([lon, lat]) of a marker using the coordinates prop. You can then place any valid SVG element at that coordinate.

The following example shows how to place an orange dot where New York is. You have to specify yourself what kind of marker you want to place at the given coordinates. In this case, we are using a simple circle.


React-simple-maps uses the same coordinate system as d3-geo, which means that a positive longitude will be placed East of the Prime Meridian and a negative value will be placed to the West. Similarly, a positive latitude value will result in a marker being placed to the North of the Equator, and a negative value will result in a marker being placed to the South.


The style prop for markers works the same way as the style prop of the geography component.

Custom marker content

React-simple-maps markers do not make any assumptions about what your marker looks like, so you can use them quite freely. Here is an example of how you can use markers for very simple annotations (e.g. country names).

Marker props



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