Logo
DocsExamplesGitHubGetting started

Marker

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"

Example

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.

* 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

React-simple-maps uses the same coordinate system as d3-geo, which means that a positive longitude will be placed East of the Meridien 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.

Note that if you are trying out react-simple-maps with coordinates found via Google search, you need to make sure they are in the right order ([lon, lat]). Google by default returns coordinates as [lat, lon], while d3-geo specifies them as [lon, lat].

Style

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

* 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
coordinatesArray[]
styleObject{}

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