This is an interactive map showing the members of the discussion thread for the xkcd comic #1190: “Time”.
The official live instance runs at http://ottermap.chirpingmustard.com/.
All source code available in this package is, unless otherwise noted below, subject to the terms of the Mozilla Public License, v. 2.0. These terms are set forth in the LICENSE file.
The “Otter Track” graphic at src/js/map/marker.svg was designed by Katie M Westbrook from The Noun Project collection.
The “chirpingmustard.com logo” graphic at src/img/logo.svg was designed by Owen Evans and adapted by Aluísio Augusto Silva Gonçalves.
The files located under the vendor subdirectory are property of their respective owners. The licensing terms of this project do not apply to these files.
So, you want to play around with the code, maybe submit some patches, or even just see how this works, uh? Well, be welcome! If don't intend to contribute anything, just clone this repository and follow the instructions below. Otherwise, I hope you're familiar with The GitHub Way.
To build the map, you'll need Git (obviously), Node.js and the bundled npm package manager (you can also use Yarn).
After cloning this repository, run npm install and then npm run deps to fetch and build all dependencies.
There are a few choices for where user data is stored. These are set through the src/js/data/backend.ts, which looks like this:
export const dbUrl = "https://example.com/db"
export {default} from "./backend-module"
The first line sets the address of a remote database, which depends on the backend you choose; we'll refer to that as the database URL. The second line re-exports the API of a data backend, in this case named backend-module.
Currently, only one backend is maintained: pouchdb. It uses a local, in-browser database which can be synchronized with a CouchDB-compatible database by setting the database URL appropriately.
Now that we're all set, let's build the map proper. Run
npm run build
and once it finishes, fire up a web server into the build directory. Alternatively, npm start will start a server at port 8080 with live-reloading enabled.
You can also pass options to Webpack separating them with a --, for example:
npm build -- --watch # watch for and rebuild on changes
npm build -- -p # production/optimization mode