can't specify zoom center position

[ildevblu]

Hi @sasza2, thank you for your awesome lib. I'm trying to implement two buttons ( + / - ) for manually zooming in and out using setZoom API function. Zoom action seems to take the cursor position as center "anchor" point (which is a cool feature) but I can't find a way to bypass it by manually specifying the "anchor" position. So at the moment, when I click the button, the anchor is the button position (cursor is over the button) instead of the center of the area.

[sasza2]

Hello! Would new api method zoomIntoElement(idElement, zoom) would be okay for your case?

for now - maybe you can use setPosition(x, y) api method before using setZoom(zoom) because setZoom() is using last selected position. what do you think?

[ildevblu]

I'm not trying to zoom into a specific element, but in the center of the area.

Example: let's say I have an image of a full standing person. Given that my current zoom level is, for example, 3, I drag the image so that the left eye of this person is in the center of the area. Now I click my (+) button and what I expect is that the eye still stays in the center of the area. But the zoom center is based on current mouse position so the eye results to be far away from the center.

Same thing for the (-) button.

Here an example of what I'm trying to achieve: https://leafletjs.com/examples/extending/tilt.html

here the functions attached to the plus and minus buttons I'm writing to try to achieve this (this is a partial solution using move function):

  const panZoomIn = (ev:React.MouseEvent<HTMLElement>) => {
    const x = panZoomRef.current.childNode.offsetWidth;
    const y = panZoomRef.current.childNode.offsetHeight;
    if(panZoomRef.current.getZoom() < maxZoom) {
      panZoomRef.current.zoomIn(1);
      panZoomRef.current.move(-x/2, -y/2);
    }
  };

  const panZoomOut = (ev:React.MouseEvent<HTMLElement>) => {
    const x = panZoomRef.current.childNode.offsetWidth;
    const y = panZoomRef.current.childNode.offsetHeight;
    if(panZoomRef.current.getZoom() > 1) {
      panZoomRef.current.zoomOut(1); 
      panZoomRef.current.move(x/2, y/2);
    }
  };

[sasza2]

https://github.com/sasza2/react-panzoom/pull/136

you were close:D please, check this example. should be okay

[ildevblu]

Awesome solution!! Thank you! :D