Annotation

Labels a coordinate with content offset from it and a connector line drawn back to the point. Use it where a Marker label would sit on top of the feature it describes.

Usage

import { ComposableMap, Annotation } from "react-simple-maps"
 
const Map = () => (
  <ComposableMap>
    <Annotation
      subject={[2.3522, 48.8566]}
      dx={-60}
      dy={-40}
      curve={0.5}
      connectorProps={{ stroke: "#0066ff", strokeWidth: 2 }}
    >
      <text x={-8} textAnchor="end" fill="#0066ff" style={{ fontSize: 12 }}>
        Paris
      </text>
    </Annotation>
  </ComposableMap>
)

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

Props

subject

[longitude, latitude] being annotated — where the connector points. Required. Renders nothing if the projection cannot place the coordinate and returns null, as geoAlbersUsa does outside the US. Note this is about the projection returning null, not about visibility — an orthographic projection places far-side coordinates on the visible disc rather than returning null.

children

The label content. It is placed at the offset end of the connector, so [0, 0] for children is the label anchor, not the subject. Required.

dx

Horizontal offset in pixels from the subject to the label. Defaults to 30. Negative values place the label to the left.

dy

Vertical offset in pixels from the subject to the label. Defaults to 30. Negative values place the label above.

curve

Curvature of the connector. A number applies to both axes; a [x, y] tuple sets them separately. Defaults to 0, a straight line.

<Annotation subject={[2.35, 48.86]} curve={0.6} />
<Annotation subject={[2.35, 48.86]} curve={[0.8, 0]} />

connectorProps

SVG props for the connector <path> — stroke, strokeWidth, strokeDasharray, markerEnd. The defaults are a transparent fill and a black stroke.

<Annotation
  subject={[2.35, 48.86]}
  connectorProps={{ stroke: "#0066ff", strokeWidth: 2, strokeDasharray: "2,2" }}
/>

className

Appended to the built-in rsm-annotation class.

SVG attributes

Any other prop is forwarded to the wrapping <g>.

Positioning notes

Because dx/dy place the label and the connector runs back to the subject, the text anchor should point toward the subject: use textAnchor="end" with a negative dx, and textAnchor="start" with a positive one.