I have a functionality where I need to render a leaflet map with some Polygons and Markers. I was able to use domtoimage and was able to extract the entire map as an image using the following code
await new Promise(resolve => tileLayer.on("load", () => resolve()));
const dataURL = await domtoimage.toPng(mapElement, { width: map_data["size"]["x"], height: map_data["size"]["y"] });
const imgElement = document.createElement("img");
imgElement.src = dataURL;
document.body.appendChild(imgElement);
var link = document.createElement('a');
link.download = 'leaflet_plot_extract.png';
link.href = dataURL;
link.click();
Now we are adding heatmaps using WebGL Heatmap. This renders the Heatmaps as canvas within the map element. The domtoimage functionality fails to get the nested canvases and generate the image. The domtoimage documentation state the following for nested canvases:
if the DOM node you want to render includes a element with something drawn on it, it should be handled fine, unless the canvas is tainted - in this case rendering will rather not succeed.
Is there any way to generate an image out of the leaflet map with the heatmap data?
