Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
build initial commit Jul 31, 2018
config initial commit Jul 31, 2018
docs added og: meta tags. Aug 7, 2018
img_uploader initial commit Jul 31, 2018
src removed more unused code Dec 16, 2018
static removed unused file Dec 15, 2018
.babelrc initial commit Jul 31, 2018
.editorconfig initial commit Jul 31, 2018
.gitignore initial commit Jul 31, 2018
.postcssrc.js initial commit Jul 31, 2018
LICENSE initial commit Jul 31, 2018 added link to final product Aug 3, 2018 push to gh-pages Jul 31, 2018
index.html typo Aug 13, 2018
index.js initial commit Jul 31, 2018
package-lock.json added search control Aug 4, 2018
package.json added search control Aug 4, 2018

Map Print

Print a map of roads on a mug.


Here is how the final product look like:

Final product


I love maps and travels. Every time I grab a Vancouver mug - not only it is filled with hot coffee, it is also filled with warm memories.

vancouver mug

Now you too can make a mug from the roads network of a city that you've visited (or planning to visit). Or give it as a gift to those whom you care about. I hope you like what this project does.

I'm giving away the entire source code for free. Yet I think you should know: with every purchase coming from this project, Zazzle gives me a small revenue from the sale. So every purchase supports this project.

Your ideas and suggestions are more than welcomed!


The original map is rendered with mapbox-gl. When you find an area that you like and click the "Start" button - I send request to the OpenStreet Map with Overpass-Turbo API to fetch all the roads in a given bounding box.

These roads are then rendered with my own tiny-toy WebGL rendering engine w-gl. The engine is not ready for production use, but it can render millions of roads very quickly.

Virtualization is a common technique used by mapping software to reduce amount of things rendered on the screen and focus user's attention on major facets of a map. w-gl gives unique opportunity to see how road networks look without virtualization. I.e. every single road is rendered on the screen, regardless of the zoom level.

Sometimes it's just a single large blob of ink, but more often you'd see beautiful patterns on the screen.

That said, I wouldn't recommend zooming out too far. When I tried it - I had either OpenStreetMap failing my requests, or my browser running out of memory. You will see a warning on the screen if you zoom out too far.

Local Development

Get the package and its dependencies

git clone
npm install
cd map-print

And then start the local server:

npm start

This should open a server on http://localhost:8080



If you'd like to support the project - here is my Patreon page: 🧙