How to get position/index of LineString while animating a sprite on it?

[ergin-duran]

Hey @Viglino
I was animating a sprite (ex. plane) on a LineString. I have coords,date,speed..etc (comes from GPS device to the DB) and i draw a LineString from coords on map. While animating a sprite on it, i need to show other data on info window or popup which is appearing with select interaction. But i do not know the exact place a sprite on LineString.
This would be very nice idea if someone want to make timeline or info window like me while animating..

Is there any internal solution for this in the libs (ol-ext,ol-games?) .

• If there's no solution for this, I'll try get closest point or something to get LineString position and calculate it manually.

Hope you have a better solution for ms.

NOTE:
I follow this instructions while animating a sprite:
https://viglino.github.io/ol-games/examples/map.sprite.path.html

While plane is flying, it would be better to show info about real time/speed/battery etc.

DB stores data like this:
[lon,lat,speed,time,total_km, battery_level...etc]

[Viglino]

You can listen to changes on the sprite geometry to know its position:

plane.getGeometry().on('change', function (e) {
  var pos = e.target.getCoordinates();
  // Do something with that position
  ...
});

If you're looking for the position on the path for the sprite:

• plane.path is the path it is moving along
• plane.destination is the index of the point on the path the plane is going to

You can listen to change:direction events to know when the sprite is moving along a new segment on the path:

plane.on('change:direction', function(e) {
  console.log('plane is on the '+e.target.destination+' segment');
  console.log('plane is going to '+e.target.path[plane.destination]);
});

I could have make it more clear and return the destination in the change:direction event.

[ergin-duran]

Thank you @Viglino . You're awesome! I was scared if i call something getClosest method for this, view.setcenter maybe gets lag/delay. But there's already a destination counter for linestring path.

Hope you help me about styling CanvasTitle. I still couldn't handle it. I want to add a logo/image and long text maybe 2-3 lines near on it. But i am still stuck there.
https://github.com/Viglino/ol-ext/issues/320#issuecomment-515687418