Versions Compared

Old Version 7

changes.mady.by.user Kim Stimpson

Saved on

compared with

New Version Current

changes.mady.by.user Kim Stimpson

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

As all of the templates which exist in the \Web\print folder are displayed for selection we suggest that you copy the supplied templates to a backup folder before changing / renaming to suit your requirements.

Tip

There is a GetData request for retrieving the names of the .html files in the Web\Print folder. See Return a List of Print Templates for details.

Below we have the astun-A4-portrait.html which is a portrait template.

Code Block
titleastun-A4-portrait.html
<html><head>
                <title>iShare Print To Scale</title>
                <script type="text/javascript" src="../js/lib/prototype-1.6.0.3.js"></script>
                <script type="text/javascript" src="../FileIncluderJS.aspx"></script>
                <script type="text/javascript">Astun.JS.IncludeJS('print');</script>
                <!--[if IE]>
                        <link type="text/css" rel="stylesheet" href="../css/jQuery/astun/ui.all.css" />
                        <link type="text/css" rel="stylesheet" href="css/printtoscale-base.css" />
                        <link type="text/css" rel="stylesheet" media="print" href="css/printtoscale-print.css" />
                <![endif]-->
        <link type="text/css" rel="stylesheet" href="css/templates/astun-A4-common.css" />
        </head>
        <body>
        <div id="wrapper">
                        <div id="header"></div>
                        <div id="mapWrapper">
                                <div id="map"></div>
                                <div id="atLegends" class="atBottomRight"></div><!-- other possible css classes: atBottomLeft, atTopRight, atTopLeft (you can use 1 at a time) -->
                        </div>
                        <div id="footer">
                                <div id="atGenInfo">
                                        <h1 id="atPageTitle" class="isharemaps-edit-inline">iShare printing</h1>
                                        <p id="scale">Scale: 1:<span id="isharemaps-scale">undefined</span></p>
                                        <p class="printinfo">Printed on: <span id="isharemaps-print-date"></span></p>
                                </div>
                                <div id="atCompanyDetails">
                                        <img src="images/print-logo.jpg" id="logo" />
                                        <div id="copyright">&copy; Astun Technology Ltd</div>
                                </div>
                        </div>
        </div>
        </body>
</html>

...


We have supplied a couple of other sample templates in the Examples folder.
 Anchor
templatesettings
templatesettings
Template Settings
...
The code below overrides the default print settings. It can be added inside a script block in the head of a print template.
 Code Block
//Leave the properties which you want to change, you can safely remove the rest
var defaultSettings = {
    'marginTop' : 10, //mm
    'marginRight' : 10, //mm
    'marginBottom' : 10, //mm
    'marginLeft' : 10, //mm
    'pageSize' : 'A4', //full list http://doc.trolltech.com/4.6/qprinter.html#PageSize-enum
    'orientation' : 'portrait', //Possible values 'landscape' & 'portrait'
    'headerHeight' : 0, //mm
    'headerPadding' : 0, //mm
    'footerHeight' : 15, //mm
    'footerPadding' : 1 //mm
    'scales' : [ 250000, 125000, 50000, 25000, 10000, 5000, 2500, 1250, 1000, 500, 250, 125 ]
}
 

You may control the templates settings using the above defaultSettings. The values specified above are the default settings and as such may be removed entirely if you wish your template to use the defaults.
The ‘scales’ option above shows the default scales and as such may be removed altogether. To customise your own range of scales simply specify your own entries for the parameter. If a user enters a scale that is outside the defined range then the scale will default to the maximum or minimum entry as required.
When the map is selected the current scale will automatically be added to the selection as (Original 1:nnnn).
 Warning
  1. Due to some restrictions adjusting the height of the map element to correctly position it in the selected page size; you will need to adjust the header and footer height or padding using these options. PLEASE DO NOT USE CSS TO ADJUST HEIGHT OR PADDING OF HEADER AND FOOTER.
  2. At present the page size and print scale only generate accurate results when defined in Millimeters, as above, and not pixels etc.
JavaScript
 Code Block
<script type="text/javascript" src="../js/lib/prototype-1.6.0.3.js"></script>
        <script type="text/javascript" src="../FileIncluderJS.aspx"></script>
        <script>Astun.JS.IncludeJS('print');</script>
 Warning
