MapZoom

Enables zoom and drag behavior using d3-zoom.

Wrap layers that should be zoomed inside MapZoom.

Props

Parameter	Type	Default	Description
center?	[number, number]	[0, 0]	Initial center for zoom behavior
zoom?	number	1	Initial zoom level
minZoom?	number	1	Minimum zoom scale
maxZoom?	number	8	Maximum zoom scale
config?	ZoomModifiers	—	See the guide below

Config

Use config to call zoom methods before rendering

{
  [methodName]: args[] | arg
}

• single non-array arg: can be passed as it is or wrapped with an array

• multiple args / single array arg: wrapped with an array

• See available methods in d3-zoom docs

• See usage example below

Events

Emits:

• zoomstart
• zoom
• zoomend

Usage

<template>
  <MapZoom
    :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>