Export carte Leaflet en image URL: problème de décalage des polygones dessinés

Bonjour, tout d’abord je suis débutante en développement web, excusez-moi je n’utiliserai donc certainement pas les bons termes.

Je rencontre un problème pour un projet étudiant. Je dois exporter une carte leaflet, avec son fond (openstreetmap par exemple), et les différents éléments dessinés dessus (grâce à Draw de leaflet). J’ai besoin de cette URL car j’importe l’image avec l’URL dans un rapport pdf qui est crée avec une fonction. J’obtiens bien une URL avec le fond et les éléments, mais les éléments dessinés sont décalés par rapport à la visualisation sur la carte qu’on peut voir coté client.

Voici comment je récupère l’URL (dans une page PHP):

<script>
function captureMap() {
html2canvas(document.getElementById('maCarte'), { useCORS: true }).then(function (canvas) {
var imageUrl = canvas.toDataURL('image/png');

document.getElementById('url_carte').value = imageUrl;

// Soumet le formulaire après la capture de l'image
document.getElementById("formulaire").submit();
});
}

Je ne comprends pas pourquoi les polygones sont décalés, est-ce un problème d’origine de la carte ou autre ? Je vous remercie par avance pour votre aide.

Bonne journée.

Hello !

J’ai du mal à comprendre ce que PHP vient faire dans l’histoire…

Normalement Leaflet génère du SVG. Il faut effectivement une librairie pour générer une image bitmap à la place, comme html2canvas (mais il en existe qui sont spécialisées en SVG), à partir de là tu peux demander au navigateur de générer un bitmap.

Comment lances-tu la fonction captureMap que tu exposes ici ? La carte a-t-elle bien fini d’être générée au moment ce cette exécution ?

Aurais-tu par hasard du CSS appliqué à ta carte ou un élément proche qui pourrait provoquer ces décalages ?

Bonjour,

merci pour votre réponse, j’ai mal exprimé le problème désolé. Heureusement j’ai trouvé une solution avec mes camarades, peut-être que ça servira à d’autres personnes:

Lorsque la carte Leaflet est crée il faut rajouter renderer pour que les polygones dessiné s’affichent correctement au bon endroit:

L.map('maCarte', {zoomControl: false, renderer: L.canvas()})

Merci encore pour le retour !

Bonne journée !