npm package: @giscience/ol-print-layout-control
Description: An extension of an OpenLayers Control. It Helps the user to define a map area that fits to the desired output page format and orientation.
Author: M. Auer
Latest version: 1.1.2

[![status: experimental](https://github.com/GIScience/badges/raw/master/status/experimental.svg)](https://github.com/GIScience/badges#experimental)

# ol-print-layout-control

Add this OpenLayers-Control to your OpenLayers-Map.

It Helps the user to define a map area that fits to the desired output page format and orientation.

Works with openlayers >= v7.0.0

https://user-images.githubusercontent.com/2814068/195790425-99978d1a-6619-47a9-93b5-8c642664af5e.mp4

# Usage

## Browser

Load `ol-print-layout-control.js` after OpenLayers.

It will be available as `new ol.control.PrintLayout()`

```html
<script src="https://unpkg.com/@giscience/ol-print-layout-control"></script>
<link rel="stylesheet" href="https://unpkg.com/@giscience/ol-print-layout-control/dist/ol-print-layout-control.css" />

<script>
const map = new ol.Map({
    target: 'map',
    view: new ol.View({
        center: ol.proj.fromLonLat([8.68, 49.41]),
        zoom: 15
    }),
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        })
    ]
});

const printLayoutControl = new ol.control.PrintLayout({
    format: PAPER_FORMAT.A3,
    orientation: ORIENTATION.LANDSCAPE,
    margin: {top: 2, bottom: 2, left: 2, right: 2}
});
map.addControl(printLayoutControl);
</script>
```

## Typescript and bundlers

Install the npm package: [@giscience/ol-print-layout-control](https://www.npmjs.com/package/@giscience/ol-print-layout-control)

After `import` from the module it will be available as `new PrintLayout()`.

    npm install @giscience/ol-print-layout-control

# Docs

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

### Table of Contents

*   [PrintLayout](#printlayout)
    *   [Parameters](#parameters)
    *   [getOrientation](#getorientation)
    *   [setOrientation](#setorientation)
        *   [Parameters](#parameters-1)
    *   [getFormat](#getformat)
    *   [setFormat](#setformat)
        *   [Parameters](#parameters-2)
    *   [getMargin](#getmargin)
    *   [setMargin](#setmargin)
        *   [Parameters](#parameters-3)
    *   [getBbox](#getbbox)
    *   [getBboxAsLonLat](#getbboxaslonlat)
    *   [getScaleDenominator](#getscaledenominator)
    *   [getPrintBoxSizeInDots](#getprintboxsizeindots)
        *   [Parameters](#parameters-4)
    *   [getPrintBoxSizeInMM](#getprintboxsizeinmm)
*   [MarginProps](#marginprops)
    *   [Properties](#properties)
*   [Margin](#margin)
    *   [Parameters](#parameters-5)
    *   [getProperties](#getproperties)
    *   [getTop](#gettop)
    *   [setTop](#settop)
        *   [Parameters](#parameters-6)
    *   [getBottom](#getbottom)
    *   [setBottom](#setbottom)
        *   [Parameters](#parameters-7)
    *   [getLeft](#getleft)
    *   [setLeft](#setleft)
        *   [Parameters](#parameters-8)
    *   [getRight](#getright)
    *   [setRight](#setright)
        *   [Parameters](#parameters-9)

## PrintLayout

**Extends Control**

The print-layout-control.
Add an instance of this to your OpenLayers Map.

### Parameters

*   `opt_options` **Options**  (optional, default `{}`)
*   `Options`  {format: 'A4', orientation: 'portrait', margin: {top: 2, bottom: 2, left: 2, right: 2}}] opt\_options

### getOrientation

### setOrientation

#### Parameters

*   `orientation` **ORIENTATION**&#x20;

### getFormat

### setFormat

#### Parameters

*   `format` **any**&#x20;

### getMargin

Returns **[Margin](#margin)**&#x20;

### setMargin

#### Parameters

*   `margin` **[Margin](#margin)**&#x20;

### getBbox

### getBboxAsLonLat

### getScaleDenominator

Computes the scale denominator for the printed map

### getPrintBoxSizeInDots

Get the print box size (width, height) in dots (px) for printing.

This is useful to determine the OGC-WMS params 'WIDTH' and 'HEIGHT'

#### Parameters

*   `dpi` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** {number} the desired print resolution in dots-per-inch (dpi) (optional, default `192`)

Returns **{width: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), height: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)}**&#x20;

### getPrintBoxSizeInMM

## MarginProps

Type: {top: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), bottom: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), left: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number), right: [number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)}

### Properties

*   `top` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;
*   `bottom` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;
*   `left` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;
*   `right` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;

## Margin

**Extends OlObject**

The Margin Class to set paper margins in cm.

### Parameters

*   `marginProps` **Partial<[MarginProps](#marginprops)>**  (optional, default `{}`)

### getProperties

Returns **[MarginProps](#marginprops)**&#x20;

### getTop

### setTop

#### Parameters

*   `topMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;

### getBottom

### setBottom

#### Parameters

*   `bottomMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;

### getLeft

### setLeft

#### Parameters

*   `leftMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;

### getRight

### setRight

#### Parameters

*   `rightMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**&#x20;

# Related

Originally `ol-print-layout-control` has been developed for the
[SketchMapTool](https://github.com/GIScience/sketch-map-tool).