0

I use react JS and socket.io to get data (coordinates of drones) from the server side.

Then, use Google API to display drones location as markers on the google Map.

The problem is that my animation is not smooth enough. (teleport)

My marker part code structure is something like

googlemap.js

componentDidMount(){
 //setup Map
 //setup initial Positions of the Markers
}

// every time it recerives new data from server, it will update the markers position 
componentWillReceiveProps(nextProps){ 
 //use setMap(null) to remove past markers on the map
 //add the new markers 
}

Is there any suggestion or 3rd party library to deal with this problem.

My idea now is to use RequestAnimationFrame?

interpolate some positions?

(I don't plan to use setInterval)

Thanks in advance

Wen Chen
  • 13
  • 1
  • 6
  • Instead of creating a new marker at the new position you can change the current marker's position. Here is an example https://stackoverflow.com/a/10906464/1552587 – Titus Aug 01 '17 at 03:33
  • @Titus thanks, I will modify that part – Wen Chen Aug 01 '17 at 05:12

0 Answers0