And what a whopper it is! This has been the second biggest change to Gps Tracker since it was first created. The design of the app has totally changed. It’s now using twitter bootstrap which has a style sheet that allows people to create responsive webpages. This means that it looks right on any size device such as a cell phone, tablet or desktop.
Not only that but Gps Tracker is now themed using bootswatch. This allows you to choose 17 different themes. You can switch themes by changing one single word. Here are 3 examples of the new theme, a light one:
a dark one:
and a cool blue one:
On the clients, I have switched back to using a GET request instead of a POST request. It’s just much easier for people to troubleshoot when they can paste a URL in the browser to test out the application.
Lastly, the actual functionality of the app has changed. When you first load the app, you will see all devices displayed. The one with the red marker is the most recent gps location. When you click on a marker or select a route from the dropdown box below the map, then you will be taken to that particular route and will be able to see the route’s history on the map. Clicking on a marker will allow you to see total distance traveled and speed.
Clicking on the Auto Refresh button will update the map once a minute automatically. That will work when viewing all the devices or when viewing a single route. To get back to viewing all the devices, tap on the View All button and you’ll be back to the main view. You can see that the two views have a parent-child relationship.
If you want to see the live test version of Gps Tracker, go here:
https://www.websmithing.com/gpstracker/displaymap.php
If you want to try it out on your android phone, download it from google play and then check it out on the display map above. I hope you enjoy the app, it’s a significant improvement over the past design.
i downloaded the program but i cant figure out how to execute the program
can someone help?
thank you
hi,
It doesn’t seem to work, when I am on the display map page, no map is displayed and neither are any routes, its just a box with a white space.
Hey Chay
It sounds like the database connection information is incorrect. Did you look at dbconnect.php?
n
Hello.
Sorry for my bad English.
I want to ask – how to do that would be shown on the map, only the last marker
Hey Alexy
That is how it currently works. When you first open the app, you see the last marker of each phone in the database:
https://www.websmithing.com/gpstracker/displaymap.php
When you click on a marker, then you see all of the history for that one phone.
n
Hi Nick!
I have a question! I’ve implemented your tool and it works like a charm!
My only problem with it, is that when the user is static, the map will show a big cluster of markers in the area.
I know I could deal with it with a leaflet cluster plugin, but for the purpose of my tool, it’s rather useless information, all these markers in the same location, as I only need to see the last location, and the routes taken. Meaning that I don’t need a spider tool to be able to access the info of every single marker in a cluster, as they are all in the same location.
Being so, I’ve thought about 2 approaches to the issue:
Either I:
-Mess with the mobile client and somehow don’t store locations if they are similar to the last one (radius to be defined)
Or:
-In the client side of the web, I compare markers by lat/long, choose only the relevant ones (only latest marker per 100m2 maybe?), add them to an array and display said array in the map.
What would you say makes more sense? I’ve some JS experience, but 0 android/ios knowledge…
Hey Eric
I would definitely try to solve your problem client-side if that is the area you are most comfortable with. Personally, I would go with one of the leaflet clustering plugins but if you instead want to minimize the number of markers, then using the haversine formula to minimize markers would be one way. I would create an array and put the first (lat/lng) point in that array, then I would compare each new point to all the points in the array by simply iterating through the array. If the point was greater than 100 meters away from any of the points, then I would add that point to the array and then check the next point. At least that works in my head…
n
I’m getting there!! : ))
http://stackoverflow.com/questions/32336787/how-to-compare-object-in-an-array-before-pushing-it
hkjklhljk;