Export/download Mapbox maps with overlays and markers from HTML

Question

I want to build an HTML page where customers can build their personalized map. I used Mapbox to create this. There is an overlay on top of this map, and customers can also place markers on the map. But I'm struggling with two big problems:

1. How to get high-quality map images, including overlays and markers. Because I want to print them on a poster.

2. How can I implement this logic in my online store so that after the customer clicks "save" and makes a purchase, this image will be sent to my server so that I can print it.

https://www.cartida.de/map/ (The logic should be like this) https://midi-hazel-palm.glitch.me/ (currently looks like this)

I wrote this code to download the map:

function downloadMap() {
    // Get the canvas element that represents the current map view
    var canvas = map.getCanvas();

    // Create a temporary link element
    var link = document.createElement('a');
    link.download = 'map.png';
    link.href = canvas.toDataURL('image/png');

    // Add the link element to the document and click it to trigger the download
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

But overlays and markers are not added.

thank you all. We look forward to hearing from you.

I want high quality images from Mapbox API in Html format

Answer 1

Static Image API will allow you to accomplish this task. Here is a tutorial showing a very similar use case to you. The code should be very similar, you just need to make a few changes to the addLayerStyle function to create a SymbolLayer with custom tags instead of the LineLayer shown in the example.