Programming a Forza-Horizon-Style Map Tracker - WhereHaveIBeen

 WhereHaveIBeen

WhereHaveIBeen is a web app I've been developing over the past several months. I've always been interested in exploring new parts of my city or state I haven't seen, but it's hard to do that if I can't figure out where I've been!

One of my favorite games of all time, Forza Horizon implemented a solution to this in a cool way. It's a driving game that involves a map that starts greyed out. As you drive each of the roads in the game, each road gets filled in with color, and a little progression calculation is done to tell you what percentage of the roads you've driven on so far.

WhereHaveIBeen is one part of a several part project to track all of the roads I've driven. Before I can begin explaining the parts I made, let me explain the tools I'm using.

OwnTracks is a GPS tracking service for iPhone and Android. The phone app basically works like Apple's FindMy. You can see where you are, where your friends are, that's it. The interesting part, is unlike FindMy, you host the server for the GPS data yourself. This means you can record all of your GPS history, and no one has the data but you! This is nice for security reasons, I don't super love the idea of hosting ALL of my location data ever on someone else's computer.

OSRM is the Open Source Routing Machine. This is a tool/server made by Project OSRM to calculate routes between GPS points. Ideally, I would simply get my phone to upload the location at least once per second, and I'd know exactly what roads I drove on. In reality, that eats up a ton of battery life and saves so many GPS points that the amount of data becomes hard to work with. As a solution, I use the OSRM route planner to estimate the route I took between 2 points. This allows me to save way fewer GPS points from my phone, but still get acceptable route estimates.

Now for the parts I've made. Let's start with the most obvious part, the frontend.

The Frontend (WhereHaveIBeen, The Web App Itself)

The most obvious component is the web app, found at tracker.romangarms.com. This is where most of my development has gone. This part shows a map, retrieves GPS data points from the backend, calls another part of the backend to calculate a route between the points using an OSRM server, then draws it on the map. 

The frontend gives you some friendly filters, you can choose to show a specific date range, show a different device if you have multiple uploading GPS points, and there's some settings to change how large the blue buffer is drawn around the road.
Lastly, you can change the OSRM server URL if you host your own, or you want to use the public demo server. The OSRM server I host only contains the data for the states of Washington, Oregon, and California.

The Backend (Flask Server, OwnTracks Server, OSRM Server)

The backend consists of several different parts! The most obvious part is the Flask server. This is the only one the web app directly communicates with. This doesn't do terribly much on its own other than serve webpages, but it calls the other servers and allows for a useful workaround:

The workaround: the OwnTracks server containing all of my GPS is HTTP only, not HTTPS. I tried to resolve this, but I hate everything to do with HTTPS so much that I coded a solution. Modern web browsers block you from "cross-origin requests". If WhereHaveIBeen is HTTPS, it won't let me talk to my HTTP OwnTracks server. As a solution, all of WhereHaveIBeen's requests to OwnTracks get forwarded through the Flask server, as the Flask server does not have these limitations. 

Additionally the server handles requests to the OSRM server for route calculation. All of this means I can keep the webpage pretty simple, all it does it make 1 simple request, the Flask server deals with all of the logistics, and then returns a blue buffered area to draw on the map with some info about the route.

Additional Features:



Beyond the basic features of showing your route on a map, WhereHaveIBeen also gives you some fun stats on your travels! The most obvious are distance traveled and area explored. I also added a little calculation for the percentage of the west coast you've explored so far. Once I get around to hosting more states with my OSRM server I'll change the west coast stat to something more universal. 

Lastly, there's some simple stats on the highest elevation and speed recorded. 


Future Plans:

I've got a few more features planned! Since I only just began programming this back in August, it hasn't been recording my driving history before then. Hopefully, I can create a tool to import Google Maps Timeline data, as many people have this data, but Google continues to make it harder and harder to view, as it's no longer accessible online.

You can follow along with my progress at:



Comments

Post a Comment

Popular posts from this blog

Hacking My Mazda Infotainment - MZD-AIO and CASDK

Image
How Does the 2014-2019 Mazda Connect Infotainment Work? The infotainment system in my 2015 Mazda 3 is incredibly strange. The entire infotainment "operating system" that you see is nothing more than the Opera web browser showing regular old HTML, JS, and CSS web pages. As strange as this solution is, this offers amazing possibilities that most other car infotainment systems don't allow for. Unlike my old Audi running QNX or something equally strange, the Mazda runs a regular version of Linux with a very normal web browser. In fact, it has become even easier to work with in recent year, due to the abundance of Arm-based phones and laptops, just like the Arm CPU in the Mazda Infotainment.  The infotainment system was made by a company called Johnson Controls International, or JCI rather than being made in-house by Mazda. JCI left a lot of development and debugging features even in the final versions of the OS that went out to consumer cars. A Brief History of Hacking the Ma...
Read more

Videopaks for the OP-Z

Image
Background In 2020, slightly before the pandemic, I purchased a small synthesizer called the OP-Z, manufactured by Teenage Engineering . It's little gray rectangle, about the size of a tv remote, with full synthesizer and sampler capabilities. It's a very nice, capable little device, but it lacks a screen, or any kind of display save for a bunch of RGB LEDS inside most of the buttons. Now, no display whatsoever is a little tricky on such a complicated device, so the solution to this was to use your phone or tablet as a display to show what's going on inside the synthesizer. The best part, is the app allows you to create your own visuals to sync up with your music. What I Made I'm not the best artist out there, so I looked for how to make a tool rather than just art with this platform called "Videolab." I wound up creating two different tools. The first one was a spinning drum, where each note you play on the synthesizer would create a ball, playing a sound eac...
Read more

The Nautilus - A Group Project

Image
  The Game The Nautilus is a game a friend of mine, Eden (found here on GitHub), started back over a year ago. It's gone through many revisions, eventually winding up as a web-based game that involves controlling a spaceship, navigating obstacles, and avoiding enemies.  Features Contains custom audio, perfectly looping music and background sounds, visual effects, a momentum storing and releasing mechanic, and more. Playable with WASD for movement, and the space bar to store, then subsequently release your momentum later for ultimate speed control.  The Project The source code can be found on GtiHub here , and is playable at the following link:  https://eden-annora.github.io/TheNautilus/ . Have fun! Please star the project, and report issues if you find some. Note that the game is early in development, so there will be some bugs.
Read more