PDF templates

Results of a FindIT search can be downloaded as a PDF document. The PDF document typically contains a front page, results pages and a back page.

These documents can be styled or customised using FindIT templates (comprising of HTML with vue components.) A default template is included with WebMap installation and can be used with no modifications.

Like any other HTML file, the template contains

HEAD which sets up the styling of the overall PDF
BODY which displays the components.

The default template head is the following:

Copy

<head>
    <meta charset="utf-8" />
    <style>
        @page {
            size: A4 portrait;
        }
        body {
            width:   210mm;
            height:  297mm;
            margin:0px;
        }
        tbody {
            page-break-inside: avoid;
        }
        thead {
            display: table-header-group;
        }
        .page-break-after{
            page-break-after: always;
        }
        .page-break-before{
            page-break-before: always;
        }
        .page-break-inside{
            page-break-inside: avoid;
        }
        .img-contain{
            object-fit: contain;
        }
    </style>
</head>

Here the user can set

Size of the page (i.e A4)
Size of the body as well as any margins
Page break (By default the break is always set to page-break-after on the results pages component; this means each set of FindIT results is started on a new page)
.img-contain is used to ensure images keep their ratio while remaining inside their bounding boxes.

The body of the default template contains three components – front page, results page(s) and backpage.

Copy

<body>
    <div id="app">
        <header>
            <img width="353" height="100" src="https://www.cadcorp.com/wp-content/uploads/2023/01/cropped-Cadcorp-new-Logo_354x100resized.png">
        </header>
        <div>
            <div id="frontPage" class="page-break-after">
                <h1 style="text-align:center">{{userTitle}}</h1>
                <p style="padding-left:15mm">{{searchDate}}</p>
                <p style="padding-left:15mm">{{searchTime}}</p>
                <p style="padding-left:15mm">{{polygonId}}</p>
                <p style="padding-left:15mm">Number of results: {{total}}</p>

                <img height="300" width="500" :src="contextImage" class="img-contain"/>
                <p>{{userText}}</p>
            </div>

            <div class="page-break-after" v-for="result in results">

                <h2>{{result.name}} Features Found: {{result.features.length}}</h2>
                <img height="300" width="500" :src="result.image" class="img-contain"/>
                <div class="page-break-inside" v-for="feature in result.features">
                    <h3>{{feature.id.name}}: {{feature.id.value}}</h3>
                    <table>
                        <tr v-for="attribute in feature.attributes" >
                            <td>{{attribute.name}}</td>
                            <td>{{attribute.value}}</td>
                        </tr>

                    </table>
                </div>

            </div>
            <div id="backPage" class="page-break-before">
                <h1 style="text-align:center">This page intentionally left blank</h1>
            </div>
        </div>
    </div>
</body>

1. Front Page

By default this contains an image of the Cadcorp logo and a few properties that are extracted from the results. Users can add their own content here as a header including a custom logo, title, text or timestamp. Users can even remove this content altogether from the front page or opt to display it elsewhere in the PDF.

Field	Description
<img width="353" height="100" src="https://www.cadcorp.com/wp-content/uploads/2023/01/cropped-Cadcorp-new-Logo_354x100resized.png">	Component which displays an image. The height and width should match the chosen image.
<h1 style="text-align:center">{{userTitle}}</h1>	Title chosen by the user. This component should be removed from the template if “Allow User Title” is disabled.
<p style="padding-left:15mm">{{searchDate}}</p>	Date of Search
<p style="padding-left:15mm">{{searchTime}}</p>	Time of Search
<p style="padding-left:15mm">{{polygonId}}</p>	ID of the search. This matches results that have been sent to a database and can therefore be used to match these together or save search results.
<p style="padding-left:15mm">Number of results: {{total}}</p>	Total number of results found.
<img height="300" width="500" :src="contextImage" class="img-contain"/>	Displays the “contextImage”. This image is a screen grab of the current map view at the time of the FindIT search.
<p>{{userText}}</p>	Text chosen by user. This component should be removed from the template if “Allow User Text” has been disabled.

2. Results Page

Vue list rendering is used to display the results of a FindIT query.

Field	Description
<div class="page-break-after" v-for="result in results"> {{result.name}}	Displays property “name” of the result. Users can choose other properties to display based on their schema columns in their FindIT SWD.
Features Found: {{result.features.length}}	Finds the features property of the result and displays the length component. In essence this counts the number of results.
<img height="300" width="500" :src="result.image" class="img-contain"/>	Defines how the image component is displayed.
<div class="page-break-inside" v-for="feature in result.features">	Adds a page break between each result.
{{feature.id.name}}	Name of the found layer.
{{feature.id.value}}	Number of features found within the layer.
<table> <tr v-for="attribute in feature.attributes" > <td {{attribute.name}}</td> <td>{{attribute.value}}</td> </tr> </table>	A table to display the name and value of the attributes. These are the schema column names and results of each feature in the layer.

Note: When the PDF is created, your sample image will be replaced with an image of the map. This will be the current view at the time of the search. The width of the image will be maintained, however the height will change as the aspect ratio of the map image will be preserved.

3. backpage.docx

This is the template for the back page. It is optional and has no placeholders in it. If needed, you can include any text or image of your choice.

The finished PDF will have at least 2 pages, the front page and a results page. Each layer with results on it will start a new results page.

Include copyright statements

It is easy to add copyright statements to search results generated in FindIT (both online and printed).

You can also include hyperlinks to other websites in your copyright statement.