# j-MapZones

> Il componente per disegnare e visualizzare le zone sulla mappa. [OpenLayers](https://openlayers.org/) La biblioteca con il [OpenStreetMap](https://www.openstreetmap.org/) Il motore, il co

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

Il componente per disegnare e visualizzare le zone sulla mappa. [OpenLayers](https://openlayers.org/) La biblioteca con il [OpenStreetMap](https://www.openstreetmap.org/) Il motore mappa. il componente utilizza dipendenze di terza parte.

__Configurazione__:

- L'altezza fissa di `height {Number/String}` o un elemento parentale (default: `200`)
- `color {String}` consente di personalizzare il colore per i poligoni creati (default: `#fcba03`)
- `zoom {Number}` un livello di zoom predefinito (predefinita: `11`)
- `modify {Boolean}` consente di modificare il poligono (default: `true`)
- `opacity {Number}` determina la trasparenza del poligono in percentuale (default: `20`)
- __NEW__ `exec {String}` un collegamento al `function(value)`, viene eseguito quando il valore è cambiato

__data-source__ deve contenere:

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

__Buono sapere__:

- `SHIFT + click` su verticali (punto creato) eliminerà il punto selezionato

Utilizzare con `<ui-component name="mapzones">`Quando il componente non è ancora caricato, jComponent Scarica il codice in prima utilizzazione dall'indirizzo `DEF.fallback` (Il Componentator CDN per default).Autor: Dodo Marton / Peter Širka.Fonte: il Componentator Ristorante dei componenti, licenza MIT.

```html example.html
<div style="width:400px">
	<ui-component name="mapzones" path="map" config="height:400;color:#FD391A"></ui-component>
</div>

<script>
	var map = { 
		points: [
			{ lat: 48.75152530164132, lng: 19.13902142954625 },
			{ lat: 48.726826662905296, lng: 19.123238694044034 },
			{ lat: 48.739833820262106, lng: 19.190119425971947 },
			{ lat: 48.75152530164132, lng: 19.13902142954625 }
		],
		color: '#FD391A',
		zoom: 13 
	};
</script>
```