Display a fixed title on a Mapbox JS map AND have it export with the map (to image, etc)

Question

I've seen the posts for adding a title to the top of a Mapbox GL JS map using tags and HTML. These are great for on-screen titles, but they don't export with the map when using map.getCanvas().toDataURL('image/png').

Is there a way to have a title at the top of a map that stays on the map when dumping to an image?

Answer 1

Maybe there is a library that simply screenshots your screen? Then you would get all overlaying stuff over the map too.

My approach however, to add text and other elements around the map image I want to export is to use jsPDF. Obviously this exports it as a PDF rather than a PNG.

The following code will make an image of the map and add it to a PDF document:

const doc = new jsPDF();
const mapImgB64 = document.getElementById('mapContainer').getCanvas().toDataURL();
doc.addImage(mapImgB64, 'png', 10, 10, 190, 200);

Alternatively you could have other images that you add overlaying the map image in the PDF(such as a map legend) e.g. doc.addImage(legendImg, 'png', ...);.

This is a helpful stack overflow thread which is worth reading