I'm currently using Google Maps to display data from over 500 vehicles on a map. Currently, vehicles are updated on average every 60 seconds. I currently use some JavaScript/jQuery to animate each marker from its old position to its new position.
Because the data isn't coming in very frequently it often means that each marker would animate across many buildings, rivers, lakes etc. What I'd like to do is have these markers follow the road, however I'm worried that in doing so it could become expensive.
I see that the Google Maps Directions API would allow me to do this. If I calculate the route from the marker's old position to its new position it would split the route up into many different lines and I could have the markers animate across them. However, with 500 vehicles updating every minute, that's 500 direction requests every minute. Somehow I don't think I'd even survive on the Google Maps for Business API.
If anyone has any ideas as to how I could do this without spending billions, I'd appreciate it.
Thanks
It seems to me that you would only query the Direction API once for each 500 vehicles as long as the destination never changes. You may still run up against API rate limiting nonetheless.
You're going to need to reduce your set of 500 down to something more manageable. I would probably start by only performing animations/calculations on markers that are only immediately visible within the given map viewport. You would still need to update all marker positions in case a marker is about to come into your viewport, but you don't necessarily need to manage this with an actual google.maps.Marker object for each vehicle. You could instead keep track of positions in a separate data structure so you're not having to constantly draw to the map.
As an aside, you may also want to explore clustering options for your markers as having more than a dozen or so on screen at once becomes visually unmanageable.
Related
I want to try and draw a trail that follows each marker I have that is updated live from a MySQL database table with GeoJson every 8 seconds.
I have tried drawing a polyline from the Start Position to Current Position of each of the GeoJson features/leaflet markers but that won't work of course since it only takes into account the start and current position and not any turns of direction changes made underway.
I am trying to make something that draws a direct trail behind each of the markers based on the previous positions. My GPS trackers submit latitude and longitude to a database table every minute or so. My idea is that I could maybe create a new table and just make it submit every latitude and longitude from all GPS trackers and draw LineStrings for each marker based on that maybe?
But I think that wouldn't really be a good efficient way to do it since I would have multiple GPS trackers submitting latitude and longitude every minute and the GPS trackers would be moving very slow so it is very minor changes each time (if even any at all since the slow moment speed and only 4 decimal precision in the latitude and longitude there could even be cases without any changes in the submitted data)
Does anybody here have an idea for an efficient way to draw a live updating trail behind each marker from GeoJson? :)
Think of the database tables as "persistent storage" for all the data.
Have your client, when it receives more info (every 8 seconds and/or every minute) do the following:
SELECT the last location from the``Current` table, which has 1 row per item being tracked.
Draw on the canvas (or wherever) the line from where it was (step 1) to where it now is (incoming data).
INSERT the new location into the History table.
UPDATE the current location in a table that has just the Current locations of all your vehicles (or polar bears or dolphins or snails).
Four decimal places won't work for snails. It has a resolution of about 16 meters or 52 feet. See Representation choices . Four may not be sufficient for vehicles; some of the time it will erroneously show the vehicle in a ditch or on the wrong side of a highway -- simply because 4 decimal places is not enough.
I don't know about GeoJson; I'm looking at what can be done with MySQL and HTML5's "Canvas".
On a slow machine 100 changes per second should be possible. So, if you don't have a thousand things moving around, I don't see a performance problem.
The push-me, pull-me Problem
Since a web page is stateless and the data is flowing the wrong direction, it will be difficult to design a setup where the path is continually showing on the screen, and being updated periodically (every 8 seconds).
One approach is to 'push' the data into the database (as discussed above). Then have the web page that is showing the trail poll the database to see if there is something need to display.
Such "polling" would be done via AJAX that is called every, say, second. The reply would include all new location changes. The web page would paint new line segments based on whatever data was returned (zero or more kangaroos, as appropriate).
I am using custom markers to show a semi-live view of the location and orientation (heading) of certain vehicles of interest overlayed on Google Maps. (In my case, I'm depicting aircraft, the same way Uber does for cars, or how FlightAware does for commercial flights).
The coordinates for the markers are being broadcast in JSON format to participating browsers from a server that I control. The JSON data is processed by a JavaScript function at the browser to create / update the markers on the Google map. The refresh (broadcast) rate can sometimes be as fast as once every 2-seconds, or as slow as once every 30 seconds, depending on the particular user's needs of the moment.
Sometimes, it is possible (and valid) for two markers to be thousands of miles apart from each other. For example, one marker could be in Montana, and the other could be somewhere in Africa, and this is a valid condition.
However, sometimes, when I am zoomed into a region of the world so I can look more closely at one marker, a "ghost" marker appears nearby that "isn't really located there". The ghost marker is labeled as one of the other markers that may be hundreds or thousands of miles away, but it's showing up in my zoomed in view for some strange reason. If I momentarily zoom in our out, the ghost disappears, but it may re-appear again.
Interestingly, the ghost image has the proper orientation for the vehicle it represents, but it's just located in the wrong part of the world.
Are there any special things I should be doing when I'm updating multiple markers separated by large distances so they don't show up like this in the wrong place?
I have traced this as far as putting console messages in the browser so I can see the lat/lon of each marker being depicted. I output the latLng object just before it's applied to each marker, and the lat/lon I see in the console log is correct, even when the actual marker shows up in the wrong place.
I don't know if this is a contributor to the problem, but the marker images I'm using are custom PNG files, not standard Google makers. Has anybody run into this before?
As I can see there are a couple of issues reported in the Google issue tracker very similar to the one you described here.
Have a look at them:
https://issuetracker.google.com/issues/74225068
https://issuetracker.google.com/issues/73864685
Feel free to add your comments and star the issues to subscribe to further notifications from Google.
Please note that these issues were reported for the experimental version of Google Maps JavaScript API. Double check which version of the API you are using. Probably loading the release or frozen version will work as a temporary workaround for you.
For more details about versioning model of Google Maps JavaScript API please refer to the documentation:
https://developers.google.com/maps/documentation/javascript/versions
I hope this helps!
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:
How should i deal with this 'turn problem'?
How do developers of apps (like Uber) which track cars on map deal with such problems?
Are there any ways to optimize performance of my 'web site' ? It seems like if i increase the number of markers on map (up to 5000 for example) on some computers and phones it will perform very slowly.
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.
Assuming i have a list of positions from a GPS unit loaded into a database. Now i would like Google maps to show these positions, which works just out of the box like this
new google.maps.LatLng(57.046085209585726, 9.917740747332573),
new google.maps.LatLng(57.04606626648456, 9.918211475014687),
new google.maps.LatLng(57.04656251706183, 9.917992874979973),
new google.maps.LatLng(57.04649009741843, 9.918401995673776),
new google.maps.LatLng(57.04628427978605, 9.91844767704606),
new google.maps.LatLng(57.04613022040576, 9.91837676614523),
new google.maps.LatLng(57.045781994238496, 9.918353715911508),
new google.maps.LatLng(57.045685979537666, 9.918150706216693),
new google.maps.LatLng(57.0457204291597, 9.917718200013041),
new google.maps.LatLng()
The problem is. That the polylines cut corners and due to less correct GPS devices it will look like you walked through a building and swimmingpool to get to the other side of the street.
Is there any way i can make my positioning data from the database snap to the nearest street?
Thank you all
Jonas
Not that I am aware of.
You could try using the Directions API to request directions between the points but there is a limit of eight waypoints per request, you can break longer lists of points into sublists and make multiple directions calls but there are limits on the number of calls allowed to the service.
Another problem with this approach is if due to minor inaccuracies in your data or the map data you, for example, appear to be on the wrong side of the road it might generate spurious U turns and trips around roundabouts.
The standard Google map web user interface has a line drawing tool with a 'snap to road' option but this option was not included in the API version of the drawing manager.
I did submit an enhancement request http://code.google.com/p/gmaps-api-issues/issues/detail?id=3824&can=4&sort=-stars&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal but no response yet. You could star the issue and/or create your own request since you issue isn't quite the same.
The closest example of what I'm trying to accomplish is a store locator. I have 6,000+ locations that need to be plotted onto a map of Canada.
My original plan was to use Google maps to place markers on each location, but it doesn't make sense to plot them all every time someone attempts to view the map, or various parts of the map.
How does one only put markers on the locations in view? Do I have to send the geo data of all 6000 locations to the client each time they load the map?
Is this doable with maps? (I'm sure it's got to be) Or is there a better service for this kind of thing?
Definitely do not draw all the locations at the same time if they are not all visible. Consider using MarkerManager (article here) or MarkerLight (code: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/, demo: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/randommarkers.html). If your initial map and data is such that all the markers would be visible initially, this is definitely the way to go.
You can also use the GEvent object (docs) to detect a "move" event, then check the current display coordinates, draw any that are in bounds. This is the best route if your initial map is too zoomed or small, and/or your marker set is too large to fit on the map's initial view. Your user will be moving the map around, so you can react to that movement and only draw the relevant markers. Take a look at http://econym.org.uk/gmap/gevent.htm for a list of other GEvent events (couldn't find an official list on the API), you might also want to watch "zoom" events.
The two methods can also be combined.
You can use getBounds() to determine the viewable portion of the map. I'd use this data to request from the server all locations within those bounds. Use the bounds_changed event to monitor changes to the viewport and request additional locations as necessary. You'll probably want to set either a minimum zoom level, or maximum number of results to avoid displaying too many locations than is reasonable. Eg, when the map is zoomed out to display all of Canada in a single view.