0

i'm generating a pdf file from react page by capturing react components then converting them to image using dom-to-image library then putting them inside pdf ,it's working well , the problem is when having a lot of markers the code respond with request timeout error ,it appears that he is trying to capture every marker in the map and that causing the problem , so any solution to this problem or alternatives that may help ?

map image

error

Code

const commercesNode = document.getElementById("commerces");

const commerces = await domtoimage.toPng(commercesNode, {
  width: commercesNode.clientWidth * scale,
  height: commercesNode.clientHeight * scale,
  style: {
    transform: "scale(" + scale + ")",
    transformOrigin: "top left",
  },
});
imgarray.push({
  img: commerces,
  name: "commerces"
});
Mansouri GHASSEN
  • 1
  • 1
  • Please include your code and error text as *text*, not images, wherever possible. This is far more helpful because it lets people reproduce and examine your problem without having to re-type everything (or as much, at least). This is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) in SO terms. You can use code blocks to do that and add highlighting, which you can learn about in [comment formatting help](https://stackoverflow.com/editing-help#comment-formatting). – spkrtn May 18 '21 at 16:01
  • I would consider using [leaflet.canvas-markers](https://github.com/eJuke/Leaflet.Canvas-Markers), which renders the markers on a canvas instead of as individual DOM elements. There's even a [react wrapper](https://www.npmjs.com/package/react-leaflet-canvas-markers) for it, though I'm not sure if its up to speed with react-leaflet v3. In any case, I'd start with that and see if that helps your performance. – Seth Lutske May 18 '21 at 17:09
  • i will give it a try thanks for the information – Mansouri GHASSEN May 18 '21 at 17:12

0 Answers0