mastersigat/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Carte choroplète interactive avec leaflet

  
## index.html
<!DOCTYPE html>
<html>
<head>

	<title>Choropleth Tutorial - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>


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

<div id='map'></div>

<script type="text/javascript" src="https://www.sites.univ-rennes2.fr/mastersigat/Webmapping/communes_aude.json"></script>

<script type="text/javascript">

	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>
	<!DOCTYPE html>
	<html>
	<head>

	<title>Choropleth Tutorial - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>


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

	<div id='map'></div>

	<script type="text/javascript" src="https://www.sites.univ-rennes2.fr/mastersigat/Webmapping/communes_aude.json"></script>

	<script type="text/javascript">

	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 ? '–' + to : '+'));
	}

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

	legend.addTo(map);

	</script>



	</body>
	</html>