Annotation

Simple annotation component that allows for easy annotation of mapcharts. To position an annotation, determine the coordinates of the subject of the annotation, and then pass in an offset x (dx) and offset y (dy) in px to specify the offset of the content of the annotation.

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

Example

The following is an example of using annotations in react-simple-maps to show the location of a city (Paris) on a map of Europe.

If you want to use ZoomableGroup, make sure to place your annotations inside the ZoomableGroup component.

Connector

An annotation consists of the annotation content and a connector path. You can pass down connector props using the connectorProps prop. This way you can easily override styles, or modify the appearance of the connector in other ways.

To modify the curvature of the connector, you can pass in a positive or negative number to the curve prop. Usually, any number between -1 and 1 will yield nice results.

Advanced annnotations

The annotation component in react-simple-maps is deliberately kept simple to avoid bloat. If you want to get serious with chart annotations, check out Susie Lu's react-annotation library. You can easily combine it with react-simple-maps markers.

Annotation props