Setting template or drawing layout to print map ol5 The 2019 Stack Overflow Developer Survey Results Are InLayer drawing orderGet Intersection when drawing lineOpenLayers-3 setting zoom so layers fit in map windowSetting Layer Visibility in OL3Layer specific popup template in openLayers 3Use map.on Click for different events (edit Drawing, Popup) on Openlayers mapHow to resize OpenLayers map before printOpenLayers 3 Print ExampleOpenlayers 4.6.5 Drawing not populating on mapPrint Openlayers WMS map with fixed scaling
Did the UK government pay "millions and millions of dollars" to try to snag Julian Assange?
Why couldn't they take pictures of a closer black hole?
How do you keep chess fun when your opponent constantly beats you?
Correct punctuation for showing a character's confusion
Short story: man watches girlfriend's spaceship entering a 'black hole' (?) forever
Is there a way to generate a uniformly distributed point on a sphere from a fixed amount of random real numbers?
For what reasons would an animal species NOT cross a *horizontal* land bridge?
How can I have a shield and a way of attacking with a ranged weapon at the same time?
Is an up-to-date browser secure on an out-of-date OS?
How can I add encounters in the Lost Mine of Phandelver campaign without giving PCs too much XP?
How to support a colleague who finds meetings extremely tiring?
Is Cinnamon a desktop environment or a window manager? (Or both?)
Pokemon Turn Based battle (Python)
How to type a long/em dash `—`
What is this business jet?
What do I do when my TA workload is more than expected?
How can I define good in a religion that claims no moral authority?
Finding the area between two curves with Integrate
Is bread bad for ducks?
How do I free up internal storage if I don't have any apps downloaded?
Why isn't the circumferential light around the M87 black hole's event horizon symmetric?
What do these terms in Caesar's Gallic Wars mean?
Can there be female White Walkers?
Is it ethical to upload a automatically generated paper to a non peer-reviewed site as part of a larger research?
Setting template or drawing layout to print map ol5
The 2019 Stack Overflow Developer Survey Results Are InLayer drawing orderGet Intersection when drawing lineOpenLayers-3 setting zoom so layers fit in map windowSetting Layer Visibility in OL3Layer specific popup template in openLayers 3Use map.on Click for different events (edit Drawing, Popup) on Openlayers mapHow to resize OpenLayers map before printOpenLayers 3 Print ExampleOpenlayers 4.6.5 Drawing not populating on mapPrint Openlayers WMS map with fixed scaling
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
I have created a portal which export map and then print. I just wanted to add template or draw layout in canvas for that pdf as shown in the picture below.
Here is my code:
//print map
var dims =
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
;
var exportElement = document.getElementById("export-pdf");
exportElement.addEventListener(
"click",
function(e)
exportElement.disabled = true;
document.body.style.cursor = "progress";
var format = document.getElementById("format").value;
var resolution = document.getElementById("resolution").value;
var buttonLabelElement = document.getElementById("button-label");
var label = buttonLabelElement.innerText;
var scale = 4000;
var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var dim = dims[format];
var width = Math.round((dim[0] * resolution) / 25.4);
var height = Math.round((dim[1] * resolution) / 25.4);
var size = map.getSize();
var extent = map.getView().calculateExtent(size);
var mapView = map.getView();
var currZoom = mapView.getZoom();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapResolutionAtEquator = mapView.getResolution();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
var pdf_name = dist + "_" + tahsil + "_" + village + ".pdf";
map.once("rendercomplete", function(event)
var canvas = event.context.canvas;
showText(event.context, "left-top", dist, tahsil, village);
drawLegend(event.context, "right-bottom");
drawNorthArrow(event.context, "right-top");
WriteScaletoCanvas(event);
var data = canvas.toDataURL("image/jpeg");
var pdf = new jsPDF("landscape", undefined, format);
pdf.addImage(data, "JPEG", 0, 0, dim[0], dim[1]);
pdf.save(pdf_name);
map.setSize(size);
// map.getView().fit(extent, size);
mapView.setZoom(currZoom);
exportElement.disabled = false;
document.body.style.cursor = "auto";
);
var printPointResolution = (scale * 25.4) / (resolution * 1000); // edit1: corrected
var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
var printZoom = mapView.getZoomForResolution(printResolutionAtEquator);
map.setSize([width, height]);
// mapView.fit(extent, (map.getSize()));
mapView.setZoom(printZoom);
,
false
);
For example:
How to create this layout pdf?
openlayers
add a comment |
I have created a portal which export map and then print. I just wanted to add template or draw layout in canvas for that pdf as shown in the picture below.
Here is my code:
//print map
var dims =
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
;
var exportElement = document.getElementById("export-pdf");
exportElement.addEventListener(
"click",
function(e)
exportElement.disabled = true;
document.body.style.cursor = "progress";
var format = document.getElementById("format").value;
var resolution = document.getElementById("resolution").value;
var buttonLabelElement = document.getElementById("button-label");
var label = buttonLabelElement.innerText;
var scale = 4000;
var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var dim = dims[format];
var width = Math.round((dim[0] * resolution) / 25.4);
var height = Math.round((dim[1] * resolution) / 25.4);
var size = map.getSize();
var extent = map.getView().calculateExtent(size);
var mapView = map.getView();
var currZoom = mapView.getZoom();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapResolutionAtEquator = mapView.getResolution();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
var pdf_name = dist + "_" + tahsil + "_" + village + ".pdf";
map.once("rendercomplete", function(event)
var canvas = event.context.canvas;
showText(event.context, "left-top", dist, tahsil, village);
drawLegend(event.context, "right-bottom");
drawNorthArrow(event.context, "right-top");
WriteScaletoCanvas(event);
var data = canvas.toDataURL("image/jpeg");
var pdf = new jsPDF("landscape", undefined, format);
pdf.addImage(data, "JPEG", 0, 0, dim[0], dim[1]);
pdf.save(pdf_name);
map.setSize(size);
// map.getView().fit(extent, size);
mapView.setZoom(currZoom);
exportElement.disabled = false;
document.body.style.cursor = "auto";
);
var printPointResolution = (scale * 25.4) / (resolution * 1000); // edit1: corrected
var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
var printZoom = mapView.getZoomForResolution(printResolutionAtEquator);
map.setSize([width, height]);
// mapView.fit(extent, (map.getSize()));
mapView.setZoom(printZoom);
,
false
);
For example:
How to create this layout pdf?
openlayers
Take a look at the ol-ext source code viglino.github.io/ol-ext There are controls for title, scale lines, attributions, graticule borders, compass, etc. on the canvas. Obviously not exactly what you want but you could use the same technique to produce your own.
– Mike
Apr 6 at 10:05
thanks Mike but i did not see scaling option like 1:4000 and so on for printing map.
– sanju verma
Apr 6 at 10:23
I don't think there is any other way than creating svg template and than drawing it to canvas before export to pdf, the same way you are now drawing legend, title, scale and compass.
– TomazicM
Apr 7 at 17:23
is it possible to set everything in template according to scale and then give print-preview option then print map in desired paper size as A0
– sanju verma
Apr 8 at 7:00
add a comment |
I have created a portal which export map and then print. I just wanted to add template or draw layout in canvas for that pdf as shown in the picture below.
Here is my code:
//print map
var dims =
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
;
var exportElement = document.getElementById("export-pdf");
exportElement.addEventListener(
"click",
function(e)
exportElement.disabled = true;
document.body.style.cursor = "progress";
var format = document.getElementById("format").value;
var resolution = document.getElementById("resolution").value;
var buttonLabelElement = document.getElementById("button-label");
var label = buttonLabelElement.innerText;
var scale = 4000;
var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var dim = dims[format];
var width = Math.round((dim[0] * resolution) / 25.4);
var height = Math.round((dim[1] * resolution) / 25.4);
var size = map.getSize();
var extent = map.getView().calculateExtent(size);
var mapView = map.getView();
var currZoom = mapView.getZoom();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapResolutionAtEquator = mapView.getResolution();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
var pdf_name = dist + "_" + tahsil + "_" + village + ".pdf";
map.once("rendercomplete", function(event)
var canvas = event.context.canvas;
showText(event.context, "left-top", dist, tahsil, village);
drawLegend(event.context, "right-bottom");
drawNorthArrow(event.context, "right-top");
WriteScaletoCanvas(event);
var data = canvas.toDataURL("image/jpeg");
var pdf = new jsPDF("landscape", undefined, format);
pdf.addImage(data, "JPEG", 0, 0, dim[0], dim[1]);
pdf.save(pdf_name);
map.setSize(size);
// map.getView().fit(extent, size);
mapView.setZoom(currZoom);
exportElement.disabled = false;
document.body.style.cursor = "auto";
);
var printPointResolution = (scale * 25.4) / (resolution * 1000); // edit1: corrected
var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
var printZoom = mapView.getZoomForResolution(printResolutionAtEquator);
map.setSize([width, height]);
// mapView.fit(extent, (map.getSize()));
mapView.setZoom(printZoom);
,
false
);
For example:
How to create this layout pdf?
openlayers
I have created a portal which export map and then print. I just wanted to add template or draw layout in canvas for that pdf as shown in the picture below.
Here is my code:
//print map
var dims =
a0: [1189, 841],
a1: [841, 594],
a2: [594, 420],
a3: [420, 297],
a4: [297, 210],
a5: [210, 148]
;
var exportElement = document.getElementById("export-pdf");
exportElement.addEventListener(
"click",
function(e)
exportElement.disabled = true;
document.body.style.cursor = "progress";
var format = document.getElementById("format").value;
var resolution = document.getElementById("resolution").value;
var buttonLabelElement = document.getElementById("button-label");
var label = buttonLabelElement.innerText;
var scale = 4000;
var mapView = map.getView();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var dim = dims[format];
var width = Math.round((dim[0] * resolution) / 25.4);
var height = Math.round((dim[1] * resolution) / 25.4);
var size = map.getSize();
var extent = map.getView().calculateExtent(size);
var mapView = map.getView();
var currZoom = mapView.getZoom();
var mapProjection = mapView.getProjection();
var mapResolutionAtEquator = mapView.getResolution();
var viewCenter = mapView.getCenter();
var mapResolutionAtEquator = mapView.getResolution();
var mapPointResolution = ol.proj.getPointResolution(
mapProjection,
mapResolutionAtEquator,
viewCenter
);
var mapResolutionFactor = mapResolutionAtEquator / mapPointResolution;
var pdf_name = dist + "_" + tahsil + "_" + village + ".pdf";
map.once("rendercomplete", function(event)
var canvas = event.context.canvas;
showText(event.context, "left-top", dist, tahsil, village);
drawLegend(event.context, "right-bottom");
drawNorthArrow(event.context, "right-top");
WriteScaletoCanvas(event);
var data = canvas.toDataURL("image/jpeg");
var pdf = new jsPDF("landscape", undefined, format);
pdf.addImage(data, "JPEG", 0, 0, dim[0], dim[1]);
pdf.save(pdf_name);
map.setSize(size);
// map.getView().fit(extent, size);
mapView.setZoom(currZoom);
exportElement.disabled = false;
document.body.style.cursor = "auto";
);
var printPointResolution = (scale * 25.4) / (resolution * 1000); // edit1: corrected
var printResolutionAtEquator = mapResolutionFactor * printPointResolution;
var printZoom = mapView.getZoomForResolution(printResolutionAtEquator);
map.setSize([width, height]);
// mapView.fit(extent, (map.getSize()));
mapView.setZoom(printZoom);
,
false
);
For example:
How to create this layout pdf?
openlayers
openlayers
edited Apr 6 at 13:53
Ian Turton♦
50.3k548118
50.3k548118
asked Apr 6 at 9:24
sanju vermasanju verma
408
408
Take a look at the ol-ext source code viglino.github.io/ol-ext There are controls for title, scale lines, attributions, graticule borders, compass, etc. on the canvas. Obviously not exactly what you want but you could use the same technique to produce your own.
– Mike
Apr 6 at 10:05
thanks Mike but i did not see scaling option like 1:4000 and so on for printing map.
– sanju verma
Apr 6 at 10:23
I don't think there is any other way than creating svg template and than drawing it to canvas before export to pdf, the same way you are now drawing legend, title, scale and compass.
– TomazicM
Apr 7 at 17:23
is it possible to set everything in template according to scale and then give print-preview option then print map in desired paper size as A0
– sanju verma
Apr 8 at 7:00
add a comment |
Take a look at the ol-ext source code viglino.github.io/ol-ext There are controls for title, scale lines, attributions, graticule borders, compass, etc. on the canvas. Obviously not exactly what you want but you could use the same technique to produce your own.
– Mike
Apr 6 at 10:05
thanks Mike but i did not see scaling option like 1:4000 and so on for printing map.
– sanju verma
Apr 6 at 10:23
I don't think there is any other way than creating svg template and than drawing it to canvas before export to pdf, the same way you are now drawing legend, title, scale and compass.
– TomazicM
Apr 7 at 17:23
is it possible to set everything in template according to scale and then give print-preview option then print map in desired paper size as A0
– sanju verma
Apr 8 at 7:00
Take a look at the ol-ext source code viglino.github.io/ol-ext There are controls for title, scale lines, attributions, graticule borders, compass, etc. on the canvas. Obviously not exactly what you want but you could use the same technique to produce your own.
– Mike
Apr 6 at 10:05
Take a look at the ol-ext source code viglino.github.io/ol-ext There are controls for title, scale lines, attributions, graticule borders, compass, etc. on the canvas. Obviously not exactly what you want but you could use the same technique to produce your own.
– Mike
Apr 6 at 10:05
thanks Mike but i did not see scaling option like 1:4000 and so on for printing map.
– sanju verma
Apr 6 at 10:23
thanks Mike but i did not see scaling option like 1:4000 and so on for printing map.
– sanju verma
Apr 6 at 10:23
I don't think there is any other way than creating svg template and than drawing it to canvas before export to pdf, the same way you are now drawing legend, title, scale and compass.
– TomazicM
Apr 7 at 17:23
I don't think there is any other way than creating svg template and than drawing it to canvas before export to pdf, the same way you are now drawing legend, title, scale and compass.
– TomazicM
Apr 7 at 17:23
is it possible to set everything in template according to scale and then give print-preview option then print map in desired paper size as A0
– sanju verma
Apr 8 at 7:00
is it possible to set everything in template according to scale and then give print-preview option then print map in desired paper size as A0
– sanju verma
Apr 8 at 7:00
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "79"
;
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: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
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%2fgis.stackexchange.com%2fquestions%2f317968%2fsetting-template-or-drawing-layout-to-print-map-ol5%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Geographic Information Systems Stack Exchange!
- 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%2fgis.stackexchange.com%2fquestions%2f317968%2fsetting-template-or-drawing-layout-to-print-map-ol5%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
Take a look at the ol-ext source code viglino.github.io/ol-ext There are controls for title, scale lines, attributions, graticule borders, compass, etc. on the canvas. Obviously not exactly what you want but you could use the same technique to produce your own.
– Mike
Apr 6 at 10:05
thanks Mike but i did not see scaling option like 1:4000 and so on for printing map.
– sanju verma
Apr 6 at 10:23
I don't think there is any other way than creating svg template and than drawing it to canvas before export to pdf, the same way you are now drawing legend, title, scale and compass.
– TomazicM
Apr 7 at 17:23
is it possible to set everything in template according to scale and then give print-preview option then print map in desired paper size as A0
– sanju verma
Apr 8 at 7:00