Convert leaflet map snippet to image

I'm nidhin picture I'm nidhin · Jun 5, 2014 · Viewed 14.7k times · Source

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

Ilja Zverev picture Ilja Zverev · Jun 6, 2014

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.