diff --git a/3Dmap.html b/3Dmap.html
index 33bd69590402b68f138442815722967387e96768..69a5b2c9f975c8d1e600898887b71c1a9ca2c39e 100644
--- a/3Dmap.html
+++ b/3Dmap.html
@@ -2,11 +2,17 @@
<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" />
+<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;}
+
+.Mypopup .mapboxgl-popup-content {
+ background-color: black;
+ color : white;
+ opacity : 0.9;}
+
</style>
</head>
@@ -19,7 +25,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
center: [-1.7023, 48.05], // starting position [lng, lat]
@@ -68,11 +74,43 @@ map.addSource('Carro', {
});
+ // Interactivity configuration (popup)
+
+var popup = new maplibregl.Popup({
+ className: "Mypopup",
+ closeButton: false,
+ closeOnClick: false });
+
+map.on('mousemove', 'extrude', function(e) {
+ // Change the cursor style as a UI indicator.
+ map.getCanvas().style.cursor = 'pointer';
+
+ // Single out the first found feature.
+ var feature = e.features[0];
+
+ // Display a popup with the name of the county
+ popup.setLngLat(e.lngLat)
+ .setHTML('<b> Population du carreau</b>' + '<br>' + feature.properties.ind_c + ' habitans')
+ .addTo(map);
+ });
+
+ map.on('mouseleave', 'extrude', function() {
+ map.getCanvas().style.cursor = '';
+ popup.remove();
+ });
// Add navigation control and scale
-map.addControl(new mapboxgl.NavigationControl({position: 'top-left'}));
-map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));
+var nav = new maplibregl.NavigationControl();
+map.addControl(nav, 'top-left');
+
+var scale = new maplibregl.ScaleControl({
+maxWidth: 80,
+unit: 'metric'
+});
+map.addControl(scale);
+
+
</script>