Italian GDP per capita - Leaflet Choropleth

A Leaflet Choropleth about the Italian GDP per capita

<!DOCTYPE html>
<html>
<head>
	<title>PIL pro capite delle regioni italiane</title>
	<meta charset="utf-8" />

.info {
			padding: 6px 8px;
			font: 14px/16px Arial, Helvetica, sans-serif;
			background: white;
			background: rgba(255,255,255,0.8);
			box-shadow: 0 0 15px rgba(0,0,0,0.2);
			border-radius: 5px;
		}
		.info h4 {
			margin: 0 0 5px;
			color: #777;
		}

.legend {
			text-align: left;
			line-height: 18px;
			color: #555;
		}
		.legend i {
			width: 18px;
			height: 18px;
			float: left;
			margin-right: 8px;
			opacity: 0.7;
		}
	</style>
</head>
<body>
	<div id="map"></div>

var map = L.map('map').setView([43, 11], 5);

var info = L.control();

info.onAdd = function (map) {
			this._div = L.DomUtil.create('div', 'info');
			this.update();
			return this._div;
		};

info.update = function (props) {

this._div.innerHTML = '<h4>Pil pro capite per regione</h4>' +  (props ?
				'<b>' + props.name + '</b><br />' + props.pil + ' numero indice su base Italia = 100'
				: 'Seleziona una regione') ; 
		};

info.addTo(map);

// get color depending on pil value
		function getColor(d) {
			return d > 114  ? '#CB181D' :
			       d > 100   ? '#FB6A4A' :
			       d > 70   ? '#FCAE91' :
			       d > 0   ? '#FEE5D9' :
			                  '#cccccc';
		}
//Qui inposta i colori della choropleth in base alla proprietà pil che si trova nel file json delle regioni
		function style(feature) {
			return {
				weight: 2,
				opacity: 1,
				color: 'white',
				dashArray: '3',
				fillOpacity: 0.7,
				fillColor: getColor(feature.properties.pil)
			};
		}

function highlightFeature(e) {
			var layer = e.target;

layer.setStyle({
				weight: 5,
				color: '#666',
				dashArray: '',
				fillOpacity: 0.7
			});

if (!L.Browser.ie && !L.Browser.opera) {
				layer.bringToFront();
			}

info.update(layer.feature.properties);
		}

var geojson;

function resetHighlight(e) {
			geojson.resetStyle(e.target);
			info.update();
		}

function zoomToFeature(e) {
			map.fitBounds(e.target.getBounds());
		}

function onEachFeature(feature, layer) {
			layer.on({
				mouseover: highlightFeature,
				mouseout: resetHighlight,
				click: zoomToFeature
			});
		}

geojson = L.geoJson(statesData, {
			style: style,
			onEachFeature: onEachFeature
		}).addTo(map);

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),
				grades = [0, 70, 100, 114],
				labels = [],
				from, to;

for (var i = 0; i < grades.length; i++) {
				from = grades[i];
				to = grades[i + 1];

labels.push(
					'<i style="background:' + getColor(from + 1) + '"></i> ' +
					from + (to ? '&ndash;' + to : '+'));
			}

div.innerHTML = labels.join('<br>');
			return div;
		};

legend.addTo(map);

</script>
</body>
</html>