Logo
DocsExamplesGitHubGetting started

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.

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

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.

Props

NameTypeDefault
subjectArray[]
dxNumber30
dyNumber30
curveNumber0
connectorPropsObject

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