useZoomPan

The useZoomPan hook can be used to implement custom zoom behaviour. It is the hook that powers the ZoomableGroup. This hook must be called inside a MapProvider or a ComposableMap.

Usage

import { useZoomPan } from "react-simple-maps/zoom"
 
const { mapRef, position, transformString } = useZoomPan({
  zoom: 2,
  scaleExtent: [1, 10],
})

You can use this hook to implement your own version of ZoomableGroup:

const { mapRef, transformString } = useZoomPan({ center, zoom })
const { width, height } = useMapContext()
 
<g ref={mapRef}>
  <rect width={width} height={height} fill="transparent" />
  <g transform={transformString}>{children}</g>
</g>

The transparent <rect> is necessary because without it, gestures over empty parts of the map will not register.

Parameters

An object with:

• center — [longitude, latitude] to centre on. Defaults to [0, 0].
• zoom — zoom level. Defaults to 1.
• scaleExtent — [min, max] zoom bounds. Defaults to [1, 8]. Note that ZoomableGroup exposes this as two props, minZoom and maxZoom.
• translateExtent — [[x0, y0], [x1, y1]] panning bounds. Unbounded by default.
• filterZoomEvent — decides which events start a gesture.
• onMoveStart, onMove, onMoveEnd — gesture callbacks. Read through refs, so inline functions do not rebuild the zoom behaviour.

Returns

• mapRef — attach to the <g> that should receive the gestures
• position — { x, y, k, dragging }
• transformString — ready to use as a transform attribute