#Leaflet / Carte choroplèthe interactive

Carte choroplète interactive avec leaflet

<!DOCTYPE html>  
<html>
<head>
	
	<title>Choropleth Tutorial - Leaflet</title>

<style>

#map { width: 100%; height: 600px; }

.info { padding: 6px 8px; font: 12px/20px 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: 20px; color: #555; } 
.legend i { width: 10px; height: 20px; float: left; margin-right: 8px; opacity: 0.7; }
</style>
</head>
<body>

var map = L.map('map').setView([43.07, 2.8], 9);
	
	L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
		maxZoom: 18,
		id: 'mapbox.light'
	}).addTo(map);

// control that shows state info on hover
	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 =  (props ?
			'<b>' + props.nom_com + '</b><br><B>' + 'Population : ' + props.population + ' habitants '
					      + '</b><br><B>' + 'Densité  : ' + props.densite + ' hab./ km<sup>2</sup>'
			: 'Survolez la commune');
	};

info.addTo(map);

// get color depending on population density value
	function getColor(d) {
		return d > 1000 ? '#800026' :
				d > 500  ? '#BD0026' :
				d > 200  ? '#E31A1C' :
				d > 100  ? '#FC4E2A' :
				d > 50   ? '#FD8D3C' :
				d > 20   ? '#FEB24C' :
				d > 10   ? '#FED976' :
							'#FFEDA0';
	}

function style(feature) {
		return {
			weight: 1,
			opacity: 1,
			color: 'white',
			dashArray: '3',
			fillOpacity: 0.8,
			fillColor: getColor(feature.properties.densite)
		};
	}

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

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

if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
			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);

map.attributionControl.addAttribution('Populations légales 2016 - <a href="https://insee.fr/fr/accueil">INSEE</a>');

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

legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),
			grades = [0, 10, 20, 50, 100, 200, 500, 1000],
            labels = ['<strong> Densité (hab./km2) </strong>'],	
			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>

Updated missing url https://www.sites.univ-rennes2.fr/mastersigat/Webmapping/communes_aude.json to https://www.sites.univ-rennes2.fr/mastersigat/webmapping/communes_aude.json

https://unpkg.com/leaflet@1.0.3/dist/leaflet.js

https://www.sites.univ-rennes2.fr/mastersigat/Webmapping/communes_aude.json