Displaying GPS Location on a Website
Dec 31, 2015
Android, Web Development, Websockets
Click here to see the final product
The goal of this project is to embed a map on my website showing the current GPS location of my smartphone.
Google does a decent job of tracking me with maps' timeline, but the data are not available as a public API. This is probably for the better, since it's such a serious privacy issue. My location used to be available to people in Google Plus circles, but has never been public.
I don't care if anyone with an internet connection knows where I am, so I decided to write an android app to send location data to a server, which displays them on a map. If you're impatient, you can see the final product at wheres.keithirwin.us. The code is available on my github (server and android).
I wanted the map to update in real time without refreshing the page, so I used socket.io emit the data via websockets. There is an implementation of socket.io for android, which made my job easy.
Here is a quick list of features on the android app:
- Auto-start on phone boot
- Setting to deactivate updates (so I can go off the grid)
- Settings to lower GPS accuracy and update interval (to save battery)
- Automatically lower lower accuracy and interval when phone has low battery
- A notification to show that updates are being sent and at what accuracy/interval
- Don't waste battery sending updates if nobody's looking at the map
The last one raises its own issue. If nobody visits the map for a week, but then someone visits when my phone is off, the location from a week ago will be transmitted, instead of my last location when the phone was on.
On the client-side, I have some neat features too, thanks to the excellent Google Maps API
- When traveling less than 5 mph, the map shows a little man.
- When traveling more than 5 mph, the maps shows a little truck, oriented to my bearing.
- When traveling more than 100 mph, the map shows a little airplane, oriented to my bearing.
- A google street view image of my current location and bearing is displayed.
This last one is particularly cool, if you ask me. So now, while I'm trucking down the road, you can see my truck moving along on a map, and the view from my windshield. Neat!
HTTPS support is forthcoming.
As a final note, this code is distributed under the MIT license, so feel free to try your own implementation. But be warned: it's only been tested on my own phone and my own server. I offer no warranty whatsoever. Use at your own risk!
Android package github
Node.js project github
Map of my current location