0

I have a large map taking up most of the page. The native map width is 5000px, but I reduce it to 1200px initially. What I'd like to do, is when you click anywhere on the map, you zoom into that exact pointer location. I have the zoom animation working - it animates the map width to its original 5000px width within its wrapper, but I can't get the scrollLeft and scrollTop in sync with the zoom so that it smoothly zooms into that location. As it behaves now, it races in in a wobbly manner, oscillating then at completion, it snaps back to the original. I think the oscillating is due to the map width expanding and throwing off the scroll coords as it does Here is my attempt:

wrapper.mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY - main_menu.height();
    mouse_xy(x,y)
});

wrapper.click(function() {
              
    //alert("X="+x +" Y="+y)
    
    world_map_img.animate({"width":"5000px"}, zoom_speed)
    wrapper.animate({scrollLeft: x }, zoom_speed);
    wrapper.animate({scrollTop: y }, zoom_speed);
    return false;
    
})

Any advice would be appreciated

Chris
  • 833
  • 2
  • 17
  • 37
  • Hi. The code provided isn't enough to reproduce the problem, but I guess, that the coordinates used (scroll left: x, top y) shouldn't be simply the x/y coords of the click event, but some portion of it like xZoomed = x * 5000/1200... – Klemikaze Apr 12 '21 at 22:31
  • the x, y scroll coords can be tweaked once its working. I should have mentioned that as it behaves now, it races in in a wobbly manner, oscillating then at completion, it snaps back to the original. I think the oscillating is due to the map width expanding and throwing off the scroll coords as it does – Chris Apr 12 '21 at 22:36
  • I'm a bit confused about the mosemove handler, couldn't it "wobble" with the image? Have you tried setting the css props without animation? – Klemikaze Apr 12 '21 at 22:40
  • I just have that there so I can deliver live mouse X Y coords to a lower text area to test. But at the moment of CLICK those mouse X, Y coords are correct and available – Chris Apr 12 '21 at 22:45
  • Ok. Since both the mousemove and the click are bound to wrapper, I guess that zooming the img moves the img against the mouse, triggering the move event, changing global variables x/y - thus changing variables for the animate func and eventually wobbling and oscilating the image. Try 1) without animation, 2) in mouse click event don't use global x/y but rather local eventArgs provided data 3) bind the mousemove to body element – Klemikaze Apr 12 '21 at 22:50
  • Thank you - can you quickly explain local eventArgs? I'll try it – Chris Apr 12 '21 at 22:52
  • Wrapper.click obtains func as an argument, but that func can be passed parameter usually named event argument, it contains data about the triggering event, such as key that was pressed or cursor coordinates after click. The syntax goes like this (sry for formatting, I'm on the phone): wrapper.click(function(eventArgs) { var newX = eventArgs.clientX; }). https://stackoverflow.com/questions/23744605/javascript-get-x-and-y-coordinates-on-mouse-click – Klemikaze Apr 12 '21 at 22:57
  • Thanks a lot - I'll try all this and let you know – Chris Apr 12 '21 at 23:02

0 Answers0