show removed and properties properly

web/app.js

@@ -93,7 +93,7 @@ function diffStyle(feature) {
         };
     }
 
-    const isRemoved = feature.properties && feature.properties.removed === true;
+    const isRemoved = feature.properties && (feature.properties.removed === true || feature.properties.removed === 'True');
     return {
         color: isRemoved ? '#dc3545' : '#28a745',
         weight: 3,
@@ -191,21 +191,24 @@ function selectFeature(feature, layer, e) {
 
     // Create popup near the clicked location
     const props = feature.properties || {};
-    const isRemoved = props.removed === true;
+    const isRemoved = props.removed === true || props.removed === 'True';
     const isAccepted = acceptedFeatures.has(feature);
     const isRejected = rejectedFeatures.has(feature);
 
-    let html = '<div style="font-size: 12px;">';
-    html += `<div><strong>Status:</strong> ${isRemoved ? 'Removed' : 'Added/Modified'}</div>`;
+    let html = '<div style="font-size: 12px; max-height: 400px; overflow-y: auto;">';
+    html += `<div style="margin-bottom: 8px;"><strong>Status:</strong> ${isRemoved ? 'Removed' : 'Added/Modified'}</div>`;
 
-    if (props.name) {
-        html += `<div><strong>Name:</strong> ${props.name}</div>`;
-    }
-    if (props.highway) {
-        html += `<div><strong>Highway:</strong> ${props.highway}</div>`;
-    }
-    if (props.service) {
-        html += `<div><strong>Service:</strong> ${props.service}</div>`;
+    // Display all non-null properties
+    const displayProps = Object.entries(props)
+        .filter(([key, value]) => value !== null && value !== undefined && key !== 'removed')
+        .sort(([a], [b]) => a.localeCompare(b));
+
+    if (displayProps.length > 0) {
+        html += '<div style="font-size: 11px;">';
+        for (const [key, value] of displayProps) {
+            html += `<div style="margin: 2px 0;"><strong>${key}:</strong> ${value}</div>`;
+        }
+        html += '</div>';
     }
 
     if (isAccepted) {