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"
js
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.
Coordinates
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.
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).
Marker props
| Name | Type | Default |
|---|---|---|
| coordinates | Array | [] |
| style | Object | {} |
