Zooming elements in div centered to current mouse location

[jermbo]

I am trying to make an interactive map with the draggable plugin that zooms in and out. I have made my image an SVG so it can scale well, and my location dots are css. But i have been running into two issues. 

1. Since my map is longer than the view port, i can't seem to see the bottom of the map. it keeps scrolling back to the middle if i drag upwards. 

2. All the zooming solutions I have found have only been for images. I need to zoom all the elements in the entire div. 

 

I started to create my own zoom, which zooms the whole div and the elements in side it. But this presents a couple of issues. First, it zooms in and out at the same spot, I would like it to zoom into the current mouse location. And second if I zoom out at the edge, the div goes out of the visible boundaries so i can't drag it around. 

 

As per your requests I created a codepen,

See the Pen LktfB by jermbo (@jermbo) on CodePen

, and I realize this is a very specific situation. Any direction would be greatly appreciated.  I just need a push in the right direction and I got the rest of the map functionality. 

 

Thanks in advance!!

 

*Plugin Request : Zoomable. If this were a greensock plugin like Draggable I would be the happiest developer in the world!

 

 

 

[Jonathan]

Hello  jermbo, and Welcome to the GreenSock Forums!

 

Here is a codepen example modified to drag and view the bottom:

 

See the Pen EGFrJ by jonathan (@jonathan) on CodePen

 

You just need to add the CSS property position: absolute on your .map class, so it takes the element out of the flow of the document:

.map{
  /*background: url("images/map-bg.jpg") no-repeat;*/
  width: 1200px;
  height: 1300px;

  /* add this css property */
  position:absolute;
}

Does that help?

[Rodrigo]

Also you might want to look at this post for your map markers:

 

http://forums.greensock.com/topic/8989-ie-issues-and-mobile-performance/

[jermbo]

Hey Jonathan,

First thank you for your quick response! Second, w....t....f...! I was up all night last night trying to figure this out and it was, was a stupid position!! The funny part about that is I took it out in earlier revisions of the trial.. and didn't think to add it back in. *FacePalm*

 

Hello rhernando, thanks! I had already had in mind what I was going to do, but this is definitely making me think about it in a different way. 

[Jonathan]

Best rule of thumb is if you are moving (translating), scaling, or rotating.. its best to set the position of the element to absolute so it can be moved outside of its normal position in the document.

 

Checkout the Draggable Docs:

 

http://api.greensock.com/js/com/greensock/utils/Draggable.html

 

Taken from the Draggable Docs:

 

In order to make things moveable via their "top" and "left" properties, you must make sure that the elements have their position css property set to either "relative" or "absolute".