Docs: Mousewheel to zoom into map

[Peter K]

Hi 👋 

 

I have an SVG map and I wish to zoom in and out using the mouse wheel. Just like standard Google and Apple Maps behaviour. 
 

Can anyone point me in the right direction

 Anytime I search, I find docs for animations on scroll instead. 
 

Thanks. 

[mvaneijgen]

You could look in to animating the viewBox of the SVG, our own @Carl did a great tutorial on that. If you still need help after that, please post a minimal demo showing what you've tried and we'll happy to take a look at your issue. Hope it helps and happy tweening! 

 

 

[Rodrigo]

Hi,

 

@PointC has a great tutorial on animating the ViewBox as well:

https://www.motiontricks.com/basic-svg-viewbox-animation/

 

Happy Tweening!

[Peter K]

Thank you both for taking time to reply. 👍 I found the supplied examples very helpful and have managed to progress. Admittedly, mostly by tweaking existing CodePens.

I am at the stage where I need a little help and if anyone can assist and I have made a slimmed-down CodePen demo.

 

See the Pen wvOQwYR by pixelsbypete (@pixelsbypete) on CodePen

Issue 1: Jump to buttons Vs drag:
I can drag the main SVG around until I use a Jump To button (top left). 

 

Issue 2:  Zoom In and Out buttons

I understand the Viewbox might also be appropriate for this. I would need to increase the data-view by + and - 10 per click. But I'm just not sure how to programme this. I did find a demo online but it is complex with many other lines of code

 

Issue 3 : Mouse wheel zoom

Again, I can see that increasing/decreasing the ViewBox might also work here and I probably need some type of event listener for the mouse wheel?

 

 

If anyone can fork and help, I'd be grateful.

 

[Rodrigo]

Hi,

 

The Draggable issue is related to the fact that you're updating the X and Y values of the element that contains the entire SVG wrapper. On the other hand your buttons are tweening the values of the View Box attribute of the SVG element. So each instance is doing something completely different on different elements.

 

What you need to do is create a Draggable instance that actually updates the values of the view box attribute of the SVG element, based on the min and max values the attribute can have, but you also have to consider the current zoom value as well.

 

This is something that can definitely be done with GSAP and Draggable, but I'm afraid is not the simplest thing to achieve and we don't have the time resources to build this for you and is beyond the scope of what we do in these free forums. You can contact us for paid consulting or post in the Jobs & Freelance forums to get help there.

 

You can also start working your way into this by starting small and simple and create the logic for this step by step.

 

Happy Tweening!

[PointC]

Here's an oldie but a goodie from our own @OSUblake. Should give you some ideas.

 

See the Pen oGoyYb by osublake (@osublake) on CodePen

[Peter K]

Thanks again.  

I will update on the jobs board tomorrow.