10

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 ?

I'm nidhin
  • 2,592
  • 6
  • 36
  • 62

2 Answers2

7

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.

Ilja Zverev
  • 954
  • 4
  • 9
  • 2
    Thanks llja..I tried this.But its working only when there are no markers.when ever a marker is added to map, this error is shon in console 'Uncaught TypeError: Cannot read property '0' of undefined' – I'm nidhin Jun 09 '14 at 12:17
  • great..it worked.. :) marker size wasn't defined before and that was the reason for the error..Now its perfect..Thanks llja.. – I'm nidhin Jun 09 '14 at 13:54
  • Does this plugin has any dependencies like d3-queue? – Aamir Rizwan Mar 19 '19 at 13:01
  • It has dependencies (see `package.json`), but there is a pre-built minified version in the repository (see the docs) that you can use. – Ilja Zverev Mar 25 '19 at 13:44
6

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

orenw
  • 141
  • 1
  • 7