Update App.js

public/Source/App.js

@@ -190,15 +190,32 @@ function active3DTilePicker() {
                 return;
             }
             // A feature was picked, so show it's overlay content
-            nameOverlay.style.display = 'block';
+           nameOverlay.style.display = 'block';
             nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
             nameOverlay.style.left = movement.endPosition.x + 'px';
-            var name = picked3DtileFeature.getProperty('feature_type');
+			var name = picked3DtileFeature.getProperty('feature_type');
+            var name1 = picked3DtileFeature.getProperty('gml_id');
+			var name2 = picked3DtileFeature.getProperty('Irr_kWh');
+			var name3 = picked3DtileFeature.getProperty('PVPotential');
+			if (colorstyle1.checked) {
+				if (!Cesium.defined(name)) {
+                name = picked3DtileFeature.getProperty('feature_type');
+            }
+            nameOverlay.textContent = name ; }
+			
+			else if (colorstyle2.checked) {
 
             if (!Cesium.defined(name)) {
-                name = picked3DtileFeature.getProperty('feature_type');
+                name = picked3DtileFeature.getProperty('gml_id');
+            }
+            nameOverlay.textContent = name1 + ' ' + name2 + ' ' + 'kWh/(m².a)'; }
+			
+			
+			else if (colorstyle3.checked){
+				if (!Cesium.defined(name)) {
+                name = picked3DtileFeature.getProperty('gml_id');
             }
-            nameOverlay.textContent = name;
+            nameOverlay.textContent = name1 + ' ' + name3 + ' ' + 'MWh/a'; }
             // Highlight the feature if it's not already selected.
             if (picked3DtileFeature !== selected.feature) {
                 highlighted.feature = picked3DtileFeature;