I have a web page with a map on it. I'm using Leaflet maps and programming is done in javascript. Each 10-15 seconds i recieve a json with gps coordinates of N (max. N=3000) cars in it. So my goal is to display these cars on map and animate smoothly their movement along the streets of the city.
What i have done now:
Each car is represented as a Leaflet moving marker on map. Each time i receive new coordinates i move each marker from it's old position to the new position just by writing something like: listOfCars[i].marker.moveTo(coord, 10000);
It just draws an invisible line between new and old points and moves the marker along this line. And here i have a problem:
How should i deal with turns in the road? When a car is about to turn (for example) to the right it sends it's coordinates, 10 seconds pass(car turns and continues it's motion) and it sends it's coordinates again. So on the map the marker moves straight from the old point(when the car was about to turn) to the new point (which we get after the car turned and moved a bit forward) through the houses, parks and other places where cars just can't get (it's like a hypotenuse of a right triangle). My questions:
Thaks for help!
What you are looking for as far as I know on the google map api is called "Snap To Road" but it comes at a price since it is part of the premium features.
https://developers.google.com/maps/documentation/roads/snap#requests
Otherwise you'll have to take your GPS points faster to avoid those weird corner.
EDIT : To optimize your map, don't show 5000 points. instead, use Polylines, and show only a point once in a while. You simply try to show too many points.
I forgot to mention that on many gps device you can use the angle as a trigger to send another position instead of just using a plain x seconds. so lets say you tell your gps device to trigger every 15 seconds plus trigger another time if the device turn for 30 degree or more, this should make your angles much cleaner.