ZoomableGroup

Wraps map content in a group that responds to mouse and touch pan and zoom, backed by d3-zoom. Place it directly inside ComposableMap and put the layers you want to move inside it.

Usage

import { ComposableMap, Geographies, Geography } from "react-simple-maps"
import { ZoomableGroup } from "react-simple-maps/zoom"
 
const Map = () => (
  <ComposableMap>
    <ZoomableGroup center={[0, 0]} zoom={1} maxZoom={12}>
      <Geographies geography={geoUrl}>
        {({ geographies }) =>
          geographies.map((geo) => (
            <Geography key={geo.rsmKey} geography={geo} />
          ))
        }
      </Geographies>
    </ZoomableGroup>
  </ComposableMap>
)

ZoomableGroup is also re-exported from the package root, but importing it from react-simple-maps/zoom keeps the d3-zoom and d3-selection code out of bundles that do not need it.

The transformed <g> gets the class rsm-zoomable-group. A transparent <rect> covering the map is rendered behind the content so gestures register over empty areas too.

Props

center

[longitude, latitude] to centre the view on. Defaults to [0, 0]. Changing it moves the map — combine it with zoom to drive the view from state:

const [view, setView] = useState({ center: [0, 0], zoom: 1 })
 
<ZoomableGroup center={view.center} zoom={view.zoom} />

Programmatic moves do not fire the onMove* callbacks, so setting state from a callback will not loop.

zoom

Zoom level. Defaults to 1. Clamped to [minZoom, maxZoom].

minZoom

Lower bound of the zoom scale extent. Defaults to 1.

maxZoom

Upper bound of the zoom scale extent. Defaults to 8.

translateExtent

Panning bounds in map pixel coordinates, as [[x0, y0], [x1, y1]]. Unbounded by default. Restrict panning to the canvas with:

<ZoomableGroup
  translateExtent={[
    [0, 0],
    [800, 600],
  ]}
/>

filterZoomEvent

Decides which events start a gesture. Return true to allow, false to ignore. The default ignores ctrl-clicks and non-primary mouse buttons.

Requiring a modifier key so the page can still scroll over the map:

<ZoomableGroup
  filterZoomEvent={(event) =>
    event.type === "wheel" ? event.ctrlKey || event.metaKey : true
  }
/>

onMoveStart

Called when a gesture begins, with ({ coordinates, zoom }, event) — coordinates is the geographic centre, event the d3-zoom event.

onMove

Called on every frame of a gesture, with ({ x, y, zoom, dragging }, event). dragging is the underlying source event. This fires often; keep the handler cheap.

onMoveEnd

Called when a gesture ends, with ({ coordinates, zoom }, event). The usual place to persist the view:

<ZoomableGroup
  onMoveEnd={({ coordinates, zoom }) => setView({ center: coordinates, zoom })}
/>

Passing a new inline function for any of these callbacks on every render is fine — they are read through refs and do not rebuild the zoom behaviour.

className

Appended to the built-in rsm-zoomable-group class.

children

The content that pans and zooms.

SVG attributes

Any other prop is forwarded to the transformed <g>.