How can I get the current zoom level on each onZoom?

[swthate]

I'm having trouble trying to figure out how I can get a hold of what the current zoom level is.

I tried registering the svgpanzoom object and using an @onZoom event then tried to access this.svgpanzoom.getZoom(). That didn't work. the onZoom actually returns nothing, not even a dummy console.log.

When I create a zoomLevel computed property and assign it this.svgpanzoom.getZoom() it does start with the minZoom of 1 that I gave it. But doesn't update as I zoom, which is why I tried to use the onZoom event above.

Am I going about this the wrong way?

[yanick]

onZoom should be passed a function that will be called when zooming happen.

I've created an example at https://github.com/yanick/vue-svg-pan-zoom/blob/zoom/src/zoom.stories.vue

[swthate]

Thanks for the reply! Here's what I tried...

<template>
  <SvgPanZoom
    v-if="provinces.length > 0"
    @svgpanzoom="registerSvgPanZoom"
    :onZoom="onZoom()"
    @onPan="onPan()"
    class="h-full w-full"
    :zoomEnabled="true"
    :mouseWheelZoomEnabled="false"
    :controlIconsEnabled="true"
    :zoomScaleSensitivity="2"
    :minZoom="1"
    :maxZoom="5"
  >
    <svg>blah</svg>
  </SvgPanZoom>
</template>

<script>
import SvgPanZoom from 'vue-svg-pan-zoom';
export default {
  name: 'TheMap',
  components: { SvgPanZoom },
  data() {
    return {
      svgpanzoom: null,
      zoomLevel: null,
    }
  },
  methods: {
    registerSvgPanZoom(svgpanzoom) {
      this.svgpanzoom = svgpanzoom;
    },
  onZoom(zoomFactor) {
      this.zoomLevel = zoomFactor[0];
    },
  }
}
</script>

Changing @onZoom to :onZoom got it to at least trigger. But zoomFactor is returning undefined. I can't tell, but I must be missing something.

EDIT

I changed :onZoom="onZoom()" to :onZoom="onZoom" (I'll change the name of that method lol) and now it's working

[swthate]

Unrelated, but if my maxZoom is 5, why might the zoom level at that level return as 4.9999998807907104? I suppose I could round it up to 5 when checking for the zoom level value when performing some logic. But I thought that was interesting...

[yanick]

Ah, I have at least one problem with your example:

   :onZoom="onZoom()"

that should be

   :onZoom="onZoom"

I.e., you need to pass the function callback, and what you did was to execute the function (with no arg) as you were creating the component.