Zoom & Pan

All map components support opt-in zoom and pan via the enableZoom prop. When enabled, users can zoom with mouse wheel or pinch gestures, and pan by clicking and dragging. An optional MapControls component provides accessible zoom buttons.

Quick start

tsx

import { MapControls } from '@/components/shadcnmaps/map-controls'
import { WorldMap } from '@/components/shadcnmaps/maps/world'

export function MyMap() {
  return (
    <WorldMap
      enableZoom
      controls={<MapControls position="top-right" />}
    />
  )
}

Map Props

These props are available on all map components (USAMap, WorldMap, FranceMap, etc.):

Prop	Type	Default	Description
enableZoom	boolean	false	Enable zoom and pan gestures (wheel, drag, pinch).
zoomConfig	Partial<ZoomConfig>	—	Override default zoom configuration.
controls	ReactNode	—	Control overlay rendered inside the map container. Typically a MapControls component.

MapControls Props

Prop	Type	Default	Description
position	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'	'top-right'	Corner position of the control strip.
showPanButtons	boolean	true	Show directional pan arrow buttons.
className	string	—	Additional CSS classes for the controls container.

ZoomConfig

Prop	Type	Default	Description
minZoom	number	1	Minimum zoom scale (1 = no zoom).
maxZoom	number	8	Maximum zoom scale.
zoomStep	number	0.5	Scale increment per zoom action.
panStep	number	50	Translation increment (in SVG units) per pan button click.

Gestures

Gesture	Action
Mouse wheel	Zoom toward cursor
Click + drag	Pan the map
Pinch (touch)	Zoom in/out

Notes

Zoom is opt-in — maps behave exactly as before when enableZoom is not set.
Region clicks, hover, tooltips, and keyboard navigation all work at any zoom level.
The controls prop is rendered inside a positioned container, so MapControls uses absolute positioning.
Pan boundaries prevent scrolling more than 50% past the map edge.