Se ha puesto un mapa de Open Street Map y se han dibujado objetos sobre el mismo en un hecho con leaflet, la pantalla muestra correctamente el mapa y los objetos dibujados, pero cuando quiero convertir el en una imagen .png para descargarla en una carpeta del servidor la imagen muestra un desplazamiento de los objetos dibujados sobre el mapa, podrian ayudarme a saber porque esta sucediendo esto si simplemente quiero crear un .png de la imagen que se muestra correctamente en pantalla, es importante mencionar que cuando vuelvo a llamar el mapa, se obtiene correctamente sin el desplazamiento, solo sucede en el .png, gracias por su ayuda, les comparto el código:
<script>
function guardarMapa() {
drawnItems.getBounds();
var todosJSON = [];
drawnItems.eachLayer(function(layer) {
var type1 = layer.options.type;
var coordinates = layer.toGeoJSON().geometry.coordinates;
var area = L.GeometryUtil.geodesicArea(layer._defaultShape());
var areaLegible = L.GeometryUtil.readableArea(area, true);
var objetoJSON = {
"layerType": type1,
"coordinates": coordinates
};
todosJSON.push(objetoJSON);
});
var zoom = map.getZoom();
var center = map.getCenter()
var zoomMapaJSON = {
"zoom": zoom,
"centro": center
};
todosJSON.push(zoomMapaJSON);
var todosJSONString = JSON.stringify(todosJSON);
html2canvas(document.getElementById('map'), {
useCORS: true
}).then(canvas => {document.body.appendChild(canvas)
var imagenBase64 = canvas.toDataURL("image/png");
var xhr = new XMLHttpRequest();
xhr.open("POST", "guardar_mapa.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data =
"&clado=" + encodeURIComponent("<?php echo $foldo; ?>") +
"&imagen=" + encodeURIComponent(imagenBase64);
xhr.send(data);
});
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var response = xhr.responseText;}};
}
</script>