Jump to content
Search Community

Zoom map region to the center of the map container

dush88gs test
Moderator Tag

Recommended Posts

Hello Guys,

 

Please find the linked codepen regarding my problem. The problem is when I click on the pulsing markers, I want to zoom the relevant region of this map to the exact center of the green color container. I prefer using jQuery instead of pure javascript. Can anyone point me to the right direction and explain what I'm missing. I'm new to gsap and also don't have much experience in jQuery. I know there are bunch of super heroes. So any help would be highly appreciated. Thanks in advance.

 

See the Pen PowoNbQ by dush88gs (@dush88gs) on CodePen

Link to comment
Share on other sites

You need to determine how far object is from center based on SVG's internal coordinate system then animate it. There is a bit of learning curve, you can refer to discussions in these threads,

 

 

 

Also, please avoid tagging anybody in questions as we usually read all the questions.

  • Like 4
Link to comment
Share on other sites

8 minutes ago, Sahil said:

You need to determine how far object is from center based on SVG's internal coordinate system then animate it. There is a bit of learning curve, you can refer to discussions in these threads,

 

 

 

Also, please avoid tagging anybody in questions as we usually read all the questions.

Thanks @Sahil, I will go through your references. I have removed all the unnecessary taggings.

  • Like 1
Link to comment
Share on other sites

18 hours ago, ZachSaucier said:

Additionally to what Sahil said, this thread can help you: 


This looks like exactly what I was looking for. If this solves my problem, I'll let you know with the updated codepen because it can help others that have similar problems. Thank you very much @ZachSaucier.

Link to comment
Share on other sites

I have created a different codepen for the solution.


See the Pen QWwWXLR by dush88gs (@dush88gs) on CodePen


Again, Thank you very much @ZachSaucier. You saved my day. But there is another small problem. When I click on the pulsing circle for the first time(after refreshing page with clearing cache, this issue can be reproduced), the region shows zoomed once without animating gradually. Can someone help me to solve this issue?

Link to comment
Share on other sites

3 hours ago, dush88gs said:

When I click on the pulsing circle for the first time(after refreshing page with clearing cache, this issue can be reproduced), the region shows zoomed once without animating gradually.

That's an interesting issue.

 

I think I was able to fix it in a couple different ways :

  1. Adding paused: true to the timeline (and making sure to .play() it in your first click function).
  2. By moving the timeline declaration within each of the click functions (so there's not a global timeline).

 

See the Pen KKwwKEg?editors=0010 by GreenSock (@GreenSock) on CodePen

 

I'm not sure why this is, but my guess is that it has something to do with the timeline already being at its "end" and jumping to the end even after new tweens are added? Maybe @GreenSock can shed some light on it.

 

Side note: you need to make sure to prevent people from clicking multiple selections right after each other. Checking .isActive() is one way to do that.

  • Like 2
Link to comment
Share on other sites

As for the first click behaving differently, I believe that was already resolved in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js. And yes, it has to do with the timeline already reaching its end when you add another child animation (the parent's playhead is already way beyond where you're adding the child animation, so it renders at its end state but I've added some logic to GSAP to sense cases like this and automatically shove the timeline forward to line up the playheads). 

  • Like 2
Link to comment
Share on other sites

Thanks @ZachSaucier and @GreenSock. I have another problem regarding scaling. Please take a look at the following codepen.

See the Pen VwYYBLz by dush88gs (@dush88gs) on CodePen


When I clicked on the Blue pulsing marker which associate with the Yellow pulsing marker, I want Yellow pulsing marker to remain same size without scaling(zooming) with the Red colored region, but preserving(maintaining) its original position with regards to scaled(zoomed) Red colored region. Does anyone have any ideas for how to achieve this.

Link to comment
Share on other sites

4 hours ago, dush88gs said:

I want Yellow pulsing marker to remain same size without scaling(zooming) with the Red colored region, but preserving(maintaining) its original position with regards to scaled(zoomed) Red colored region. Does anyone have any ideas for how to achieve this.

Given the yellow is a child of the element being scaled, it has to be scaled.

 

To fix this you could either 1) move it outside of the element being scaled and manually move it to where it needs to be 2) counter the scale change by reducing the scale by the appropriate amount. The second of those two options is probably the easiest in this case. 

  • Like 2
Link to comment
Share on other sites

16 hours ago, ZachSaucier said:

Given the yellow is a child of the element being scaled, it has to be scaled.

 

To fix this you could either 1) move it outside of the element being scaled and manually move it to where it needs to be 2) counter the scale change by reducing the scale by the appropriate amount. The second of those two options is probably the easiest in this case. 


Actually I missed something. I don't want to the yellow marker appear initially. I want it to be appear after the scaling of red region finished. I can manage it. Yellow marker shows initially in codepen for reference. As second solution , do you mean rescale only the yellow marker to its original size before it appear? Can you explain the second solution little bit more, as I didn't get it clearly. Any example would be better if you can?

Link to comment
Share on other sites

7 hours ago, dush88gs said:

I don't want to the yellow marker appear initially.

That makes it even easier because you can set its scale at the start and not have to worry about it later :) I moved its offset to the parent <g> and changed the scale there as well (I approximated, you can be more precise). I also put .visible-on-zoom { visibility: hidden; } in your CSS and hotspot_tl.to(".visible-on-zoom", { autoAlpha: 1}); in your hotspot click (which will make all of them appear no matter which hotspot it clicked, but I assume you know how to fix that). 

 

See the Pen KKwpyzE?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
Link to comment
Share on other sites

14 hours ago, ZachSaucier said:

That makes it even easier because you can set its scale at the start and not have to worry about it later :) I moved its offset to the parent <g> and changed the scale there as well (I approximated, you can be more precise). I also put .visible-on-zoom { visibility: hidden; } in your CSS and hotspot_tl.to(".visible-on-zoom", { autoAlpha: 1}); in your hotspot click (which will make all of them appear no matter which hotspot it clicked, but I assume you know how to fix that). 

 

 

 


This is exactly what I wanted. Thank you very much @ZachSaucier. You are a genius. I have no words to thank you enough.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...