Dotmap.html 3.66 KB
Newer Older
Boris Mericskay's avatar
Boris Mericskay committed
1
2
3
4
<html>
  
<head>
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
Boris Mericskay's avatar
Boris Mericskay committed
5
6
7
8
9
      <meta charset='utf-8' />
    <title>MapLibreGL / Dot Map</title>
	
<script src='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.js'></script>
<link href='https://unpkg.com/maplibre-gl@2.1.1/dist/maplibre-gl.css' rel='stylesheet' />
Boris Mericskay's avatar
Boris Mericskay committed
10
11
12
13

  <style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}  
    
Boris Mericskay's avatar
Boris Mericskay committed
14
15
16
 #legend {
        position: absolute;
		left : 3%;
Boris Mericskay's avatar
Boris Mericskay committed
17
18
19
20
21
        padding: 10px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.10);
            line-height: 2Opx;
            margin-bottom: 50px;
            width:210px;
Boris Mericskay's avatar
Boris Mericskay committed
22
			height: 180px;
Boris Mericskay's avatar
Boris Mericskay committed
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
			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> 
    
Boris Mericskay's avatar
Boris Mericskay committed
42
43
  <div id="map"></div>
   <div class='map-overlay' id='legend'><hR><h3><b>311 - Type of report</b></h3> <hR><br> </div>
Boris Mericskay's avatar
Boris Mericskay committed
44
45
46
47

   
<script>
   
Boris Mericskay's avatar
Boris Mericskay committed
48
      //Appel et configuration de la carte
Boris Mericskay's avatar
Boris Mericskay committed
49
    
Boris Mericskay's avatar
Boris Mericskay committed
50
var map = new maplibregl.Map({
Boris Mericskay's avatar
Boris Mericskay committed
51
  container: 'map',
Boris Mericskay's avatar
Boris Mericskay committed
52
53
54
55
56
57
  style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte 
  zoom: 11.7, // Zoom
  center: [2.335, 48.857],  // Centrage carte
  pitch: 10, // Inclinaison carte
  bearing: 0,  // Rotation carte
  minZoom:11.7
Boris Mericskay's avatar
Boris Mericskay committed
58
    });
Boris Mericskay's avatar
Boris Mericskay committed
59
60
61
    
  // Add personnal data (GEOJSON)
      
Boris Mericskay's avatar
Boris Mericskay committed
62
63
map.on('load', function () {   
   
Boris Mericskay's avatar
Boris Mericskay committed
64
  // Configuration légende
Boris Mericskay's avatar
Boris Mericskay committed
65
66
67

  map.getCanvas().style.cursor = 'default';
    map.getCanvas().style.cursor = 'default';
Boris Mericskay's avatar
Boris Mericskay committed
68
    var layers = ['<B>Tags</b> > 26 776 reports', '<b>Cleanliness</b> > 31 783 reports', '<b>Bulky objects</b> > 15 925 reports', ' ', 'Source : Ville de Paris'];
Boris Mericskay's avatar
Boris Mericskay committed
69
70
    var colors = ['#fbb03b', '#0074D9', '#2ECC40'];
    for (i=0; i<layers.length; i++) {
Boris Mericskay's avatar
Boris Mericskay committed
71
        var layer = layers[i] + "";
Boris Mericskay's avatar
Boris Mericskay committed
72
73
74
75
76
77
78
79
80
81
82
        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);
    }
Boris Mericskay's avatar
Boris Mericskay committed
83
     // ADD reporting layer
Boris Mericskay's avatar
Boris Mericskay committed
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
  
  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'],
Boris Mericskay's avatar
Boris Mericskay committed
101
102
103
104
                'A', '#fbb03b',
                'B', '#0074D9',
                'C', '#2ECC40',
                 /* other */ '#ccc'
Boris Mericskay's avatar
Boris Mericskay committed
105
106
107
108
            ]
        } 
    });

Boris Mericskay's avatar
Boris Mericskay committed
109
       // Add arrondissements
Boris Mericskay's avatar
Boris Mericskay committed
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

       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'}
     });   
         });
  
Boris Mericskay's avatar
Boris Mericskay committed
125
     
Boris Mericskay's avatar
Boris Mericskay committed
126
    // Add navigation control and scale
Boris Mericskay's avatar
Boris Mericskay committed
127
  
Boris Mericskay's avatar
Boris Mericskay committed
128
129
130
131
132
133
134
135
136
var nav = new maplibregl.NavigationControl();
map.addControl(nav, 'top-left');

var scale = new maplibregl.ScaleControl({
maxWidth: 80,
unit: 'metric'
});
map.addControl(scale);
  
Boris Mericskay's avatar
Boris Mericskay committed
137
138
139
140
  
</script>
    
</body>
Boris Mericskay's avatar
Boris Mericskay committed
141
</html>