Versions Compared

Key

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

...

Astun supply a whole range of of Print Templates by default  which may be used by the HiDPI Print plugin for iShare GIS 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. 

...

Code Block
languagexml
titleA4-portrait.html
collapsetrue
<!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:

  1. The ishare-edit-inline class must be added to the element.
  2. Content must contain ##name.default content## where name will be used to label the text input field in the Print Options dialog (with the first letter capitalised) and default content is the text that will be used without user intervention. The ## characters are required.
    E.g. in the default A4 Template we have

    Code Block
    <span id="title" class="ishare-edit-inline">##title.Enter map title##</span>

    which shows as this under the Print Options:

    which the user may then change to whatever they want except, as the only form element used for text entry is the single-line <input> element, no line-breaks can be added to the text.

How this works

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. All the content of the element will be replaced by the default (and then the user input) text.

...

This will correctly display as "This document was produce for INSERT RECIPIENT, please do not copy without permission. The Text entry under Print Options will display as "Purpose: INSERT RECIPIENT".

Print OptionsMap panel
Image Modified
Image Modified

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

...

ClassValueNotes
ishare-user
Current user and domainFormatted as: user@domain
ishare-timestamp
Current timeISO datetime format: e.g. 2018-03-23 14:37:39 
ishare-projection
The in-use map projection codeE.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 information.

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:

...