Interactive Map

[Bruno Stephen]

Hi  guys I have a challenge.
It will be an interactive map I have this reference: https://northdrive.ca/projects-map/

 

1. By clicking on (+) the map expands.
2. Then in the mouse movement it shows the content outside the screen.
3. Clicking on one of the points on the map reveals the image with a small zoom.
4. When clicking on the [X] it returns to the initial position.

 

I worked and managed to reach a reasonable result, the big problem is that when I click on one of the points and the zoom starts it leaves the element triggering the mouseleave generating bugs.

 

• Some points of improvement in step 1 and already come with zoom following the mouse.
• When you click on one of the points it will bring the map as much as possible within the cursor.
• Ensure that the map always appears in full
• Any improvement on what I created would be welcome.

 

Thank you all in advance.

See the Pen JjwKEzq by brunostephendev (@brunostephendev) on CodePen

[Rodrigo]

Hi,

 

You should check this tutorial by @PointC

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

 

And this video by @Carl

They should provide you enough information to make your map work the way you intend.

 

Hopefully this helps.

Happy Tweening!