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.
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'm using leaflet to show a floor plane. I have to add markers on the floor. There are two types of shape of the marker, circle and rectangle. when marker amount cross 1k, map rendering became slow and performance also.All these things I'm doing in android webview. I need help to optimize this process.
I think that is totally normal with that huge amount of markers. A common way is to use Marker Clustering. This way your huge amount of markers gets grouped into a smaller amount while still showing the needed informations to the user.
Take a look at this clustering plugin for Leaflet: https://github.com/Leaflet/Leaflet.markercluster
I'm trying to place a series of overlays onto a Google Map. I'm following along with the sample code for ground overlays, but that only allows me to dictate image placement using north/south/east/west boundaries. The works as long as my image is a rectangle and oriented along longitude and latitude lines. I'd really like to be able to accurately place an image, including custom scale and angular orientation. That doesn't seem possible with a ground overlay.
So here's a possible use case. I'm building a website to help city planners test parking availability.
The city planner uses a Google map on the analysis website to select an area of the street with a polygon select tool.
The website script tests the selected polygon area for parking availability.
When we're done with the evaluation, I'd like the site to paste random images of cars into the page so the user can better visualize what's available.
I can create a rectangular plan view of a car, but I'm unable to figure out how to rotate the image by X degrees as required. Perpendicular to North/South/East/West (NSEW) is no problem, but I'm unable to angle it.
This should work no matter how the original map is oriented. The goal is the user sees a proposed solution, complete in the current map view, and to scale.
Obviously the image would have to be perfectly scaled to the visible map, and that's fairly easy to do (a minor latitude length adjustment may be required.)
(In this image, the city planner has just selected the area of interest via polygon selection tool. The next step is to evaluate the area, and paste in some parked cars, aligned and in scale!)
All the Google mapping native overlay tools I'm looking at rely on LatLngBounds class, hence the NSEW perpendicular alignment problem. I know I can calculate the desired angle, go to a php server, rotate a .png image with transparent background, per php imagerotate, but that seems like such a hack for a geo-mapping exercise. I could also pre-rotate the cars in a .png file and save them as red_car_15degrees.png, blue_car_30degrees.png, white_pickup_45degrees.png, (three different cars x 5 degree increments from 0 to 45 degrees) but that too, just feels like a hack.
Is there anyway to create a custom map overlay at a given desired orientation angle, so I can layer in the cars to show the city planner what's available? Many thanks.
I would draw and rotate in a <canvas> and then out that on.
EDIT:
place on canvas, ctx.rotate, c.toDataUrl(), and overlay that on your map.
I have a Bing Maps where i draw some polygons,
I would like to get the best view (zoom / center) to show all the polygons.
I've tried this, and that achieve what i want, but it make a lot of time.
var poly = new Microsoft.Maps.Polygon(allPoints);
var boundaries = Microsoft.Maps.LocationRect.fromLocations(poly.getLocations());
Thanks for help.
If you have a lot of points (tens of thousands) it will take time. Another way to do this is to loop through your array of location objects and get the min and max latitude and longitude values and then use those to create a location rect. However I doubt that would be much faster as that is basically what the fromLocations method does behind the scenes.
Also, rather than using getLocations, just use the allPoints value you have. Might save a bit of processing.
All that said, unless you are working with really large polygons (thousands of points), I can't see this being slow. Panning and zooming may be slow, but would likely be because the browser has to constantly update the position of the points for the polygon as the map moves. The more points your polygon has, the slower the browser will become.
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.