React-PDF and maplibre

[sylvain258]

Hi,

I am working on a mapping application and using MaplibreJS. I have a layer of points, and each element in this layer has a record containing several attributes (description, date, etc.). Among these, I have an export tool and would like to have a screenshot of the map in each file. I would like to know if this is possible.

Thanks

Sylvain Becquaert

[diegomura]

Hi Sylvain! This is mostly a MapLibre question rather than a react-pdf one, but here is how you can do it.

react-pdf cannot render a live map, since there is no browser environment inside the PDF. What you can do is capture a screenshot of the map as an image first, and then embed that image in your document.

MapLibre renders into a canvas, so you can grab it directly:

const map = new maplibregl.Map({
  container: "map",
  preserveDrawingBuffer: true, // needed, otherwise the canvas reads as blank
  // ...
});

const screenshot = map.getCanvas().toDataURL("image/png");

Then pass it to the regular Image component:

<Image src={screenshot} />

If you export many records, you can move the map for each point, wait for the idle event, capture the canvas, and collect one screenshot per record before rendering the document.

Hope that helps!