# j-DrawZone

> Le composant peut dessiner une zone (polygone). [Ouverture](https://openlayers.org/) La bibliothèque avec le [OpenStreetMap](https://www.openstreetmap.org/) Le moteur de la carte.

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

Le composant peut dessiner une zone (polygone). [Ouverture](https://openlayers.org/) La bibliothèque avec le [OpenStreetMap](https://www.openstreetmap.org/) Le moteur de la carte.


__Configuration__ :

- `parent {String}` un élément parent (defaut : `undefined`)
- `height {Number}` une hauteur fixe (minimale) (defaut : `200`)
- `color {String}` une couleur par défaut pour le polygone (par défauts: `#fcba03`)
- `zoom {Number}` un niveau de zoom par défaut (defaut: `11`)
- `readonly {Boolean}` permet le mode readonly (défaut : `false`)
- `stroke {Number}` une largeur d'effet (defaut : `2`)
- `radius {Number}` une taille de rayon des points dans le polygone (defaut: `7`)
- `center {String}` une position de carte par défaut (defaut: `48.73702478789267,19.137712002562715`)
- `opacity {Number}` détermine la transparence du polygone en pourcentage (defaut: `40`)
- `required {Boolean}` en option (par défaut : `false`)
- `filter {String}` optionnel, filtre CSS par exemple `filter:grayscale(90%) invert(100%)` (défaut: `null`)
- __NEW__: `exec {String}` optionnel, un lien vers le `function(value, component)` (il sera exécuté lorsque la valeur est modifiée)

__Data-source__ doit contenir :

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

__Méthodes__ :

- `component.clear([draw])` nettoie le polygone `@draw {Boolean}` (defaut: `false`)
- Le `component.move(lat, lng)` déplace la carte à la position spécifique
- `component.export(opt, callback(base64))` exporte les données dans l'image
    - `opt.width {Number}` nécessaire
    - `opt.height {Number}` nécessaire
    - `opt.zoom {Number}` (par défaut : `13`)
    - `opt.type {png|jpg}` (par défaut : `png`)
    - `opt.quality {Number}` pour JPEG
    - `opt.points {Array Number}`
    - `opt.color {String}` (par défaut : `config.color`)
    - `opt.radius {Number}` (par défaut : `config.radius`)
    - `opt.opacity {Number}` (par défaut : `config.opacity`)

__Sortie__ :

- La propriété est élargie par `center { lat: Number, lng: Number }`

__Bon à savoir__ :

- `double click` sur les sommets (point créé) supprimera le point sélectionné

Utilisez-le avec `<ui-component name="drawzone">`Lorsque le composant n’est pas encore chargé, jComponent télécharger à la première utilisation de l'adresse `DEF.fallback` (Le Componentator Auteur : Peter Sirka et Dodo Marton. Componentator Réservatoire des composants, licence MIT.

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