Printing maps in the browser with InkMap
2021-09-29, 10:00–10:30, Humahuaca

Printing web maps is a challenge in terms of performance, precision and flexibility. InkMap aims to conquer this challenge on the front-end. As an open source Javascript library, it facilitates usage and provides fast results without limiting browser performance. Under the hood InkMap makes use of other open source libraries and modern web technologies.


Most solutions for printing maps on the web are based on a backend component. They provide a solid and scalable printing engine, but reach their limitations when it comes to flexibility and user interaction, that are usually constrained by static templates.

Front end solutions have the potential to enhance user experience and make print compositions possible that can be customized via gestures like drag and drop. While they have traditionally been limited in performance and the data volume they can process, InkMap wants to eliminate this bottleneck with modern web technologies, that allow multi threading inside the browser.

The library uses OpenLayers internally to render the printed map.This means that the library can handle many different formats, both for raster or vector data, and rely on a very performant rendering engine. A JSON specification including layers, resolution, scale, etc. defines a print job and serves as input to the print process. As a result, InkMap generates a map in PNG format, that can easily be embedded in a PDF.

Inkmap delegates the print job to a service worker. This enables to run the asynchronous task in multiple threads and speed up performance. The application currently in use stays available to the user without affecting its performance. It also implies that multiple print jobs can run in parallel and their progresses can be tracked. The application can even be shut down as long as the browser keeps running. The service worker makes use of the OffscreenCanvas API to print the canvas outside the window. While service workers are widely supported in modern web browsers today, this cannot yet be said for the OffscreenCanvas API. For this case InkMap uses a fallback, to run in the main thread.

The presentation will provide an overview of used technologies, the library’s API and configuration. It will demonstrate the integration of InkMap into an existing web mapping library and application on a use case of the French ministry of the ecological transition, which not least was the initiator of the project.


Authors and Affiliations

Tobias Kohr, Olivier Guyot (1)

(1) Camptocamp

Track

Software

Topic

Software/Project development

Level

2 - Basic. General basic knowledge is required.

Language of the Presentation

English

Geospatial developer at Camptocamp, contributor to GeoNetwork and OpenLayers, loves coding pretty stuff, happy to be here!

Geospatial developer at Camptocamp, big fan of Latin America and would have loved to return to Buenos Aires in person.