No JavaScript files should be removed as the maps and will not work properly.
Defining a Style Sheet
 Code Block
<link type="text/css" rel="stylesheet" href="css/templates/astun-A4-common.css" />
We have provided one editable style sheet astun-A4-common.css with iShare which may be customised. We would suggest that you copy the supplied css before making your changes.
If you wish to use a different style sheet then please change this entry to reflect the style sheet you wish to use.
HTML Structure
...
titleExample
...
Allowed Page Sizes
Name
(to be included in code)
SizeNameSize
A0841mm x 1189mmB01000mm x 1414mm
A1594mm x 841mmB1707mm x 1000mm
A2420mm x 594mmB2500mm x 707mm
A3297mm x 420mmB3353mm x 500mm
A4210mm x 297mmB4250mm x 353mm
A5148mm x 210mmB5176mm x 250mm
A6105mm x 148mmB6125mm x 176mm
A774mm x 105mmB788mm x 125mm
A852mm x 74mmB862mm x 88mm
A937mm x 52mmB933mm x 62mm


B1031mm x 44mm




C5E163mm x 229mmLedger431.8mm x 279.4mm
Comm10E105mm x 241mmLegal215.9mm x 355.6mm
DLE110mm x 220mmLetter215.9mm x 279.4mm
Executive190.5mm x 254mmTabloid279.4mm x 431.8mm
Folio210mm x 330mm

Scales
The ‘scales’ option above shows the default scales and as such may be removed altogether. To customise your own range of scales simply specify your own entries for the parameter. If a user enters a scale that is outside the defined range then the scale will default to the maximum or minimum entry as required.
When the map is selected the current scale will automatically be added to the selection as (Original 1:nnnn).
 Warning
  1. Due to some restrictions adjusting the height of the map element to correctly position it in the selected page size; you will need to adjust the header and footer height or padding using these options. PLEASE DO NOT USE CSS TO ADJUST HEIGHT OR PADDING OF HEADER AND FOOTER.
  2. At present the page size and print scale only generate accurate results when defined in Millimeters, as above, and not pixels etc.
JavaScript
 Code Block
<script type="text/javascript" src="../js/lib/prototype-1.6.0.3.js"></script>
        <script   <h1 idtype="atPageTitletext/javascript" classsrc="isharemaps-edit-inline">iShare printing</h1>../FileIncluderJS.aspx"></script>
             <p id="scale">Scale: 1:<span id="isharemaps-scale">undefined</span></p>
            <p class="printinfo">Printed on: <span id="isharemaps-print-date"></span></p>
       </div>
       <div id="atCompanyDetails">
            <img src="images/print-logo.jpg" id="logo" />
            <div id="copyright">&copy; Astun Technology Ltd</div>
       </div>
    </div>
</div>
 
...
<script>Astun.JS.IncludeJS('print');</script>

 Warning
No JavaScript files should be removed as the maps and will not work properly.
Defining a Style Sheet
 Code Block
<link type="text/css" rel="stylesheet" href="css/templates/astun-A4-common.css" />
We have provided one editable style sheet astun-A4-common.css with iShare which may be customised. We would suggest that you copy the supplied css before making your changes.
If you wish to use a different style sheet then please change this entry to reflect the style sheet you wish to use.
HTML Structure
 Code Block
titleExample
<div id="wrapper">
    <div id="header"></div>
    <div id="mapWrapper">
        <div id="map"></div>
        <div id="atLegends" class="atBottomRight"></div><!-- other possible css classes: atBottomLeft, atTopRight, atTopLeft (you can use 1 at a time) -->
    </div>
    <div id="footer">
       <div id="atGenInfo">
            <h1 id="atPageTitle" class="isharemaps-edit-inline">iShare printing</h1>
            <p id="scale">Scale: 1:<span id="isharemaps-scale">undefined</span></p>
            <p class="printinfo">Printed on: <span id="isharemaps-print-date"></span></p>
       </div>
       <div id="atCompanyDetails">
            <img src="images/print-logo.jpg" id="logo" />
            <div id="copyright">&copy; Astun Technology Ltd</div>
       </div>
    </div>
