I have a leaflet map with a large amount of geojson. I want to be able to export the map image as a png. I have tried the leaflet-image plugin, which exports the base map, and I have also tried (independently) the html2canvas library to output the contents of the map div to a png file.
Unfortunately, outputting using leaflet-image only shows the background layer (the map) and not any of the geojson regions, whereas the outputting the results using html2canvas shows the layers but not the background map.
I don't think the leaflet-image plugin will be viable, as it has too many constraints. It requires all layers to be rendered to the canvas, but in doing so, the performance dives - it doesn't appear to be able to handle so many geo regions. I also don't have much control over the server, and nodejs is not installed there.
html2canvas is far more promising. Using that and file-saver, I was able to output the full image and regions, as follows:
html2canvas(myMap, {
allowTaint:false,
useCORS: true,
width: 650,
height: 500,
}).then(canvas => {
canvas.toBlob((blob) => {
saveAs(blob, "my-map.png");
});
});
This worked brilliantly, except for one problem - the regions are rendering on the canvas clipped in the wrong position. That is, the region offset is wrong. Here is an example. The bottom and right of the map should be covered to the edge with coloured choropleth regions:
How do I get the regions to render correctly on the map, and not be clipped in the wrong place?
Edit: I had a look at an issue on the html2canvas site here which looked promising. Mine doesn't seem to have a transform problem as such, but there was someone that experienced the what I thought was a layer offset problem. I implemented their solution here:
function redraw() {
var lat_tmp = map.getCenter().lat;
var lng_tmp = map.getCenter().lng;
map.setView([-66.22149259832975, -1.142578125]);
setTimeout(function () {
waitForTilesToLoad()
}, 50000);
map.setView([lat_tmp, lng_tmp]);
}
but it also didn't work, so I'm still trying to solve this problem. It's not really a layer offset problem I'm experiencing, but a layer clipping problem.