SVG Rotation

[dudunegrinhu]

Hi, thanks for this great plugin. Do you have any function for rotating the marker? I'm using SVG and I can do the rotation but I would like to have the rotation to animate as well so t looks smoother when updating the marker on the map.

[viskin]

Sorry, the library only animates marker position. If you want to perform some manipulation with image of marker as the marker animates then, in theory, you can use animationposition_changed event, and in it apply your image rotation. I haven't tried this myself, but it could work.

[rudra0713]

I was using Sliding Marker but I got stuck at a silly problem. I have an array of 50 locations and a SlidingMarker object named marker. I am trying to create an animation that will take this marker from location 1 , 2 , ....50 . So I created a loop to traverse my location array and add marker.setPosition(location[ i ] ) in that loop. But what the marker is doing , it is animating / connecting just the first and last location i.e. location 1 and location 50. How can I solve this issue ? I know this is a very silly problem but I had been stuck at it for a long time, tried settimeout /settimeinterval to match the duration of slidingmarker. But it is not working.

[dudunegrinhu]

That's weird because I do the same thing and it works for me. Try to put a timer inside the loop for the marker.setPosition(location[ i ] ) to see what happens

On Wed, Jun 21, 2017 at 1:54 PM, rudra0713 notifications@github.com wrote:

I was using Sliding Marker but I got stuck at a silly problem. I have an array of 50 locations and a SlidingMarker object named marker. I am trying to create an animation that will take this marker from location 1 , 2 , ....50 . So I created a loop to traverse my location array and add marker.setPosition(location[ i ] ) in that loop. But what the marker is doing , it is animating / connecting just the first and last location i.e. location 1 and location 50. How can I solve this issue ? I know this is a very silly problem but I had been stuck at it for a long time, tried settimeout /settimeinterval to match the duration of slidingmarker. But it is not working.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/terikon/marker-animate-unobtrusive/issues/11#issuecomment-310172643, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKFZBuD1jhQsTNDp2yieXunPBBstfHsks5sGWcCgaJpZM4JrG_N .

[rudra0713]

Thanks for your response. my code currently looks like this : var marker = new SlidingMarker({ position: locations[0], map: map, duration: 10000, easing: "easeInOutQuint" });

    for(var i = 1 ; i<locations.length ; i++)
    {
                    marker.setPosition(locations[i]);
   }

Wasn't it supposed to be this simple ? By timer, did you mean settimeout() / setimeinterval() . I already used them ,changed the duration of marker, added delay by creating more loop. none of them works .

[dudunegrinhu]

How are you passing the position? Latitude and longitude? In other words, what is the value of locations[i]?

Sent from my iPhone

On Jun 21, 2017, at 2:55 PM, rudra0713 notifications@github.com wrote:

Thanks for your response. my code currently looks like this : var marker = new SlidingMarker({ position: locations[0], map: map, duration: 10000, easing: "easeInOutQuint" });

for(var i = 1 ; i<locations.length ; i++)
{
                marker.setPosition(locations[i]);

} Wasn't it supposed to be this simple ? By timer, did you mean settimeout() / setimeinterval() . I already used them ,changed the duration of marker, added delay by creating more loop. none of them works .

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[rudra0713]

locations[] array contains latitude longitude. example : var locations = [ {lat : 25.6279 , lng : 88.6332},           {lat : 24.4260 , lng : 90.9821},           {lat : 23.1634 , lng : 89.2812},           {lat : 22.8456 , lng : 89.5403},           {lat : 23.5424 , lng : 89.6309},          ];

[dudunegrinhu]

That's weird. It should work. Try to separate Something like this: marker.setPosition(lat[i], lng[i]);

Sent from my iPhone

On Jun 21, 2017, at 3:16 PM, rudra0713 notifications@github.com wrote:

locations[] array contains latitude longitude. example : var locations = [ {lat : 25.6279 , lng : 88.6332}, {lat : 24.4260 , lng : 90.9821}, {lat : 23.1634 , lng : 89.2812}, {lat : 22.8456 , lng : 89.5403}, {lat : 23.5424 , lng : 89.6309}, ];

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[viskin]

@rudra0713 Your code is

for(var i = 1 ; i<locations.length ; i++) {
  marker.setPosition(locations[i]);
}

I suppose you should wait for some time before assigning next target for an animation, like this:

for(let i = 1 ; i<locations.length ; i++) {
  setTimeout(function() {
    marker.setPosition(locations[i]);
  }, delay);
}

Also, pay attention that I use let instead of var, var with setTimeout also can cause you the problem

[rudra0713]

Thanks for your response. But settimeout only delays the starting of transition. Once the transition starts, it moves towards the final destination in spite of the next destination.

[viskin]

Ok, I will write some demo code for this, as it looks like the problem is pretty common.

[rudra0713]

Any solution found for the problem ? I think I realize the problem. Let's say , I have 5 locations , a, b, c, d, e. I loop through these locations. What I want my marker to do is to traverse through every location i.e. animating from location a to b, b to c , c to d and d to e. So there are 4 animations. Lets say I have set each duration to take one second. So It should take 4 seconds at least to complete the animation. But a forloop will take much less than one second . So the loop ends before a single animation starts. In the end of the loop, it only remembers the last location i.e. location e . So the marker basically starts from location a and ends up at location e.

If so, how can I solve this issue ? I badly need a quick solution.

[rudra0713]

Found the solution. Actually, @viskin, your code was correct. I made a mistake while setting the delay for settimeout and marker animation. It was a stupid mistake. Thanks for your effort.

[viskin]

You welcome

[sulaimanabid1999]

Can i change the marker to any other icon using your package???