# j-DrawZone

> Die Komponente kann eine Zone (Polygon) zeichnen. Diese Komponente verwendet die [OpenLayers](https://openlayers.org/)-Bibliothek mit der [OpenStreetMap](https://www.openstreetmap.org/)-Karten-Engine.

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

Die Komponente kann eine Zone (Polygon) zeichnen. Diese Komponente verwendet die [OpenLayers](https://openlayers.org/)-Bibliothek mit der [OpenStreetMap](https://www.openstreetmap.org/)-Karten-Engine.


__Konfiguration__:

- `parent {String}` ein übergeordnetes Element (Standard: `undefined`)
- `height {Number}` eine feste (minimale) Höhe (Standard: `200`)
- `color {String}` eine Standardfarbe für Polygone (Standard: `#fcba03`)
- `zoom {Number}` eine Standardzoomstufe (Standard: `11`)
- `readonly {Boolean}` aktiviert den schreibgeschützten Modus (Standard: `false`)
- `stroke {Number}` eine Strichstärke (Standard: `2`)
- `radius {Number}` eine Radiusgröße der Punkte im Polygon (Standard: `7`)
- `center {String}` eine Standard-Kartenposition (Standard: `48.73702478789267,19.137712002562715`)
- `opacity {Number}` bestimmt die Transparenz des Polygons in Prozent (Standard: `40`)
- `required {Boolean}` optional (Standard: `false`)
- `filter {String}` optional, CSS-Filter z.B. `filter:grayscale(90%) invert(100%)` (Standard: `null`)
- __NEW__: `exec {String}` optional, ein Link zum `function(value, component)` (wird ausgeführt, wenn der Wert geändert wird)

__Datenquelle__ muss Folgendes enthalten:

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

__Methoden__:

- `component.clear([draw])` löscht das Polygon `@draw {Boolean}` (Standard: `false`)
- `component.move(lat, lng)` verschiebt die Karte an die spezifische Position
- `component.export(opt, callback(base64))` exportiert Daten in das Bild
    - `opt.width {Number}` erforderlich
    - `opt.height {Number}` erforderlich
    - `opt.zoom {Number}` (Standard: `13`)
    - `opt.type {png|jpg}` (Standard: `png`)
    - `opt.quality {Number}` nur für JPEG
    - `opt.points {Array Number}`
    - `opt.color {String}` (Standard: `config.color`)
    - `opt.radius {Number}` (Standard: `config.radius`)
    - `opt.opacity {Number}` (Standard: `config.opacity`)

__Ausgabe__:

- wird um die Eigenschaft `center { lat: Number, lng: Number }` erweitert

__Gut zu wissen__:

- `double click` auf Scheitelpunkten (erstellter Punkt) löscht den ausgewählten Punkt

Verwenden Sie es mit `<ui-component name="drawzone">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Sirka & Dodo Marton. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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