Printing a Rotated Leaflet Map and jsPDF
I am using a Rotate Map Leaflet plugin and I have the following issue when trying to print with the jsPDF plugin:
The map does not stay within the div container. It covers the entire PDF document. It also seems to do something weird with the map tiles.
This is how it should look:
If I print it with jsPDF, the PDF looks like:
If it is not rotated, it looks like this in the PDF:
Not matter what, the map does not stay within the bounds I want it to.
printing rotation leaflet
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
add a comment |
I am using a Rotate Map Leaflet plugin and I have the following issue when trying to print with the jsPDF plugin:
The map does not stay within the div container. It covers the entire PDF document. It also seems to do something weird with the map tiles.
This is how it should look:
If I print it with jsPDF, the PDF looks like:
If it is not rotated, it looks like this in the PDF:
Not matter what, the map does not stay within the bounds I want it to.
printing rotation leaflet
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
I found a simple way around this issue:
– Gary Whitcher
Nov 13 '18 at 15:16
add a comment |
I am using a Rotate Map Leaflet plugin and I have the following issue when trying to print with the jsPDF plugin:
The map does not stay within the div container. It covers the entire PDF document. It also seems to do something weird with the map tiles.
This is how it should look:
If I print it with jsPDF, the PDF looks like:
If it is not rotated, it looks like this in the PDF:
Not matter what, the map does not stay within the bounds I want it to.
printing rotation leaflet
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
I am using a Rotate Map Leaflet plugin and I have the following issue when trying to print with the jsPDF plugin:
The map does not stay within the div container. It covers the entire PDF document. It also seems to do something weird with the map tiles.
This is how it should look:
If I print it with jsPDF, the PDF looks like:
If it is not rotated, it looks like this in the PDF:
Not matter what, the map does not stay within the bounds I want it to.
printing rotation leaflet
printing rotation leaflet
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
edited Sep 21 '18 at 7:24
IvanSanchez
9,3911923
9,3911923
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
asked Sep 20 '18 at 22:44
Gary WhitcherGary Whitcher
135
135
I found a simple way around this issue:
– Gary Whitcher
Nov 13 '18 at 15:16
add a comment |
I found a simple way around this issue:
– Gary Whitcher
Nov 13 '18 at 15:16
I found a simple way around this issue:
– Gary Whitcher
Nov 13 '18 at 15:16
I found a simple way around this issue:
– Gary Whitcher
Nov 13 '18 at 15:16
add a comment |
1 Answer
1
active
oldest
votes
I used Javascript's localStorage.setItem() function to pass the innerHTML of the div containing the map and other information i wanted to print.
On another page I used Javascript's localStorage.getItem() to retreive the HTML from the previous page and added it to an existing div on this new page. I also added the css link and script calls to LeafletR.js.
I used the same code in the previous page to set up the map:
map = L.map('map',
{
' renderer': L.canvas(),
'center': [0, 0], 'zoom': 17,
'zoomControl': false,
'rotate': true,
'attributionControl': false,
'maxBounds': [
[25, -125],
[49.5, -66.5]
]
});
The map showed up exactly as it should, in the right location, and printed correctly using window.print function.
The window.print() function worked on original page but showed all controls on the page which I didn't want.
Don't know if this is the most eloquent way to get this done but it worked.
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52434326%2fprinting-a-rotated-leaflet-map-and-jspdf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I used Javascript's localStorage.setItem() function to pass the innerHTML of the div containing the map and other information i wanted to print.
On another page I used Javascript's localStorage.getItem() to retreive the HTML from the previous page and added it to an existing div on this new page. I also added the css link and script calls to LeafletR.js.
I used the same code in the previous page to set up the map:
map = L.map('map',
{
' renderer': L.canvas(),
'center': [0, 0], 'zoom': 17,
'zoomControl': false,
'rotate': true,
'attributionControl': false,
'maxBounds': [
[25, -125],
[49.5, -66.5]
]
});
The map showed up exactly as it should, in the right location, and printed correctly using window.print function.
The window.print() function worked on original page but showed all controls on the page which I didn't want.
Don't know if this is the most eloquent way to get this done but it worked.
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
add a comment |
I used Javascript's localStorage.setItem() function to pass the innerHTML of the div containing the map and other information i wanted to print.
On another page I used Javascript's localStorage.getItem() to retreive the HTML from the previous page and added it to an existing div on this new page. I also added the css link and script calls to LeafletR.js.
I used the same code in the previous page to set up the map:
map = L.map('map',
{
' renderer': L.canvas(),
'center': [0, 0], 'zoom': 17,
'zoomControl': false,
'rotate': true,
'attributionControl': false,
'maxBounds': [
[25, -125],
[49.5, -66.5]
]
});
The map showed up exactly as it should, in the right location, and printed correctly using window.print function.
The window.print() function worked on original page but showed all controls on the page which I didn't want.
Don't know if this is the most eloquent way to get this done but it worked.
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
add a comment |
I used Javascript's localStorage.setItem() function to pass the innerHTML of the div containing the map and other information i wanted to print.
On another page I used Javascript's localStorage.getItem() to retreive the HTML from the previous page and added it to an existing div on this new page. I also added the css link and script calls to LeafletR.js.
I used the same code in the previous page to set up the map:
map = L.map('map',
{
' renderer': L.canvas(),
'center': [0, 0], 'zoom': 17,
'zoomControl': false,
'rotate': true,
'attributionControl': false,
'maxBounds': [
[25, -125],
[49.5, -66.5]
]
});
The map showed up exactly as it should, in the right location, and printed correctly using window.print function.
The window.print() function worked on original page but showed all controls on the page which I didn't want.
Don't know if this is the most eloquent way to get this done but it worked.
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
I used Javascript's localStorage.setItem() function to pass the innerHTML of the div containing the map and other information i wanted to print.
On another page I used Javascript's localStorage.getItem() to retreive the HTML from the previous page and added it to an existing div on this new page. I also added the css link and script calls to LeafletR.js.
I used the same code in the previous page to set up the map:
map = L.map('map',
{
' renderer': L.canvas(),
'center': [0, 0], 'zoom': 17,
'zoomControl': false,
'rotate': true,
'attributionControl': false,
'maxBounds': [
[25, -125],
[49.5, -66.5]
]
});
The map showed up exactly as it should, in the right location, and printed correctly using window.print function.
The window.print() function worked on original page but showed all controls on the page which I didn't want.
Don't know if this is the most eloquent way to get this done but it worked.
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
answered Nov 13 '18 at 16:33
Gary WhitcherGary Whitcher
135
135
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52434326%2fprinting-a-rotated-leaflet-map-and-jspdf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I found a simple way around this issue:
– Gary Whitcher
Nov 13 '18 at 15:16