Logo
DocsExamplesGitHubGetting started

ZoomableGroup

Interactive component to allow for easy mouse and gesture zooming and panning for mapcharts. Wrap geographies, markers, annnotations, and lines with a zoomable group component to allow your users to easily zoom and pan around your mapcharts.

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

Example

The following example shows a simple world map with zooming and panning enabled via ZoomableGroup.

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

Positioning

You can set the center for your map using the center prop. This prop will then act as the starting point for the mapchart. You can also control this center value from the outside (e.g. via buttons or scroll events).

Note that the center prop is different from the rotate property in the projection config. Changing the center prop will not recompute the projection, but merely center the map on a specific coordinate while retaining the projection rotation.

Events

You can hook into a number of events in order to create a better user experience when panning and zooming around the map. Use the following events to react to zoom events:

  • onMoveStart
  • onMoveEnd
  • onZoomStart
  • onZoomEnd

These custom event handlers all return a position object, which you can use for further interactions with the map. The following is an example of using onZoomEnd to enable external zoom controls for the map:

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

Props

NameTypeDefault
centerArray[0, 0]
zoomNumber1
minZoomNumber1
maxZoomNumber5
zoomSensitivityNumber0.025
onZoomStartFunction
onZoomEndFunction
onMoveStartFunction
onMoveEndFunction
disablePanningBooleanfalse
disableZoomingBooleanfalse

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