Occasionally we get requests to be able to print out OSM Americana or export the map as vector graphics for post-production prior to printing. By default, the MapLibre GL JS map doesn’t support either print or vector output because it blits directly to a WebGL canvas.
Implementation
We can easily enable printing by setting the preserveDrawingBuffer option when creating the map:
However, this option defaults to false for performance reasons, so we’d only want to enable it based on a URL query parameter. Or perhaps we could listen for the beforeprint event and respond by recreating the map with that option enabled. There’s plenty of ornamentation around the map that doesn’t make sense outside the context of the application, which would need to be removed at the same time.
Even with these optimizations, the map can only be printed as is, limited by the resolution supported by WebGL, the window size, and the customization options in the style specification. For more flexibility, we should install the maplibre-gl-export plugin, which lets the user choose a specific bbox and DPI and export the map as either PDF or SVG. I think this would solve the use cases for printing and also give non-programmers more agency to derive cool projects from the map.
Workaround
As a workaround, QGIS effectively features an alternative renderer implementation of the style specification, by translating a stylesheet such as our style.json into QGIS layers. Unfortunately, the translation is very lossy at the moment, particularly because of qgis/QGIS#57989 and also because we apply shields and other important features at runtime.
Occasionally we get requests to be able to print out OSM Americana or export the map as vector graphics for post-production prior to printing. By default, the MapLibre GL JS map doesn’t support either print or vector output because it blits directly to a WebGL canvas.
Implementation
We can easily enable printing by setting the
preserveDrawingBufferoption when creating the map:https://github.com/ZeLonewolf/openstreetmap-americana/blob/0d51830b14a4abe962d345aeb4cd7ff3edd118ec/src/americana.js#L35-L43
However, this option defaults to
falsefor performance reasons, so we’d only want to enable it based on a URL query parameter. Or perhaps we could listen for thebeforeprintevent and respond by recreating the map with that option enabled. There’s plenty of ornamentation around the map that doesn’t make sense outside the context of the application, which would need to be removed at the same time.Even with these optimizations, the map can only be printed as is, limited by the resolution supported by WebGL, the window size, and the customization options in the style specification. For more flexibility, we should install the maplibre-gl-export plugin, which lets the user choose a specific bbox and DPI and export the map as either PDF or SVG. I think this would solve the use cases for printing and also give non-programmers more agency to derive cool projects from the map.
Workaround
As a workaround, QGIS effectively features an alternative renderer implementation of the style specification, by translating a stylesheet such as our style.json into QGIS layers. Unfortunately, the translation is very lossy at the moment, particularly because of qgis/QGIS#57989 and also because we apply shields and other important features at runtime.
/ref #1139