Heatmap.html 2.31 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
10
      <meta charset='utf-8' />
    <title>MapLibreGL / Heatmap</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
11
12

  <style>
Boris Mericskay's avatar
Boris Mericskay committed
13
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}     
Boris Mericskay's avatar
Boris Mericskay committed
14
15
16
17
  </style>

  </head>

Boris Mericskay's avatar
Boris Mericskay committed
18
19


Boris Mericskay's avatar
Boris Mericskay committed
20
21
22
  <body> 
    
  <div id="map"></div>
Boris Mericskay's avatar
Boris Mericskay committed
23
  
Boris Mericskay's avatar
Boris Mericskay committed
24
25
26
   
<script>
   
Boris Mericskay's avatar
Boris Mericskay committed
27
      //Add map
Boris Mericskay's avatar
Boris Mericskay committed
28
    
Boris Mericskay's avatar
Boris Mericskay committed
29
var map = new maplibregl.Map({
Boris Mericskay's avatar
Boris Mericskay committed
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  container: 'map',
  style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte 
  zoom: 11.7, // Zoom
  center: [2.335, 48.858],  // Centrage carte
  pitch: 10, // Inclinaison carte
  bearing: 0,  // Rotation carte
  minZoom:11.7
    });
     
  // Add personnal data (GEOJSON)
      
map.on('load', function () {   
   

     // Add data layer
  
  map.addSource('DMR', {
            type: 'geojson',
            data: 'https://raw.githubusercontent.com/mastersigat/data/main/DMR.geojson'
        });

	// Configure Heatmap
map.addLayer({
"id": "horodateurs",
"type": "heatmap",
"source": "DMR",

"paint": {
Boris Mericskay's avatar
Boris Mericskay committed
58

Boris Mericskay's avatar
Boris Mericskay committed
59
// Increase the heatmap color weight weight by zoom level
Boris Mericskay's avatar
Boris Mericskay committed
60
61
62
"heatmap-intensity": ["interpolate",["linear"],
                     ["zoom"],1, 0,16,3],

Boris Mericskay's avatar
Boris Mericskay committed
63
// Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
Boris Mericskay's avatar
Boris Mericskay committed
64
65
66
67
"heatmap-color": ["interpolate",["linear"],
                 ["heatmap-density"],
                    0, "rgba(33,102,172,0)",
                    0.2, "rgb(103,169,207)",
Boris Mericskay's avatar
Boris Mericskay committed
68
69
70
                    0.5, "rgb(209,229,240)",
                    0.8, "rgb(253,219,199)",
                    0.9, "rgb(239,138,98)",
Boris Mericskay's avatar
Boris Mericskay committed
71
72
                    1, "rgb(178,24,43)"],
                    
Boris Mericskay's avatar
Boris Mericskay committed
73
// Adjust the heatmap radius by zoom level
Boris Mericskay's avatar
Boris Mericskay committed
74
"heatmap-radius": ["interpolate",["linear"],
Boris Mericskay's avatar
Boris Mericskay committed
75
                  ["zoom"],0, 0,12, 2.3, 15,15],
Boris Mericskay's avatar
Boris Mericskay committed
76
                  
Boris Mericskay's avatar
Boris Mericskay committed
77
// Transition from heatmap to circle layer by zoom level
Boris Mericskay's avatar
Boris Mericskay committed
78
79
80
"heatmap-opacity": ["interpolate",["linear"],
                   ["zoom"],12, 1,15, 0.7],}
                   
Boris Mericskay's avatar
Boris Mericskay committed
81
});
Boris Mericskay's avatar
Boris Mericskay committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

});


    // 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
97
  
Boris Mericskay's avatar
Boris Mericskay committed
98
99
100
101
102
  
  
</script>
    
</body>
Boris Mericskay's avatar
Boris Mericskay committed
103
</html>