Marker

Positions its children at a geographic coordinate. It renders a <g> translated to the projected point, so children are drawn in a local coordinate system where [0, 0] is the marker's location.

Usage

import { ComposableMap, Marker } from "react-simple-maps"
 
const Map = () => (
  <ComposableMap>
    <Marker coordinates={[-74.006, 40.7128]}>
      <circle r={4} fill="#0066ff" />
      <text textAnchor="middle" y={-10} style={{ fontSize: 10 }}>
        New York
      </text>
    </Marker>
  </ComposableMap>
)

The rendered <g> gets the class rsm-marker.

Props

coordinates

[longitude, latitude] of the marker. Required. If the projection cannot place the coordinate and returns null — geoAlbersUsa does this for anything outside the US — the marker renders nothing rather than throwing.

This is about the projection returning null, not about visibility. On an orthographic globe, d3 projects far-side coordinates onto the visible disc rather than returning null, so markers behind the globe still render. To hide them, clip to a Sphere or test the coordinate yourself.

children

SVG content to place at the coordinate, positioned relative to [0, 0]. Offset labels and shapes with x/y/dx/dy or a nested transform. Required.

className

Appended to the built-in rsm-marker class.

SVG attributes

Any other prop is forwarded to the <g> — including event handlers, which is the usual place to put marker interactions:

<Marker
  coordinates={city.coordinates}
  onClick={() => select(city)}
  style={{ cursor: "pointer" }}
>
  <circle r={5} fill="#0066ff" />
</Marker>

Rendering a list

You can render lists of markers the same way you would render any set of divs on a page.

const cities = [
  { name: "Tokyo", coordinates: [139.6917, 35.6895] },
  { name: "Lagos", coordinates: [3.3792, 6.5244] },
]
 
cities.map(({ name, coordinates }) => (
  <Marker key={name} coordinates={coordinates}>
    <circle r={4} fill="#0066ff" />
  </Marker>
))