Convert leaflet map snippet to image

Question

I need to export a page that contain leaflet map to pdf. I tried to convert the map container to image but thats not working perfectly. The code I used is here http://jsfiddle.net/Sq7hg/2/

html2canvas([document.getElementById('mydiv')], {
onrendered: function (canvas) {
    document.getElementById('canvas').appendChild(canvas);
    var data = canvas.toDataURL('image/png');
    console.log(data)
    // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

    var image = new Image();
    image.src = data;
    document.getElementById('image').appendChild(image);
}

});

This code not working perfectly for leaflet map.How can I implement this ?

Answer 1

I think you'd better off using leaflet-image plugin, which does exactly that. There is a demo linked from the header. The main catch is forcing Leaflet to use canvas for rendering.

Answer 2

I had a problem to export the leaflet map with special markers, I tried to use the plugin leaflet-image but it works only with standard markers.

At the end I created the map in the server (Node).

I wrote a post, How to export the leaflet map to pdf, see link below

Export leaflet map to pdf report