MapZoom

Enables zoom and drag behavior using d3-zoom.

Wrap layers that should be zoomed inside MapZoom.

Use useMapZoom inside MapZoom when controls or overlays need zoom state

Keep center and zoom controlled in the parent and update them from the zoom callbacks

Props

Parameter	Type	Default	Description
center?	[number, number]	viewport center	Point to be centered in the viewport
zoom?	number	1	Controlled zoom level
minZoom?	number	1	Minimum zoom scale
maxZoom?	number	8	Maximum zoom scale
transition?	ZoomTransition	—	Animate zoom with d3-transition and d3-ease
config?	ZoomModifiers	—	See the guide below

Config

Use config to call 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 and usage example below

Events

Emits:

• zoomStart
• zoom
• zoomEnd
• update:center
• update:zoom

Usage

<template>
  <MapZoom
    v-model:center="center"
    v-model:zoom="zoom"
    :min-zoom="1"
    :max-zoom="6"
    :config="{
      translateExtent: [[[0, 0], [1200, 800]]], // array wrapper required
      duration: 250, // single argument can be passed as it is
      clickDistance: [8], // also can be array-wrapped
    }"
  >
    <MapFeatures />
  </MapZoom>
</template>

Helpers

• useMapZoom
• getZoomView

Examples

• Zoom
• Programmatic Zoom