Upload New File

85c88065 · Boris Mericskay · 56220b7d · 85c88065
Commit 85c88065 authored 4 years ago by Boris Mericskay
--- a/ChoroplethMap.html
+++ b/ChoroplethMap.html
+<!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