https://github.com/giscience/ol-print-layout-control
An extension of openlayers Control. It Helps the user to define a map area that fits to the desired output page format and orientation.
https://github.com/giscience/ol-print-layout-control
Last synced: about 1 year ago
JSON representation
An extension of openlayers Control. It Helps the user to define a map area that fits to the desired output page format and orientation.
- Host: GitHub
- URL: https://github.com/giscience/ol-print-layout-control
- Owner: GIScience
- License: mit
- Created: 2022-09-30T07:39:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-31T12:17:08.000Z (over 3 years ago)
- Last Synced: 2025-04-17T06:45:11.834Z (about 1 year ago)
- Language: TypeScript
- Size: 474 KB
- Stars: 6
- Watchers: 6
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](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 ol@^7.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
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);
```
## 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
### 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**
### getFormat
### setFormat
#### Parameters
* `format` **any**
### getMargin
Returns **[Margin](#margin)**
### setMargin
#### Parameters
* `margin` **[Margin](#margin)**
### 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} 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)}**
### 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)**
* `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)**
## Margin
**Extends OlObject**
The Margin Class to set paper margins in cm.
### Parameters
* `marginProps` **Partial<[MarginProps](#marginprops)>** (optional, default `{}`)
### getProperties
Returns **[MarginProps](#marginprops)**
### getTop
### setTop
#### Parameters
* `topMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**
### getBottom
### setBottom
#### Parameters
* `bottomMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**
### getLeft
### setLeft
#### Parameters
* `leftMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**
### getRight
### setRight
#### Parameters
* `rightMarginInCm` **[number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)**
# Related
Originally `ol-print-layout-control` has been developed for the
[SketchMapTool](https://github.com/GIScience/sketch-map-tool).