MapZoom

Enables pan and zoom behavior using d3-zoom.

Wrap layers that should move together inside MapZoom.

Props

Parameter	Type	Default	Description
minZoom?	number	1	Minimum zoom scale
maxZoom?	number	8	Maximum zoom scale
transition?	ZoomTransition	—	Transition step or ordered transition steps for programmatic zoom
config?	ZoomModifiers	—	See the guide below

config

Use config to call native d3-zoom methods before rendering.

{
  [methodName: string]: Arg | Arg[]
}

1. Single non-array value: Arg | [Arg] - pass directly or wrap with an array
2. Single array value: [Arg] - must be wrapped with an array
3. Multiple values: [Arg1, Arg2, ...]

See available methods in d3-zoom docs.

Ref

Available via component ref

• container — <g> wrapper
• zoomBehavior — d3-zoom
• programmatic zoom methods, see useMapZoom for API and usage

Events

Lifecycle events forward the native D3 zoom event.

• zoomStart(event: ZoomEvent)
• zoom(event: ZoomEvent)
• zoomEnd(event: ZoomEvent)

Usage

<script setup lang="ts">
import { useMapZoom } from '@d3-maps/vue'

const zoom = useMapZoom('zoomRef')
const transition = { duration: 600 }

function zoomIn() {
  zoom.scaleWith(0.5)
}
</script>

<template>
  <MapZoom
    ref="zoomRef"
    :min-zoom="1"
    :max-zoom="6"
    :transition="transition"
  >
    <MapFeatures />
  </MapZoom>
</template>

Examples

• Zoom
• Programmatic Zoom