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?

1 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.