Zoomable Group

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.

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

Events

You can hook into a number of events in order to create a better user experience when panning and zooming around the map. You can use the custom onMoveStart, onMove, and onMoveEnd events to do so.

onMoveStart()

This event is triggered whenever the map starts moving. This applies to drag motions triggered by the user, as well as controlled movement via the center prop.

<ZoomableGroup
  onMoveStart={({ coordinates, zoom }) => {
    console.log(coordinates, zoom)
  }}
>

onMove()

This event is triggered on every increment of movement. Avoid any kind of heavy calculations to avoid performance issues here.

<ZoomableGroup
  onMove={({ x, y, k, dragging }) => {
    console.log(x, y, k, dragging)
  }}
>

onMoveEnd()

This event is triggered when the map stops moving.

<ZoomableGroup
  onMoveEnd={({ coordinates, zoom }) => {
    console.log(coordinates, zoom)
  }}
>

The following is an example of using onMoveEnd to enable external zoom controls for the map:

Zoomable Group props