How to pan / zoom to specific point ?

[1019-h]

Hi !

Sorry to bother, but I have a question : I can't find how to pan and zoom to a specific point in my image / container (not a svg). I want it to zoom at coordinates x:1730, y:1210 but I can't seem to make it work.

I tried the following :

panzoom.pan(1730, 1210, {relative: true});
panzoom.pan(1730, 1210);
panzoom.zoomToPoint(2, { clientX: 1730, clientY: 1210}, { animate: true });

The last one seems to work for scaling, but not for coordinates.

Or with startX / startY :

const elem = document.getElementById('myDiv')
const panzoom = Panzoom(elem, {
maxScale: 2,
contain: 'outside',
animate: true,
startX: 1730,
startY: 1210
})

It just doesn't do anything or send any error in the console. I'm not sure what to do.

Thank you for your time !

[timmywil]

Thanks for opening an issue. It looks like you have contain: 'outside' set, which could prevent you from panning the image to your desired point if it would violate the contain constraint. It's hard to say exactly what is going on without a test case, though. It would be helpful if you could create a minimal test case. Here's a template to get started. Will reopen if there's a bug.

[1019-h]

Hi,

I finally added the JS on this page.

The code I try to fiddle with is this part :

// PANZOOM      --------------------------------------

const buttonIn = document.querySelector('#zoomIn'),
      buttonOut = document.querySelector('#zoomOut');
const elem = document.getElementById('map-container')
const panzoom = Panzoom(elem, {
    maxScale: 2,
    contain: 'outside',
    animate: true,
    startScale: 1.20,
    startX: 176.09,
    startY: -916.96
})

What I want is that, for all formats of window, it always is centered on this :

But I just can't do it. I tried many things but it just doesn't work.

Thank you!

[1019-h]

Sorry, since I'm not sure you saw that, I'm just tagging you if that's okay ? I don't know if you get updates once the issue is closed. Sorry if you did ! @timmywil

[timmywil]

Sorry I didn't get a chance to look at it. I've taken a look now and I have a couple notes:

1. Turn off contain and any start values and first get the zoom-to-point to work without that. contain: outside will override any pan set to ensure that the image does not pan in a way that would violate the containment. Turning that off, even temporarily, can help with understanding the limitations that come with it when trying to pan to a specific point.
2. Sorry this is confusing, but when you use zoomToPoint, you're not setting the x/y position relative to the image's dimensions. The x/y values are relative to the viewport. You can get an idea of what the values might look like by adding a mousemove handler to the parent element and logging the clientX and clientY ($parent.addEventListener('mousemove', (e) => console.log(e.clientX, e.clientY))). Use those values in zoomToPoint.

Hope that helps.