From 85c880655bae08b2fccc7da7c2d0c2d8674fe38b Mon Sep 17 00:00:00 2001
From: Boris Mericskay <boris.mericskay@univ-rennes2.fr>
Date: Wed, 7 Apr 2021 20:31:17 +0000
Subject: [PATCH] Upload New File
---
ChoroplethMap.html | 178 +++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 178 insertions(+)
create mode 100644 ChoroplethMap.html
diff --git a/ChoroplethMap.html b/ChoroplethMap.html
new file mode 100644
index 0000000..c230c1d
--- /dev/null
+++ b/ChoroplethMap.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset='utf-8' />
+ <title></title>
+ <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+ <script src="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.js"></script>
+ <link href="https://cdn.maptiler.com/maplibre-gl-js/v1.13.0-rc.4/mapbox-gl.css" rel="stylesheet" />
+
+ <style>
+ body { margin:0; padding:0; }
+ h2, h3 {
+ margin: 10px;
+ font-size: 1.2em;
+ }
+ h3 {
+ font-size: 1em;
+ }
+ p {
+ font-size: 0.85em;
+ margin: 10px;
+ text-align: left;
+ }
+ .map-overlay {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background: rgba(255, 255, 255, 0.8);
+ margin-right: 20px;
+ font-family: Arial, sans-serif;
+ overflow: auto;
+ border-radius: 3px;
+ }
+ #map {
+ position:absolute;
+ top:0;
+ bottom:0;
+ width:100%;
+ }
+ #features {
+ top: 0;
+ height: 150px;
+ margin-top: 20px;
+ width: 250px;
+ }
+ #legend {
+ left : 1%;
+ padding: 10px;
+ box-shadow: 0 1px 2px rgba(0,0,0,0.10);
+ line-height: 2Opx;
+ height: 180px;
+ margin-bottom: 50px;
+ width:200px;
+ background-color: #DDDDDD;
+ opacity: 0.9;
+ font-size: 15;
+ }
+ .legend-key {
+ display:inline-block;
+ border-radius: 20%;
+ width: 10px;
+ height: 10px;
+ margin-right: 5px;
+ }
+ </style>
+</head>
+<body>
+
+<div id='map'></div>
+<div class='map-overlay' id='features'><h2>Explore the cities</h2><div id='pd'><p> <b>Hover the municipalities of Brittany</b> </p></div></div>
+<div class='map-overlay' id='legend'><b>Poulation density (2018)</b> <hR> </div>
+
+<script>
+
+//Configuration de la carte
+var map = new mapboxgl.Map({
+ container: 'map', // container id
+ style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte
+ center: [-2.802, 48.1],
+ zoom :7.7,
+ pitch : 15
+});
+map.on('style.load', function() {
+
+ // Configuration légende
+
+ map.getCanvas().style.cursor = 'default';
+ map.getCanvas().style.cursor = 'default';
+ var layers = ['-20', '20-50', '50-100', '100-200', '200-500', '500-1000', '1000+'];
+ var colors = ['#4d9221', '#a1d76a', '#e6f5d0', '#fde0ef', '#e9a3c9', '#c51b7d'];
+ for (i=0; i<layers.length; i++) {
+ var layer = layers[i] + " hab./km";
+ var color = colors[i];
+ var item = document.createElement('div');
+ var key = document.createElement('span');
+ key.className = 'legend-key';
+ key.style.backgroundColor = color;
+ var value = document.createElement('span');
+ value.innerHTML = layer;
+ item.appendChild(key);
+ item.appendChild(value);
+ legend.appendChild(item);
+ }
+
+
+ // Add data
+
+
+ map.addSource('Municipalities', {
+ type: 'geojson',
+ data: 'https://raw.githubusercontent.com/mastersigat/data/main/communesBZH.geojson'
+ });
+
+
+
+ // Municipalities layer
+
+map.addLayer({
+ 'id': 'Municipalities',
+ 'type': 'fill',
+ 'source': 'Municipalities',
+ 'layout': {'visibility': 'visible'},
+ 'paint': {'fill-outline-color': '#000000',
+ 'fill-color': {
+ property: 'density',
+ stops: [
+ [20, '#4d9221'],
+ [50, '#a1d76a'],
+ [100, '#e6f5d0'],
+ [200, '#fde0ef'],
+ [500, '#e9a3c9'],
+ [1000, '#c51b7d'],]},
+ 'fill-opacity': 0.9}
+});
+
+
+ // Add Departments
+
+ map.addSource('lignes', {
+ type: 'geojson',
+ data: 'https://raw.githubusercontent.com/mastersigat/data/main/Departements.geojson'
+ });
+
+ map.addLayer({
+ 'id': 'Lignes',
+ 'type': 'line',
+ 'source': 'lignes',
+ 'paint': {'line-width': 2.5,
+ 'line-color': '#111111'}
+ });
+
+
+
+
+ // Configuration fenêtre d'informations
+ map.on('mousemove', function (e) {
+ var states = map.queryRenderedFeatures(e.point, {
+ layers: ['Municipalities']
+ });
+ if (states.length > 0) {
+ document.getElementById('pd').innerHTML = "<h3><strong>" + states[0].properties.NOM_COM_M + "</strong></h3><p><strong><em>" + states[0].properties.density + "</strong> hab./km2</em></p>"
+ + "</strong></h3><p><strong><em>" + states[0].properties.POPULATION + "</strong> habitants </p>";
+ } else {
+ document.getElementById('pd').innerHTML = '<p>Données : INSEE 2013 / OSM</p>';
+ }
+ });
+});
+
+ // Ajout controle de navigation et echelle
+
+map.addControl(new mapboxgl.NavigationControl({position: 'top-right'}));
+
+map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
+
+</script>
+
+</body>
+</html>
\ No newline at end of file
--
GitLab