Reset position of an absolute positioned div after zoom and drag

[enguez 0 Likes (Newbie)]

Hello and thanks for any help you can provide guys.

Here´s my little issue:

• I have a map
• I need to zoom in/out this map.
• When zoomed in, users may drag it to see the details.

 

Everything works, until I try to reset the map to it´s original scale/position. If I dragged the map, when the zoom out is selected, the scale goes right, but the position goes wrong. I want the position to be reset to the original values but it goes crazy if I made a drag of it.

 

Also, as a plus....it is possible to make this zoom in, according to the user mouse click?

 

Sorry for my grammar!

 

Regards!

See the Pen empmwv by enguez (@enguez) on CodePen

[Diaco 1,997 Likes (Superhero)]

Hi enguez 

 

i changed your code and DOMs a bit , hope that helps , and i think in this case that would be better to using SVG graphic :

 

See the Pen PwPZwe by MAW (@MAW) on CodePen

[enguez 0 Likes (Newbie)]

Hey Diaco, thanks, works like a charm. Now I can see how you defined the boundaries and position.

And yes, I will use a svg instead these png to avoid blur, is a little more weight but it worths.

Regards!

[Diaco 1,997 Likes (Superhero)]

Hi , glad to hear that

 

and i think this's a useful topic for you :

 

http://greensock.com/forums/topic/10874-chrome-38-scale-svg-pixalization/

[enguez 0 Likes (Newbie)]

What about the other question?
How to apply this zoom in the area where the user made a click/touch?

 

Regards!