Upload New File

56220b7d · Boris Mericskay · ded92bf5 · 56220b7d
Commit 56220b7d authored 4 years ago by Boris Mericskay
--- a/Dotmap.html
+++ b/Dotmap.html
+<html>
+  
+<head>
+  <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>
+#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}  
+    
+ #legend {
+        left : 1%;
+        padding: 10px;
+            box-shadow: 0 1px 2px rgba(0,0,0,0.10);
+            line-height: 2Opx;
+            margin-bottom: 50px;
+            width:210px;
+			height: 110px;
+			background-color: #ffffff;
+     		opacity: 0.7;
+            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='legend'><hR><b>311 - Type of report</b> <hR> </div>
+
+   
+<script>
+   
+      //Appel et configuration de la carte
+    
+var map = new mapboxgl.Map({
+  container: 'map',
+  style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte 
+  zoom: 12, // Zoom
+  center: [2.335, 48.854],  // Centrage carte
+  pitch: 10, // Inclinaison carte
+  bearing: 0,  // Rotation carte
+  minZoom:12
+    });
+    
+  // Add personnal data (GEOJSON)
+      
+map.on('load', function () {   
+   
+  // Configuration légende
+
+  map.getCanvas().style.cursor = 'default';
+    map.getCanvas().style.cursor = 'default';
+    var layers = ['<B>Tags</b> > 26 776', '<b>Cleanliness</b> > 31 783', '<b>Bulky objects</b> > 15 925'];
+    var colors = ['#fbb03b', '#0074D9', '#2ECC40'];
+    for (i=0; i<layers.length; i++) {
+        var layer = layers[i] + " reports";
+        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 reporting layer
+  
+  map.addSource('Stations', {
+            type: 'geojson',
+            data: 'https://raw.githubusercontent.com/mastersigat/data/main/DMR.geojson' 
+        });
+
+     map.addLayer({
+            'id': 'Stations',
+            'type': 'circle',
+            'source': 'Stations',
+           'paint': {
+            'circle-radius': {
+                'base': 0.6,
+                'stops': [[12, 1.5], [14, 2], [20, 4]]},
+                'circle-color': [
+                'match',
+                 ['get', 'type'],
+                'A', '#fbb03b',
+                'B', '#0074D9',
+                'C', '#2ECC40',
+                 /* other */ '#ccc'
+            ]
+        } 
+    });
+
+       // Add arrondissements
+
+       map.addSource('lignes', {
+            type: 'geojson',
+            data: 'https://raw.githubusercontent.com/mastersigat/data/main/arrondissements.geojson' 
+        });
+
+     map.addLayer({
+            'id': 'Lignes',
+            'type': 'line',
+            'source': 'lignes',
+            'paint': {'line-width': 1,
+                     'line-color': '#111111'}
+     });   
+         });
+  
+     
+	
+    // Ajout controle de navigation et echelle 
+  
+map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));  
+  
+map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
+  
+  
+</script>
+    
+</body>
+</html>
\ No newline at end of file