Interactive map of the members of the discussion thread for xkcd #1190
TypeScript HTML JavaScript CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
d.ts
src
vendor
.editorconfig
.gitattributes
.gitignore
.gitmodules
CHANGELOG.md
Jakefile.js
LICENSE
README.md
package.json
tsconfig.json
tslint.json
webpack.config.js
yarn.lock

README.md

Not AnOTTer Map

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/.

License

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.

Contributing, or: Running Your Own Instance

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.

Prerequisites

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.

Configuring

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.

Building and running

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