This was a quick prototype created to visualize a series of GPS endpoints generated by a device and show it on a map. It is used for an internal analysis and may not be useful to anyone else at all.

Usage is fairly straight forward. This was intentionally built without a framework requiring a build step, so you simply need to load the HTML file. Assuming the paths have not changed, it should work. Tested in Chrome and Firefox.

Note The libraries are loaded over HTTPS. You should too. Don't deploy things to non-secure servers. That's a bad idea. Let's Encrypt will give you a free TLS certificate and Netlify will host it for free.

You will need to get a Google Maps API key to load the map. Once obtained, you can enter it into the API Key input. This will dynamically load in the Google Maps library and the map itself. For information about an API key, check Google Developers Documentation

The CSV data should be copied into a string and pasted into the <textarea>. The parsing assumes that the following fields are available:

• time or posted: The timestamp in a moment-parsable format

• lat or latitude: The latitude of the GPS point

• lng or longitude: The longitude of the GPS point

You can change the data at any time and choose to re-render the points.

The first GPS coordinate will be shown with a marker, and all of the points will be available in the <select>. You can choose to move to a different option in the select menu and the map will draw all of the points from the start to the selected index in order.

Why are you using double quotes instead of single quotes?

I spend most of my time writing Go and Typescript. When I work in React or React Native, I use Typescript. I prefer double quotes.

Speaking of React, why not use a framework?

This is a quick project done in a single setting simply to help analyze some data. Although I prefer React, it was simple enough of a scope that I didn't need the overhead of a build library, transpiler, or framework.

Why globals?

Mostly because it was a quick prototype. I may refactor it if I have some spare cycles.

For CSS and layouts, this uses Bootstrap 4. This requires the inclusion of jQuery and Popper.

For the CSV parsing, this uses jQuery CSV.

The Map uses the Google Maps library, which is dynamically loaded after the API key is entered.

MomentJS is used for date parsing.