Here is what I'm trying to accomplish:
I am working on a simple map that renders some GeoJSON data on a map.
I am currently using react-map-gl to render a MapLibre map.
All the GeoJSON data renders properly, and I have developed a custom legend overlay as well.
I tried using https://github.com/watergis/maplibre-gl-export to export/print an image of the map, but that does not fulfill my requirements.
I am now attempting to leverage the native window.print(), which kind of works great.
All my divs containing the map and such resize properly, however I am unable to re-.fit() the map so it shows up properly on paper (it seems to crop from top-left, keeping position and zoom levels)
Here are some images to hopefully explain it better:
This is how it looks on the browser:
But when I print it:
Any ideas on how to control the map before the printing?
I'm thinking the only solution is to put the application in a pre-print mode, where I resize the container div to look like a piece of paper (dimensions wise), readjust the map there, and then triggering the print.
On that now, is there a way to trigger the system print dialog directly? That might be a stretch, but the extra paper sizes there would be nice to have.
