Exporter/télécharger des cartes Mapbox avec superpositions et marqueurs à partir de HTML

Question

Je souhaite créer une page HTML sur laquelle les clients peuvent créer leur carte personnalisée. J'ai utilisé Mapbox pour créer ceci. Il y a une superposition au-dessus de cette carte et les clients peuvent également placer des marqueurs sur la carte. Mais je suis aux prises avec deux gros problèmes :

1. Comment obtenir des images cartographiques de haute qualité, y compris des superpositions et des marqueurs. Parce que je veux les imprimer sur une affiche.

2. Comment puis-je mettre en œuvre cette logique dans ma boutique en ligne afin qu'après que le client ait cliqué sur "Enregistrer" et effectué un achat, cette image soit envoyée à mon serveur afin que je puisse l'imprimer.

https://www.cartida.de/map/ (La logique devrait être comme ceci) https://midi-hazel-palm.glitch.me/ (ressemble actuellement à ceci)

J'ai écrit ce code pour télécharger la carte :

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

Mais les superpositions et les marqueurs ne sont pas ajoutés.

Merci. Nous avons hâte d'avoir de tes nouvelles.

Je veux des images de haute qualité de l'API Mapbox au format HTML

Answer 1

Static Image API vous permettra d'accomplir cette tâche. Voici un tutoriel montrant un cas d'utilisation très similaire au vôtre. Le code devrait être très similaire, il vous suffit d'apporter quelques modifications à la fonction addLayerStyle pour créer un SymbolLayer avec un marqueur personnalisé au lieu du LineLayer montré dans l'exemple.