Cluster.html 2.47 KB
Newer Older
Boris Mericskay's avatar
Boris Mericskay committed
1
<!DOCTYPE html>
Boris Mericskay's avatar
Boris Mericskay committed
2
3
<html>
<head>
Boris Mericskay's avatar
Boris Mericskay committed
4
<meta charset='utf-8' />
Boris Mericskay's avatar
Boris Mericskay committed
5
<title>MapLibreGL / Clusters Map</title>
Boris Mericskay's avatar
Boris Mericskay committed
6
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
Boris Mericskay's avatar
Boris Mericskay committed
7
8
9
10
	
<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
11

Boris Mericskay's avatar
Boris Mericskay committed
12
<style>
Boris Mericskay's avatar
Boris Mericskay committed
13
body { margin:0; padding:0; }
Boris Mericskay's avatar
Boris Mericskay committed
14
15
16
17
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
Boris Mericskay's avatar
Boris Mericskay committed
18
19
 
 
Boris Mericskay's avatar
Boris Mericskay committed
20
21
<div id='map'></div>
 
Boris Mericskay's avatar
Boris Mericskay committed
22
<script>
Boris Mericskay's avatar
Boris Mericskay committed
23

Boris Mericskay's avatar
Boris Mericskay committed
24
var map = new maplibregl.Map({
Boris Mericskay's avatar
Boris Mericskay committed
25
26
27
28
container: 'map',
style: 'https://api.maptiler.com/maps/positron/style.json?key=rrASqj6frF6l2rrOFR4A', 
  zoom: 11.7, // Zoom
  center: [2.335, 48.858],  // Centrage carte
Boris Mericskay's avatar
Boris Mericskay committed
29
  bearing: 0,  // Rotation carte
Boris Mericskay's avatar
Boris Mericskay committed
30
31
32
33
  minZoom:11.7
});
 
map.on('load', function() {
Boris Mericskay's avatar
Boris Mericskay committed
34

Boris Mericskay's avatar
Boris Mericskay committed
35
36
37
38
39
40
41
42
43
44
45
46
47
48
  // 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': '#AAAAAA'}
     });   
Boris Mericskay's avatar
Boris Mericskay committed
49
50
51
  
  // Add data bike stations
  
Boris Mericskay's avatar
Boris Mericskay committed
52
  
Boris Mericskay's avatar
Boris Mericskay committed
53
map.addSource('DMR', {
Boris Mericskay's avatar
Boris Mericskay committed
54
55
            type: 'geojson',
            data: 'https://raw.githubusercontent.com/mastersigat/data/main/DMR.geojson',
Boris Mericskay's avatar
Boris Mericskay committed
56
57
			cluster: true,
			clusterMaxZoom: 15,
Boris Mericskay's avatar
Boris Mericskay committed
58
			clusterRadius: 40
Boris Mericskay's avatar
Boris Mericskay committed
59
60
        });

Boris Mericskay's avatar
Boris Mericskay committed
61
    // Configuration cluster Size and color
Boris Mericskay's avatar
Boris Mericskay committed
62
63

map.addLayer({
Boris Mericskay's avatar
Boris Mericskay committed
64
            'id': 'Clusters',
Boris Mericskay's avatar
Boris Mericskay committed
65
66
67
68
            'type': 'circle',
            'source': 'DMR',
            filter: ['has', 'point_count'],
            paint: {'circle-color': ['step',['get', 'point_count'],
Boris Mericskay's avatar
Boris Mericskay committed
69
70
71
72
						'#51bbd6',1000,
						'#f1f075',2500,
						'#f28cb1', 5000,
						'#FF4136'],
Boris Mericskay's avatar
Boris Mericskay committed
73
					'circle-stroke-color': '#ffffff',	
Boris Mericskay's avatar
Boris Mericskay committed
74
					'circle-radius': ['step',['get', 'point_count'],
Boris Mericskay's avatar
Boris Mericskay committed
75
									5,200,10,500,15,1000,20,3000,35,5000,45,8000,60]}
Boris Mericskay's avatar
Boris Mericskay committed
76
77
78
}); 

  
Boris Mericskay's avatar
Boris Mericskay committed
79
  // Configuration cluster label
Boris Mericskay's avatar
Boris Mericskay committed
80
  
Boris Mericskay's avatar
Boris Mericskay committed
81
82
83
84
85
86
87
map.addLayer({ id: 'cluster-count',
               type: 'symbol',
               source: 'DMR',
filter: ['has', 'point_count'],
layout: {
'text-field': '{point_count_abbreviated}',
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
Boris Mericskay's avatar
Boris Mericskay committed
88
'text-size': 13}
Boris Mericskay's avatar
Boris Mericskay committed
89
90
91
});  

    });
Boris Mericskay's avatar
Boris Mericskay committed
92
93
  
  
Boris Mericskay's avatar
Boris Mericskay committed
94
95
96
97
98
99
100
101
102
103
    // Add navigation control and scale
  
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
104
</script>
Boris Mericskay's avatar
Boris Mericskay committed
105
 
Boris Mericskay's avatar
Boris Mericskay committed
106
</body>
Boris Mericskay's avatar
Boris Mericskay committed
107
</html>