Right dock that show data from a layer

README.md

@@ -57,6 +57,7 @@ If you are developing a new feature, do not hesitate to let us know so that we c
 ## UI
 
 * [Add documentation](./library/ui/add_documentation) with buttons and a dock
+* [Display a right-docked table of data](./library/ui/data_table)
 * [Background selector](./library/ui/background_selector), like on Google Maps
 * [Hide value popup](./library/ui/hide_value_popup)
 * [Measure tool custom style](./library/ui/measure_tool_custom_style)

library/ui/data_table/README.md

@@ -0,0 +1,5 @@
+# Data Display
+
+![donnees](./demo.png)
+
+This script retrieves data from a given URL containing GeoJSON data, dynamically creates an HTML table with the fetched data, and displays it in a Lizmap user interface.

library/ui/data_table/data_table.js

@@ -0,0 +1,101 @@
+lizMap.events.on({
+    'uicreated': function () {
+
+        // Change the URL from your own data
+        const URL = 'https://url/index.php/lizmap/service/?repository=your_repositoryu&project=your_project&SERVICE=WFS&REQUEST=GetFeature&VERSION=your_version&TYPENAME=your_layerOUTPUTFORMAT=GeoJSON';
+        const NAME = "Nom de la couche"
+
+        var html = '<div id="statistic_content"></div>';
+        lizMap.addDock(
+            'table_dock',
+            `Table of ${NAME}`,
+            'right-dock',
+            html,
+            'icon-signal'
+        );
+
+        try {
+            const promise = getData(URL);
+
+            // Handle promise resolution
+            promise.then(features =>{
+                // Extract property names from the first feature
+                const propertyNames = Object.keys(features[0].properties);
+                const tableRows = [];
+
+                // Create table header using property names
+                const tableHeader = `
+                    <thead>
+                        <tr>
+                            ${propertyNames.map(propertyName => `<th>${propertyName}</th>`).join('')}
+                        </tr>
+                    </thead>
+                `;
+
+                // Add rows to the table
+                features.forEach(feature => {
+                    const row = `
+                        <tr>
+                            ${propertyNames.map(propertyName => `<td>${feature.properties[propertyName]}</td>`).join('')}
+                        </tr>
+                    `;
+                    tableRows.push(row);
+                });
+
+                // Update the style of your table
+                const tableStyle = `
+                    <style>
+                        table#table-data {
+                            width: 100%;
+                            border-collapse: collapse;
+                            border: 1px solid;
+                            color:white;
+                        }
+                        #table-data th, #table-data td {
+                            padding: 8px;
+                            text-align: left;
+                            border-bottom: 1px solid #ddd;
+                        }
+                        table#table-data th {
+                            background-color: grey;
+                        }
+                    </style>
+                `;
+
+                // Get to the table container
+                const tableContainer = $('#statistic_dock');
+
+                // Add the content of the table
+                tableContainer.html(`
+                    ${tableStyle}
+                    <table id="table-data">
+                        ${tableHeader}
+                        ${tableRows.join('')}
+                    </table>
+                `);
+
+            })        
+        }catch (error) {
+            console.error('An error occurred during processing: ', error);
+        }
+
+    }
+})
+
+// Asynchronous function to get data
+async function getData(url) {
+    try {
+        const response = await fetch(url); 
+
+        if (!response.ok) {
+            throw new Error(`HTTP Error! Status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        return data.features;
+
+    } catch (error) {
+       console.error('An error occurred while retrieving the data', error);
+       throw error; 
+   }
+};