Page Comparison

...

Code Block

language	xml
title	A4-portrait.html
collapse	true

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

Print Page Size

The page size is controlled by the @page entry. You may create whatever page size you like. The following is a list of the standard paper sizes A1 - A5. The body width & height entries should be less than the page size; by approximately 20mm.

Example Page Sizes

Page Size	Portrait Size	Landscape Size
A1	size: 594mm x 841mm;	size: 594mm 420mm;
A2	size: 420mm 594mm;	size: 594mm 420mm;
A3	size: 297mm x 420mm;	size: 420mm 297mm;
A4	size: 210mm 297mm;	size: 297mm 210mm;
A5	size: 148mm x 210mm;	2size: 10mm 148mm;

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 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
language xml
<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 Options	Map panel

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 will always be replaced by dynamically generated text (if not, then something has gone wrong!).

...

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

Example

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

...

Versions Compared

Old Version 15

New Version 16

Key