Ich möchte eine HTML-Seite erstellen, auf der Kunden ihre personalisierte Karte erstellen können. Ich habe Mapbox verwendet, um dies zu erstellen. Über dieser Karte befindet sich ein Overlay, und Kunden können auch Markierungen auf der Karte platzieren. Aber ich kämpfe mit zwei großen Problemen:

1. So erhalten Sie hochwertige Kartenbilder, einschließlich Overlays und Markierungen. Weil ich sie auf ein Poster drucken möchte.

2. Wie kann ich diese Logik in meinem Online-Shop implementieren, damit dieses Bild, nachdem der Kunde auf „Speichern“ klickt und einen Kauf tätigt, an meinen Server gesendet wird, damit ich es ausdrucken kann?

https://www.cartida.de/map/ (Die Logik sollte so sein) https://midi-hazel-palm.glitch.me/ (sieht derzeit so aus)

Ich habe diesen Code geschrieben, um die Karte herunterzuladen:

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);
  }

Überlagerungen und Markierungen werden jedoch nicht hinzugefügt.

Vielen Dank. Wir freuen uns von Ihnen zu hören.

Ich möchte qualitativ hochwertige Bilder der Mapbox API im HTML-Format