I have a map drawn using leaflet v1.8.0. The map is taken from ordinance survey map and is drawn using ordinance vector tile API. It includes drawings (polygons, circles etc) as well as markers. I need to get an image of the map to put inside a pdf. I am using angular and dotnet as backend. Also, is there any way to do this in the backend?
Things I've tried and their issues:
Leaflet-image plugin: Ordinance map is not visible. A black screen is shown. Drawings done on the map are only visible when setting preferCanvas property of leaflet map to true. But, this results in other issues when drawing polygons on the map because they have been configured as svg.
DomToImage library: Ordinance map is not visible. Does not support Safari.
What I've found is that the ordinance vector tile API uses the "canvas" tag for the tiles. The raster version of ordinance survey map works fine. Open street maps also work fine. What these two have in common is that they use "img" tags instead of a canvas tag. Maybe the issue because of which the map is not shown at all (black screen) is the canvas tag.
Edit: I tried another library called Html2Canvas. Fixed the black screen issue on it by setting WebGL's "preserveDrawingBuffer" property to true (default is false). However, now a new issue has emerged. The drawings done on the map are not at their original position. In the image generated by Html2Canvas, the drawings are moved slightly to the top-left.
