Handle LandXML CgPoints

examples/web-converter/main.js

@@ -123,7 +123,7 @@
                 }
             },
             onEachFeature: (f, l) => {
-                l.bringToBack();
+                if(f.geometry.type !== 'Point') l.bringToBack();
             }
         }).on('click', (e) => {
             // Check for selected
@@ -138,19 +138,56 @@
 
             console.log('Selected feature:', feature);
 
-            // Bring selected to front
-            //selectedFeature.bringToFront()
-            // Style selected
-            selectedFeature.setStyle({
-              'fillColor': 'blue'
-            })
+            if(feature.geometry.type !== 'Point') {
+                // Style selected
+                selectedFeature.setStyle({
+                    'fillColor': 'blue'
+                })
+            }
+
+            selectedFeature.bindPopup(featurePropertiesToHTML(feature)).openPopup();
 
-            selectedFeature.bindPopup(`<b>${feature.properties.name}</b><br>${feature.properties.description}`).openPopup();
         }).addTo(map);
         const bounds = geojsonLayer.getBounds();
         map.fitBounds(bounds);
     }
 
-    
+    function featurePropertiesToHTML(feature) {
+        let html = `<b>${feature.properties.name}</b><br /><br />`;
+        if (feature.geometry.type === "Point") {
+            html += `
+                <ul>
+                    <li><b>Latitude</b> ${feature.geometry.coordinates[1]}°</li>
+                    <li><b>Longitude</b> ${feature.geometry.coordinates[0]}°</li>
+                    <li><b>Altitude</b> ${feature.geometry.coordinates[2]}m</li>
+                </ul>
+                <br />
+            `;
+        }
+        html += `
+            <b>Propriétés</b><br/><br/>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Clé</th>
+                        <th>Valeur</th>
+                    </tr>
+                <thead>
+                <tbody>
+        `;
+        Object.keys(feature.properties).sort().forEach(key => {
+            html += `
+                <tr>
+                    <td>${key}</td>
+                    <td>${feature.properties[key]}</td>
+                </tr>
+            `;
+        });
+        html += `
+                </tbody>
+            <table/>
+        `;
+        return html;
+    }
 
 }());