From 56220b7da7e3b3780f02749eff90555d22f65b73 Mon Sep 17 00:00:00 2001
From: Boris Mericskay <boris.mericskay@univ-rennes2.fr>
Date: Wed, 7 Apr 2021 20:22:47 +0000
Subject: [PATCH] Upload New File
---
Dotmap.html | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 133 insertions(+)
create mode 100644 Dotmap.html
diff --git a/Dotmap.html b/Dotmap.html
new file mode 100644
index 0000000..7129afe
--- /dev/null
+++ b/Dotmap.html
@@ -0,0 +1,133 @@
+<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
--
GitLab