useZoomPan

The useZoomPan hook is used internally by react-simple-maps to power the ZoomableGroup component. You can implement a custom zoomable group if you need to heavily modify the way the zoomable group behaves.

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

export default function CustomZoomableGroup() {
  const { mapRef, position, transformString } = useZoomPan({
    center: [0, 0],
    scaleExtent: [1, 8],
    zoom: 1,
  })

  return (
    <g ref={mapRef}>
      <g transform={transformString} {...restProps} />
    </g>
  )
}

The transformString is a convenient property returned by useZoomPan that can be passed directly to the transform prop of an SVG group element (<g>). The position values are also accessible via the position property returned by the useZoomPan hook.

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.

onMove()

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

onMoveEnd()

This event is triggered when the map stops moving.

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

export default function CustomZoomableGroup() {
  const { mapRef, position, transformString } = useZoomPan({
    onMoveStart: ({ coordinates, zoom }) => {
      console.log(coordinates, zoom)
    },
    onMove: ({ x, y, k, dragging }) => {
      console.log(x, y, k, dragging)
    },
    onMoveEnd: ({ coordinates, zoom }) => {
      console.log(coordinates, zoom)
    },
  })

  return (
    <g ref={mapRef}>
      <g transform={transformString} {...restProps} />
    </g>
  )
}

useZoomPan options