Astun supply a whole range of Print Templates by default but you may wish to create your own. The default Print Templates may be found in the WebApps\WebService\print\templates folder and these are the ones that are displayed in the Templates selection in the Print Options for your Print. If you wish to create your own custom templates then these will need to reside in the WebApps\WebService\custom\print\templates folder.
Below we have the A4-portrait.html which is a Portrait template for printing to A4 size.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!doctype html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
<title>iShare Print To Scale</title>
<link type="text/css" rel="stylesheet" href="css/astun-common.css" />
<link type="text/css" rel="stylesheet" href="css/astun-portrait.css" />
<style type="text/css">
@page
{
size: A4 portrait;
margin: 0;
}
body
{
width: 190mm;
height: 277mm;
margin: 10mm 10mm 10mm 10mm;
}
#map
{
height: 240mm;
}
</style>
<link type="text/css" rel="stylesheet" href="css/astun-portrait.css" />
</head>
<body>
<div class="wrapper">
<div id="header"></div>
<div id="map">##map##
<div id="legend">##legend##</div>
</div>
<div id="footer">
<div class="fWrapper">
<div id="info">
<span id="title" class="ishare-edit-inline">##title.Enter map title##</span>
<p id="scale"><img src="images/NorthArrow.png" id="north" />Scale: <span class="ishare-scale">##scale.0##</span></p>
<p class="printinfo">Printed on: <span class="ishare-timestamp">##timestamp.1970-01-01##</span> by <span class="ishare-user">##user.user@domain##</span></p>
</div><!-- info -->
<div id="organization">
<img alt="Astun Technology logo" src="images/print-logo.svg" id="logo" />
<div id="copyright">© Astun Technology Ltd</div>
</div><!-- atCompany-->
</div><!-- fWrapper -->
</div><!-- footer -->
</div><!-- wrapper -->
</body>
</html> |
Generic User-Editable Elements
To create an HTML element in a template that can have its text content edited by users two things are needed:
- The
ishare-edit-inlineclass must be added to the element. - Content must contain
##name.default content##wherenamewill be used to label the text input field in the dialog anddefault contentis the text that will be used without user intervention. The ## characters are required.
Content replacement
All the content of the element will be replaced by the default (and then the user input) text. Any text entered outside the ## characters will be ignored E.g.:
| Code Block | ||
|---|---|---|
| ||
<span class="ishare-edit-inline">Here's some ##words.words on a page##, nice!</span> |
will be altered on loading to:
| Code Block | ||
|---|---|---|
| ||
<span class="ishare-edit-inline">words on a page</span> |
which will be replaced in turn by whatever the user enters into the Words input box in the dialog sidebar.
Custom text input
As suggested by the "inline" part of the class name, the only form element used for text entry is the single-line <input> element, so no line-breaks can be added to the text.
Validation
Currently no validation is possible on the elements, i.e. all custom inputs are text - restricting values to just numbers (for example) cannot be done.
Predefined Dynamic Elements
The plugin will replace elements given particular class names with generated values. As per user-editable elements, these must contain ##name.default content## tags, although the default content should always get replaced by dynamically generated text (if not, then something has gone wrong!).
| ID | Value | Notes |
|---|---|---|
| map | Map | Required for template to load |
| legend | Legend (when enabled in options) |
| Class | Value | Notes |
|---|---|---|
ishare-user | Current user and domain | Formatted as: user@domain |
ishare-timestamp | Current time | ISO datetime format: e.g. 2018-03-23 14:37:39 |
ishare-projection | The in-use map projection code | E.g.: EPSG:27700 |
ishare-attribution | Copyright taken from the base MapSource | |
ishare-scale | Current map scale | |
ishare-centre | Central co-ordinates of the current view of the map | Format for Units are rounded to a number of decimal places dependent on the projection units: 5 for degrees; 3 for miles and kilometres; and 0 for everything else. |
ishare-bbox | Corner co-ordinates of the current view of the map | Format for See |
Example
| Code Block | ||
|---|---|---|
| ||
<div id="info">
<span id="title" class="ishare-edit-inline">##title.Enter map title##</span>
<p id="scale"><img src="images/NorthArrow.png" id="north" />Scale: <span class="ishare-scale">##scale.0##</span></p>
<p class="printinfo">Printed on: <span class="ishare-timestamp">##timestamp.1970-01-01##</span> by <span class="ishare-user">##user.user@domain##</span></p>
<p class="printinfo">Projection: <span class="ishare-projection">##projection.Probably BNG##</span></p>
<p class="printinfo">Attribution: <span class="ishare-attribution">##attribution.Probably OS##</span></p>
<p class="printinfo">Centre: <span class="ishare-centre">##centre.0, 0##</span></p>
<p class="printinfo">Centre X: <span class="ishare-centre-x">##centreX.0##</span></p>
<p class="printinfo">Centre Y: <span class="ishare-centre-y">##centreY.0##</span></p>
<p class="printinfo">Bounding box: <span class="ishare-bbox">##bbox.0 0 0 0##</span></p>
<p class="printinfo">Minimum X: <span class="ishare-min-x">##minX.0##</span></p>
<p class="printinfo">Minimum Y: <span class="ishare-min-y">##minY.0##</span></p>
<p class="printinfo">Maximum X: <span class="ishare-max-x">##maxX.0##</span></p>
<p class="printinfo">Maximum Y: <span class="ishare-max-y">##maxY.0##</span></p>
</div><!-- info --> |