</div>

You can change the order of the header or footer; change the position of the map element; add extra css classes to the elements to control using css.
 Warning
Please do not change or remove the the 'IDs' or 'CLASS' from any element as this can create problems.
Changing the Logo & Copyright
You may also change the logo but make sure the height of the logo image does not exceed the height of the footer/header provided in the Template Settings and of course the copyright text. Also please use .png or .jpg for the logo images, .gif images will not work. 
 Tip
The PDF generation does not support .gif images.
Using the iShare predefined Selectors
There are currently four iShare selectors that you may use within your print template. These selectors may be used as many times as required in the template, we have used three of these in the following example.
 
Image Added

SelectorDescription
isharemaps-edit-inline
This displays an editable box where the user can type any information they require to be printed.  This is designed to be used in line with other text or on its own. Here we have pre-populated the entry with iShare printing” but the user will be able to change this.
isharemaps-edit-block
This displays an editable block designed to be used on block elements such as paragraphs.
isharemaps-print-date
This displays the current date
isharemaps-scale
This displays the currently selected scale for the map

Displaying a Legend
 Status
colourYellow
title5.4.4+
From v5.4.4 a Display Legend check box will be included in the header of the default templates e.g. Image Added
If you wish to remove the Legend from the Print template then simply remove the atLegends div e.g.
 Code Block
<div id="atLegends" class="atBottomRight"></div><!-- other possible css classes: atBottomLeft, atTopRight, atTopLeft (you can use 1 at a time) -->
    </div>
 Warning
Please do not change or remove the the 'IDs' or 'CLASS' from any element as this can create problems.
Using the iShare predefined Selectors
There are currently four iShare selectors that you may use within your print template. These selectors may be used as many times as required in the template, we have used three of these in the above example.
 
SelectorDescriptionNumber
isharemaps-edit-inline
This displays an editable box where the user can type any information they require to be printed.  This is designed to be used in line with other text or on its own. Here we have pre-populated the entry with iShare printing” but the user will be able to change this.
1
isharemaps-edit-block
This displays an editable block designed to be used on block elements such as paragraphs.
not used in example
isharemaps-print-date
This displays the current date
2
isharemaps-scale
This displays the currently selected scale for the map
3
 
To see how the above selectors affect the print template please see the numbers in yellow in the following diagram:
Example Print to PDF from iShare GIS
Image Removed
The numbers in orange in the above diagram represent the following:
4. Clicking Generate PDF will generate the PDF file. This may take a little time depending upon the page size. For standard A4 it should not take more than a minute or two.
5. Select a template from the list of available templates.
6. Select the scale of the map from the pre-defined list.
7. Specify an exact scale by typing into the box provided.
8. Clicking Page setup will display the following dialog:
 
Page SetupImage Removed
    1. Page size: You can select any page size from the provided dropdown.
    2. Page orientation: You can select either portrait or landscape orientation.
    3. Page margins: You can increase or decrease the page margins on any side of the page by means of the easy-to-use sliders.
...
 a time) -->
    </div>
For large legends a style rule may need to be added to the end of the head element in the template html file.
 Code Block
<style type="text/css">#mapWrapper {
    overflow:hidden;
 }
</style>
Print the User Name on the PDF output
You may add the user account to the PDF output from iShare GIS e.g.
Image Added
Where ishare is the user name.
In order for this to happen you need to do the following:
  • Add the following line to the template.html immediately before the </head> entry.
 Code Block
<script type="text/javascript" src="../custom/js/printusername.js"></script>
Adding a North Arrow
One way of adding a North Arrow is to add the North Arrow image, along with the existing Page Title, Scale and Print information into a table e.g.
Image Added
This is what the code would look like:
 Code Block
titleAdding a North Arrow
<table border="0">
	<tr><td>
		<img src="images/northarrow.png" height="30">
	</td><td>
		<h1 id="atPageTitle" class="isharemaps-edit-inline">Enter map title</h1>
		<p id="scale">Scale: 1:<span id="isharemaps-scale">undefined</span></p>
		<p class="printinfo" style="font-size: 10px">Printed on: <span id="isharemaps-print-date"></span></p>
	</td></tr>
</table>