Handling large amounts of markers on google maps api v3 - javascript

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.

Related

Leaflet Drawing a trail based on markers previous path

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).

Can Vehicle Tracking be done without using Google Maps API?

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

Car tracking on map

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.

Google Places API LatLng Query

I have an array of places in LatLng, across the US. I've pulled my current location, and I want to display the places in that aforementioned list, that are within a certain distance of my current location. This is somewhat like a places radar search, except I already have my locations, I'm just trying to display relevant ones. Any advice?
Not tied to google maps API, but it is free with a high limit of requests
I've been exploring using, but I can't figure out how to do what I'm trying to.
link 1
link 2
https://developers.google.com/maps/documentation/distance-matrix/intro?hl=en
There are plenty of Map APIs that allow you to enter two locations and calculate the distance between them. It is my understanding that LatLngs are an accepted format for the points you are calculating between.

Efficiently searching through a vincinity of a route using Open StreetMap and Leaflet Routing Machine

I'm trying to find a set of routes (or rather simple pairs (Point_1, Point_2) from a given set) that are within n km from the route i have already drawn. I have drawn said route using Leaflet Routing Api, and the set is built from pairs of (Langitude, Longtitude).
My problem is I don't want to search in radius of a point on the route but in n km from a route line on each side (see pic below). Let's assume that the red line is my route and black lines define the search area.
I'm struggling with coming up with some kind of efficiently doing that, rather than searching in circle each interval. Especially since both Point_1 and Point_2 must be in the search area.

Categories

Resources