# j-DrawZone

> Komponenta může vytvářet zónu (polygon). [OpenLayers](https://openlayers.org/) Knihovna s [OpenStreetMap](https://www.openstreetmap.org/) Mapové motory

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: cs
Content-SHA256: c93c233127d46ff24b6dc237df5e82482e4a540e78a033d284955c5f15d02262
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Komponenta může vytvářet zónu (polygon). [OpenLayers](https://openlayers.org/) Knihovna s [OpenStreetMap](https://www.openstreetmap.org/) Mapové motory


__Konfigurace__:

- `parent {String}` je prvek rodiče (předvolený: `undefined`)
- `height {Number}` pevná (minimální) výška (předvolená: `200`)
- Standardní barva pro polygon `color {String}` (předvolený: `#fcba03`)
- `zoom {Number}` Standardní zoomová úroveň (default zoom level): `11`)
- `readonly {Boolean}` umožňuje readonly režim (default: `false`)
- `stroke {Number}` šířka nárazu (předběžné: `2`)
- `radius {Number}` - rozměr rádio bodů v polygonu (předběžně: `7`)
- `center {String}` Standardní poloha mapy (default) `48.73702478789267,19.137712002562715`)
- `opacity {Number}` určuje transparentnost polygonu v procentech (default: `40`)
- `required {Boolean}` volitelné (předvolené: `false`)
- `filter {String}` volitelný, CSS filtr např. `filter:grayscale(90%) invert(100%)` (předvolený: `null`)
- __NEW__: `exec {String}` volitelné, odkaz na `function(value, component)` (bude spuštěn při změně hodnoty)

_Data-source_ musí obsahovat:

```js
{
    points: [{ lat: 48.75152530164132, lng: 19.13902142954625 }, { lat: 48.726826662905296, lng: 19.123238694044034 }, ...] // polygon points
    color: '#FD391A', // optional
    zoom: 13 // optional
}
```

__Metody__:

- `component.clear([draw])` čistí polygon `@draw {Boolean}` (předvolený: `false`)
- `component.move(lat, lng)` přemístí mapu do konkrétní polohy
- `component.export(opt, callback(base64))` exportuje data do obrazu
    - `opt.width {Number}` požadované
    - `opt.height {Number}` požadované
    - `opt.zoom {Number}` (předvolené číslo: `13`)
    - `opt.type {png|jpg}` (předvolené číslo: `png`)
    - `opt.quality {Number}` pouze pro JPEG
    - `opt.points {Array Number}`
    - `opt.color {String}` (předvolené číslo: `config.color`)
    - `opt.radius {Number}` (předvolené číslo: `config.radius`)
    - `opt.opacity {Number}` (předvolené číslo: `config.opacity`)

__Výstup__:

- Vlastnictví se rozšiřuje na `center { lat: Number, lng: Number }`

__Dobré vědět__:

- `double click` na vrstvách (stvořené body) odstraní vybrané body

Použijte ji s `<ui-component name="drawzone">`Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy `DEF.fallback` a) The Componentator Autor: Peter Sirka a Dodo Marton. zdroj: Componentator Výrobce je autorizován, MIT licence.

```html example.html
<style>
	body { margin: 0; padding: 0; }
</style>

<ui-component name="drawzone" path="map" config="parent:window;color:#FD391A;geolocation:0"></ui-component>

<script>
	var map = { 
		points: []
	};
</script>
```