diff --git a/Heatmap.html b/Heatmap.html
index 0c662ab3ab1e55c6043ad59c69dca9aabd3ffe28..988dc6409abaf00f0307985a36366131add8e83c 100644
--- a/Heatmap.html
+++ b/Heatmap.html
@@ -2,25 +2,31 @@
<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" />
+ <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' />
+
<style>
-#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
+#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
+
+
<body>
<div id="map"></div>
-
+
<script>
-//Map configuration
+ //Add map
-var map = new mapboxgl.Map({
+var map = new maplibregl.Map({
container: 'map',
style: 'https://geoserveis.icgc.cat/contextmaps/positron.json', //Fond de carte
zoom: 11.7, // Zoom
@@ -59,27 +65,37 @@ map.addLayer({
["heatmap-density"],
0, "rgba(33,102,172,0)",
0.2, "rgb(103,169,207)",
- 0.4, "rgb(209,229,240)",
- 0.6, "rgb(253,219,199)",
- 0.8, "rgb(239,138,98)",
+ 0.5, "rgb(209,229,240)",
+ 0.8, "rgb(253,219,199)",
+ 0.9, "rgb(239,138,98)",
1, "rgb(178,24,43)"],
// Adjust the heatmap radius by zoom level
"heatmap-radius": ["interpolate",["linear"],
- ["zoom"],0, 0,12, 3, 15,15],
+ ["zoom"],0, 0,12, 2.3, 15,15],
// Transition from heatmap to circle layer by zoom level
"heatmap-opacity": ["interpolate",["linear"],
["zoom"],12, 1,15, 0.7],}
});
-
- });
+
+});
+
+
+ // 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);
+
-// Add Navigation control and scale
-map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));
-map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
</script>