The first step after you upload your file is that the webpage sees you've done this, and reads through the file you've given it. All it does at this stage is convert it to a format called GeoJSON,
which is a data format that the Google Maps API can read. This then automatically displays your data on a Google Map that magically appears below the upload button, and shows it like a scribble on the map.
It's not done anything to the data yet, but it sets up a drawing tool that lets you draw the four corners of the pitch, storing that data and updating it whenever you click on a new point,
or drag one of the points around when the shape is complete. Once you click "Show me my heatmap!", it takes the coordinates you've drawn, and looks at how far away each coordinate is from the
southernmost one, to figure out which way round the pitch is orientated. It stores the values of each, so that we can calculate the length and width of the pitch for later. Once it's done that,
we just use a little bit of trigonometry to figure out how much to rotate the pitch corners and GPS data by. The coordinates from the GPX/TCX files are read by the computer with the help of tools that
pull coordinates out of the files, and rotated using the same function that the corners are rotated by. Using two graphing libraries, Matplotlib (which does most of the heavy lifting) and
Seaborn (which turns the data into a heatmap using something called a Kernel Density Estimate), we can then show the map data on a graph that looks like a rugby pitch, with pitch lines that
get added/subtracted depending on how big the pitch is in real life. The tools that pulled the coordinates out of the files so we could rotate the data also pull out useful information such as
total time, total distance, and max/average speed, so all that information (plus the pitch dimensions) gets put into a text box to the right of the graph, and all that gets converted into a .png image file.
Your data does not get stored by this application!! The file you upload is put into a temporary directory that gets destroyed every time the app is re-run, and isn't visible to me or
anyone else on the internet. Same with the graph: the image is created by the program, and saved in what's called a buffer, and it creates a code that tells the computer what the image needs to look like
which it then decodes to show you the picture. The image itself is not stored anywhere that a person could access, since the buffer is destroyed each time the program is completed.
This explanation is as simple as I could make it while keeping details in, but if you'd like to know more, or see how I did it in more detail,
check out the project on Github!