5.8.0+

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.

Any custom images that you wish to use in your Print Templates should reside in the WebApps\WebService\custom\print\templates\images folder and custom css in the WebApps\WebService\custom\print\templates\css folder.

Below we have the A4-portrait.html which is a Portrait template for printing to A4 size.

A4-portrait.html

<!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-inline class must be added to the element.
Content must contain ##name.default content## where name will be used to label the text input field in the dialog and default content is 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.:

<span class="ishare-edit-inline">Here's some ##words.words on a page##, nice!</span>

will be altered on loading to:

<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.

Bad Example

<span class="ishare-inline-edit">This document was produced for ##purpose.INSERT RECIPIENT##, please do not copy without permission.</span>

Any text you wish to display must be outside the <span> e.g.:

Good Example

This document was produced for <span class="ishare-inline-edit">##purpose.INSERT RECIPIENT##</span>, please do not copy without permission.

In the default A4 template above there is just the one

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 ishare-centre-x ishare-centre-y	Central co-ordinates of the current view of the map	Format for `ishare-centre`: `x, y` 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 ishare-min-x ishare-min-y ishare-max-x ishare-max-y	Corner co-ordinates of the current view of the map	Format for `ishare-bbox`: `min-x min-y max-x max-y` See `ishare-centre` for rounding

Example

In the above screenshot we have added Projection and Base Map Copyright to the basic A4 Template. To add any to your map just extract the details from the following examples:

 				<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 -->

Allowed Page Sizes

Creating your own Print Template V5.8.0