MapTakeout: Web map to PDF

While researching webmap vector tile styling and rendering I decided to create a webmap printing service called MapTakeout that would offer professionally designed maps for home printing, taking advantage of the amazing Mapbox GL JS and Vector Style Specification. I decided to approach the problem by exporting the webmap canvas and its vector data into PDF layouts (using the jsPDF library) and PNG. This involved computations using window DPI, canvas size, map latitude, and tile size.

As for the question "Why print a webmap?", the specific approach leverages the speed and optimised delivery of global vector tiles to create fast printable output, even though webmap renderers are not at the level of a full-fledged GIS as of 2021. (And they may never be - the question is whether they are sufficient for the desired cartography.) Another problem is that Mapbox GL JS does not yet support projections other than Web Mercator, which is bad for printing.

Seeing that the primary aim was to promote my cartography and experiment with automatic map generation, the current website is a good start. I have, however, observed cartographic limitations with Mapbox vector tiles. This made me consider hosting an own geodatabase online focused on visualisation, bringing together different open sources and preprocessing to push towards better cartography. I am also considering ommiting front-end APIs all together and rendering using a cloud GIS solution.

The website itself was created using Next.js and the Material UI framework. No back-end development has been necessary so far. The great geocoding service Photon by Komoot has been used to power the location search bar and the approximate map title in the exported PDF.