SVG Rotation
dudunegrinhu opened this issue · comments
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.
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.
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.
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 .
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},
];
@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
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.
Ok, I will write some demo code for this, as it looks like the problem is pretty common.
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.
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.
You welcome
Can i change the marker to any other icon using your package???