Welcome Guest Search | Active Topics | Sign In | Register

SVG appears offset when using UrlConvert to generate PDF of leaflet.js map Options
Ryan
Posted: Tuesday, March 25, 2014 8:04:45 PM
Rank: Member
Groups: Member

Joined: 3/25/2014
Posts: 11
Hi,

We're trying out EO.Pdf and love it so far. One issue we've run into is that some SVG elements in maps (as used in leaflet.js) appear offset in the generated PDF. To see the problem in action, try the following:

Use the example London map with the big red circle here: http://leafletjs.com/examples/quick-start.html

Paste that url into the EO UrlToPdf "try it" page: http://www.essentialobjects.com/Products/EOPdf/UrlToPdf.aspx

You'll see that the big red circle in the pdf is offset from the original map.

Thanks for you help,
Ryan

eo_support
Posted: Wednesday, March 26, 2014 11:49:07 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Hi,

This is just to let you know that we are still working on this issue. We are able to reproduce the problem here, but we have not found out the root cause yet. I apologize for the delay and we will post again as soon as we have an update.

Thanks!
eo_support
Posted: Thursday, March 27, 2014 4:50:51 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Hi,

Please add the following code BEFORE include leaflet's JavaScript file:

Code: JavaScript
//Disable 3D support only if the page is running inside EO.Pdf
if (typeof(eopdf) != "undefined")
    window.L_DISABLE_3D = true;


Note that it is very important that this code appears before leaflet's JavaScript. For example, it can be like this:

Code: HTML/ASPX
<!-- Disable 3D rendering if page runs inside EO.Pdf -->
<script>
if (typeof(eopdf) != "undefined")
    window.L_DISABLE_3D = true;
</script>

<!-- Leaflet's main JS file -->
<script src="leaflet.js"></script>


After this the circles should work fine on the map. The reason is leaflet automatically uses translate3d transform for 2d translate transform on WebKit based browser (EO.Pdf is based on WebKit). It is not necessary to use translate3d since the transform is actually 2d (an X offset and a Y offset). The comment in leaflet's code indicates that using the 3d version will trigger hardware acceleration thus making rendering faster and smoother, which does make senses since all major browsers use GPU to do 3d transform for screen output. However it appears that EO.Pdf has problem supporting 3d transforms since we do not render to the screen. Fortunately leaflet has a flag L_DISABLE_3D that allows you to disable using 3d transforms. As such setting that flag should avoid the issue with EO.Pdf. The code also detects whether variable "eopdf" is defined so that it only disables 3d when the page runs inside EO.Pdf.

Hope this helps and we apologize for the delay. Please give it a try and let us know if it works for you.

Thanks!

Ryan
Posted: Monday, March 31, 2014 11:07:17 AM
Rank: Member
Groups: Member

Joined: 3/25/2014
Posts: 11
Yes, this works for us!

Thanks,
Ryan
eo_support
Posted: Monday, March 31, 2014 11:10:48 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,196
Great! Glad to hear that it works for you!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.