I've started to create a website where it's users are effectively tracked (they know they are being tracked). Users will walk a particular route (around Manchester, UK. to be more precise) of which there are 10 checkpoints. A checkpoint is a static position on the map. Using the Google Maps API I know that I can plot a position on a map i.e. a checkpoint. I am also storing the time at which a user reaches said checkpoint. Taking the distance between checkpoints I am then able to calculate their average speed using basic math.
Now what I would like to do is plot their estimated position based on their speed. The difficulty that I am having is plotting a new position x miles/meters (any unit) from the current position along the route.
Had it been a straight line, this would have been simple.
- Is there a way to calculate a distance from the current position along the route?
- Are there any restrictions on the number of points?
- Are there specific ways of doing this that should be avoided?
To expand my example with an image:
Imagine that a user reached the first place marker at 07:00am and it's estimated they would reach the second place marker at 09:00am. The time now (for example) is 08:00am meaning that (estimated) the user should be about half way between the markers. I would then calculate the distance they have walked (again, estimated) and plot their position on the map "distance" away from the first place marker.
Hopefully I have explained the scenario clear enough for people to understand.
I'm relatively new to the Google maps API so any thoughts would be helpful. Other similar questions have been asked on SO but from what I can see, none have been answered or have requested as many details as I have.
Thanks in advance.
UPDATE: Having spent a lot of time trying to work it out I failed miserably. Here is what I know:
- I should create the path using a PolyLine (I can do this, I have a list of lat/lng)
- There is a JS extension called epoly.js but this isn't compatible with V3
- Using spherical.interpolate wont work because it doesn't follow the path.
I think you are looking for something similar to this function, which returns a point a certain percentage along a given line. Unfortuntaely I'm not aware offhand of a javascript port of this function, but it's probably worth a look.
Meanwhile here's a quick concept for a hack that may give you enough detail for your needs:
Hope this helps.
I used to do a lot of this stuff in a past life as a cartographer. Your polyline is made up of a succession of points (lat/long coordinates). Between each successive point you calculate the distance, adding it up as you go along until you get to the desired distance.
The real trick is calculating the distance between two lat/long points which are spherical coordinates (ie points on a curved surface). Since you are dealing with fairly small distances you could feasibly convert the lat/long coordinates to the local map grid system (which is flat). The distance between two points is then straight forward right angle pythagoras (sum of the squares and all that). Movable Type website has a lot of good (javascript) code on this here.
The second way would be to do the spherical distance calculation - not pretty but you can see it here
Personally I'd go the route of converting the coordinates to the local grid system which in the UK should be OSGB. Its the least contorted method.
Hope this helps
Edit: I've assumed that you can extract your polyline coordinates using the google api. I havn't done this in version 3 of the api, but it should be straight forward. Also, the polyline coordinates should be fairly close together that you don't need to interpolate intermediate points - just grab the nearest polyline coordinate (saves you having to do a bearing and distance calculation).
Edit2 - With Code
I've had a go at putting some code together, but probably won't have time to finish it within your time limit (I do have a job). You should be able to get the jist. The coordinate conversion code is lifted from the movable type web site and the basic google maps stuff from one of google's examples. Basically it draws a polyline with mouse clicks, puts the lat/long of each mouse click in table field, converts the coordinate to OSGB and then to OS Grid (see here). After the first click it then calculates the distance between each subsequent point. Hope this gets you on the road.
Map.js:
I would say it's doable. :-) This is how I visualize it, but I haven't tested any of it.
First define a PolyLine based on the "guessed route" which the users are supposed to take. Store that in a local variable in your js. It will be handy to have lots of points, to make the estimated point better.
Then set up an interval (window.setInterval) to check for updates in users positions, say every 30 seconds. If the position is newer than the interval - display the known position and draw a solid line from the last known position, creating a line of known data. (setPath)
When no new data is present, do a simple velocity calculation using the latest few known points.
Using the velocity and the timeframe calculate an estimated travel distance.
Using the calculated distance, load your estimated route object and "walk" point by point in the "guessed route" until the pseudo walked distance is almost equal to your estimate. Then return the point where you have reached the right distance.
Draw a dotted line from the last known location to the guessed one.
Good luck!
PS.
A PolyLine is a line object consisting of many paths and waypoints
Calculate lengths between points using geometry spherical namespaces function "computeLength"
I think you pretty much got the answer already, except for one little detail that I haven't seen anybody mention explicitly: you need to use the encoded
polyline
from thesteps
to get to the point where you will be interpolating between two points that are close enough so that the straight line between them is a good approximation to the shape of the route.Let's see an example:
Driving directions from Madrid to Toledo:
http://maps.googleapis.com/maps/api/directions/json?origin=Toledo&destination=Madrid®ion=es&sensor=false
The median point (half way through the whole route) would be somewhere in the biggest
step
which is nearly 50 km long:I'm afraid this polyline is too long (2856 characters) to display it directly in the Static Maps API, but that's not necessary, it'd just be a nice way to show the polyline right here. Anyway, you can use the Interactive Polyline Encoder Utility to paste this encoded polyline (after replacing
\\
with\
) to see it.Now, let's imagine you need to find the point in this route that is exactly 20 km. from the start of this step. That is, the point between
start_location
andend_location
that is 20,000 meters fromstart_location
, along the route defined by the above polyline.In your app, you'd use the Encoding Methods in the Geometry Library (which you need to load explicitly) to decode this polyline into the whole array of LatLng points. You'd then use the computeDistanceBetween between each two adjacent points to figure out which one is the first LatLng point (
Y
) in that polyline that is more than 20,000 fromstart_location
. Then you take that point plus the previous one (X
) and do the straight-line interpolation betweenX
andY
. At this point, you can count on the straight line between these two points to be a reasonable approximation to the shape of the route.Mind you, this is a fairly detailed calculation that may turn up too expensive. If you hit performance issues due to the big size of the polyline, you can simplify it by dropping part of the points. Doing this simplification smartly may be, again, expensive though, so I'd keep it simple ;)
This site: http://www.gmap-pedometer.com/ may be of interest, as it lets the user draw routes, and adds mile or km markers along the route, so it must be doing a similar calculation to the one you require.