diff --git a/Clusterthematic.html b/Clusterthematic.html
index 9530c0c1811c8ae2b0d6871f9cbc3411c4e7fa94..46087266524f74cf38a5e3687a65dba778dfaaf9 100644
--- a/Clusterthematic.html
+++ b/Clusterthematic.html
@@ -2,14 +2,18 @@
<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 / Thematic Clusters 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' />
+
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#legend {
- left : 1%;
+ position: absolute;
+ left : 50px;
padding: 10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
line-height: 2Opx;
@@ -18,7 +22,7 @@
height: 80px;
background-color: #ffffff;
opacity: 0.7;
- font-size: 20;
+ font-size: 17;
}
.legend-key {
display:inline-block;
@@ -42,7 +46,7 @@
//Map configuration
-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
@@ -183,7 +187,7 @@ var id = props.cluster_id;
var marker = markers[id];
if (!marker) {
var el = createDonutChart(props);
-marker = markers[id] = new mapboxgl.Marker({
+marker = markers[id] = new maplibregl.Marker({
element: el
}).setLngLat(coords);
}
@@ -308,12 +312,17 @@ r + r0 * y0,
}
- // Add navigation control and scale
-
-map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));
-map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
-
+ // 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);
+
</script>
</body>