# j-DrawZone

> El componente puede dibujar una zona (polígono). Este componente utiliza la [biblioteca OpenLayers](https://openlayers.org/) con el motor de mapas [OpenStreetMap](https://www.openstreetmap.org/).

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

El componente puede dibujar una zona (polígono). Este componente utiliza la biblioteca [OpenLayers](https://openlayers.org/) con el motor de mapas [OpenStreetMap](https://www.openstreetmap.org/).


__Configuración__:

- `parent {String}` un elemento principal (predeterminado: `undefined`)
- `height {Number}` una altura fija (mínima) (predeterminado: `200`)
- `color {String}` un color predeterminado para el polígono (predeterminado: `#fcba03`)
- `zoom {Number}` un nivel de zoom predeterminado (predeterminado: `11`)
- `readonly {Boolean}` habilita el modo de solo lectura (predeterminado: `false`)
- `stroke {Number}` un ancho de trazo (predeterminado: `2`)
- `radius {Number}` un tamaño de radio de puntos en el polígono (predeterminado: `7`)
- `center {String}` una posición predeterminada en el mapa (predeterminado: `48.73702478789267,19.137712002562715`)
- `opacity {Number}` determina la transparencia del polígono en porcentaje (predeterminado: `40`)
- `required {Boolean}` opcional (predeterminado: `false`)
- `filter {String}` opcional, filtro CSS, p. `filter:grayscale(90%) invert(100%)` (predeterminado: `null`)
- __NUEVO__: `exec {String}` opcional, un enlace al `function(value, component)` (se ejecutará cuando se cambie el valor)

__Fuente de datos__ debe contener:

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

__Métodos__:

- `component.clear([draw])` borra el polígono `@draw {Boolean}` (predeterminado: `false`)
- `component.move(lat, lng)` mueve el mapa a la posición específica
- `component.export(opt, callback(base64))` exporta datos a la imagen
    - `opt.width {Number}` requerido
    - `opt.height {Number}` requerido
    - `opt.zoom {Number}` (predeterminado: `13`)
    - `opt.type {png|jpg}` (predeterminado: `png`)
    - `opt.quality {Number}` sólo para JPEG
    - `opt.points {Array Number}`
    - `opt.color {String}` (predeterminado: `config.color`)
    - `opt.radius {Number}` (predeterminado: `config.radius`)
    - `opt.opacity {Number}` (predeterminado: `config.opacity`)

__Salida__:

- está ampliado por la propiedad `center { lat: Number, lng: Number }`

__Es bueno saberlo__:

- `double click` en los vértices (punto creado) eliminará el punto seleccionado

Úselo con `<ui-component name="drawzone">`. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en `DEF.fallback` (el CDN Componentator de forma predeterminada). Autor: Peter Sirka y Dodo Marton. Fuente: repositorio de componentes Componentator, licencia 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>
```