useMapZoom

Creates a stable set of programmatic zoom commands from a MapZoom ref

Return value

Method	Description
transform(transform, transition?, point?)	Apply a native D3 ZoomTransform
translateBy(x, y, transition?)	Translate by x and y using D3 translateBy
translateTo(x, y, transition?, point?)	Translate to x and y using D3 translateTo
scaleBy(scale, transition?, point?)	Multiply scale using D3 scaleBy
scaleTo(scale, transition?, point?)	Apply an absolute scale using D3 scaleTo
scaleWith(delta, transition?, point?)	Add or subtract from the current zoom scale
zoomToFeature(feature, padding?, transition?)	Zoom to a GeoJSON feature
reset(transition?)	Reset to zoomIdentity

Methods are available directly without ref.current?. / ref.value?.

scaleWith, zoomToFeature and reset are custom helpers, rest are handy wrappers around native d3-zoom methods with automatic selection and transition handling.

See ZoomCommands API

transition

Can be an object for one step or an array for chained transition steps.
See ZoomTransitionStep API and d3-transition docs.

Parameters

Parameter	Type	Default	Description
ref	string | Ref<MapZoomRef | null>	—	MapZoom template ref key or instance ref

Usage

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

const zoom = useMapZoom('zoomRef')
const transition = [
  // Wait first
  { delay: 150 },
  // Then animate the zoom
  { ease: easeCubicOut, duration: 500 },
]

function zoomIn() {
  zoom.scaleWith(0.5)
}

function zoomToCenter() {
  zoom.translateTo(0, 0, transition)
}

function resetZoom() {
  zoom.reset(transition)
}
</script>

<template>
  <button @click="zoomIn">
    Zoom in
  </button>
  <button @click="zoomToCenter">
    Center
  </button>
  <button @click="resetZoom">
    Reset
  </button>

  <MapZoom ref="zoomRef">
    <MapFeatures />
  </MapZoom>
</template>

Best Practice

• Use MapZoom transition for a shared default command transition

Examples

• Programmatic Zoom