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).
Related
My web application is intended to track a college shuttle on a predefined fixed route. There are certain pickup points on the route which are fixed. Through the web-app, the user should be able to get the estimated time of arrival of a college shuttle. For that, I would require the actual distance - along the route and the speed of the vehicle. The haversine formula for the shortest distance would not apply over here.
However, My friend thought of a solution that is to plot points along the route at a fixed distance say 20 meters, and calculate the distance in relation to the points. For example-If Shuttle is at point 5 and the user is at point 10, then the distance between both of them would be computed as (10-5)*20 i.e 100 meters. This solution isn't highly accurate but it would work.
How would I determine the shuttle location with respect to the points? I have the live coordinates of the shuttle, the coordinates of all the points on the route. What is the best way to get the result such as
Shuttle location is point 5. I am using Javascript and NodeJS. For Database MongoDB. Current location is obtained using Geolocation API
Leaflet is a great platform for maps and there is a plugin for k-next-nearest-neighbor searches here https://github.com/mapbox/leaflet-knn
The nearest stop along the route to the bus would then give you what you need I think
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.
Question is based on experience with googlemap api V3 otherwise please ignore the question
Summary of the question:
question consits of a lot of information (background information about use case), but the question have only
2 clear and specific parts
part one is about clustering markers
an its using in this case
part two is about loading new markers
(respective loading new groups of markers) when you move with view
port
both parts are still about same thing about handling with the points (markers) in the viewport, when you solve one you have to think on second part and otherwise
Info about the usecase and desribing of the question
Imagine application of hundreads or thousands points (places) defined by latitude and longitude which are stored in database. I will show the places on the maps. Map will be divided this way:
the map will be divided to regions = center of the map will be set to some specific latitude and longtitude from that region region (for example the main city of the region) - for simplicity it will be 2 known coordinates
the number of regions is < 20
in each region will be some routes, each route will consists of some points (like you have road map and go from one city to another city and there are some towns on the way for example town1, town2, town3 => so you have 5 points - only the points are important)
region consits of < 100 routes, each route consists of < 100 points (=places/=towns) (by point understand latitude and longitude coordinates)
so I mentioned 3 types of dividing my area: regions > routes > paces in route; this are dividing what you will be able reach from menu of my web application (=php+html5+css+js)
next thin what is important are the places - number of places would be in thousands and sence of all of it is that you choose some starting point and wanna show the nearest places ( for example region1 -> route 2 -> city 4 on route 2 its on latitude x and longitude y and i wanna show only relevant place in viewport = places around the city 4 on route 2)
There are some problems which comes up: (the bold are important for me)
storing the places in db (MySQL) maybe not best idea, I'will consider
some sorting places by coordinates to some groups for easier requests
to db
too many places in viewport (for exmple city 4 on route 2 is center of the map and there are 50 or 150 places aroud it) - I found
some soulution as clustering the places - question part 1 is if
somebody have experience with that and if its enought for running it
on normal computer or mobile browser (don't wanna kill the app by
tunes of markers on the viewport) - what I read this can group the
markers together and show more specific if you zoom in
problem 2 is moving from one region to another (or just moving from the place) - example you have center point of the map called A
(=city 4 on roadmap 2) and in the view port there are loade only
points which fits to this view port, then you move with the map to
the right and you should load new point cause your viewport is
changed = question part 2 is what could be good practise for loading
that points - if you turn "10 pixels" to the right call the db for new places, then you turn "another 10 pixels to the right" again call db for another new places is stupidity, cause I would kill app only by requests for db, sorting, etc.
You can use a bounding box to filter most of your places. Then use the harvesine formula.
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.
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.