diff --git a/public/js/connectToAPI.js b/public/js/connectToAPI.js
index 4ffe90abe59215f60db377da36ed4ccef28beb4e..c573ac76e902e3c7688232c5abfa1aa7591bb92d 100644
--- a/public/js/connectToAPI.js
+++ b/public/js/connectToAPI.js
@@ -19,6 +19,8 @@ var roofTypeSortPick
 var uValueSortPick
 var shadowdata
 
+var pvPotentialSurfaces; //array which holds the pvpotential of all surfaces
+
 
 async function fetchPvPotentialJSON() {
     var bottomLat = coordinatesBB[1]
@@ -127,17 +129,17 @@ async function getLocalShadowdata() {
     const response = await fetch(localShadowData);
     //the response have to be converted to json type file, so it can be used
     const data = await response.json();
-    console.log(data)
+    //console.log(data)
     return data;
 }
 
 async function processData() {
-    console.log(coordinatesBB)
+    
     console.log("Waiting for data....")
     shadowdata = await getLocalShadowdata()
 
     timeout(25000, getLocalShadowdata()).then((response) => {
-        console.log(response)
+        //console.log(response)
         shadowdata = response;
     }).catch((error) => { //catching the error(no connection)/ timeout and displaying an alert for the user
         console.log(shadowdata);
@@ -146,7 +148,8 @@ async function processData() {
 
     timeout(10000, fetchPvPotentialJSON()).then((response) => {
         //console.log("fetchPvPotentialJSON:", response);
-        getPvPotentialOfSurfaces(response["buildings"]);
+        pvPotentialSurfaces = getPvPotentialOfSurfaces(response["buildings"]);
+        //console.log("pvPotentialSurfaces:",pvPotentialSurfaces);
     }).catch((error) => {
         console.log(error)
     })
@@ -165,7 +168,7 @@ async function processData() {
 
 
 function calculateData(data) {
-    console.log(data);
+    //console.log(data);
     document.getElementById("cesiumContainer").style.opacity = "1";
     document.getElementById("loader").style.visibility = "hidden"
     console.log("....received data")
@@ -404,6 +407,7 @@ function timeout(ms, promise) {
     })
 }
 
+//getting the pvPotential of all surfaces from the pvPotential array, which the api returns
 function getPvPotentialOfSurfaces(pvPotentialarray){
     var pvPotentialArray=[];
 
@@ -415,7 +419,8 @@ function getPvPotentialOfSurfaces(pvPotentialarray){
             )    
         )           
     );
-    console.log(pvPotentialArray);
+    //console.log(pvPotentialArray);
+    return pvPotentialArray;
 }
 
 
diff --git a/public/js/globe.js b/public/js/globe.js
index 30df0d95f19ee6eca510409dd37bd88390545c69..f15ec8e64b984ca17bf4b6ceffb3724f88a3ecc2 100644
--- a/public/js/globe.js
+++ b/public/js/globe.js
@@ -199,7 +199,9 @@ var pickHeatedVolume
 var pickTotalSurfaceArea = 0
 var pickRoofType
 var pickUValue
+
 var shadowHourValue = 0;
+var SurfacePvPotential=[];
 
 
 //Color a feature on selection and show metadata in the InfoBox
@@ -286,7 +288,8 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                 //highlight newly selected feature
                 tileContent.forEach(t => {
                     if (t === pickedFeature) {
-                        console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
+                        //used for debugging, when clicking on a surface
+                        //console.log(t.getProperty("description") + "\n" + t.getProperty("feature_type") + "\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
 
                         t.color = Cesium.Color.LIME;
 
@@ -301,6 +304,15 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
                             }
                         }
+                        
+                        //coloring surfaces on pv potential
+                        for (const [key, value] of Object.entries(pvPotentialSurfaces)) { //looping threw the shadowdata array                            
+                            if (value["id"] === t.getProperty("gml_id")) { //checking if the ids of the current surface match the id in the shadowdata array
+                                //console.log("hour:",chosenDate.hour);
+                                console.log(value);   
+                                SurfacePvPotential = value["attributes"]["pvPotential"]["totalInvestment"];                            
+                            }
+                        }
                     }
                 });
             } else {
@@ -330,7 +342,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                 "<tr><th>description</th><td>" + pickedFeature.getProperty("description") + "</td></tr>" +
                 "<tr><th>feature_type</th><td>" + pickedFeature.getProperty("feature_type") + "</td></tr>" +
                 "<tr><th>shadow value</th><td>" + shadowhourvaluepercent.toFixed(1) + "%" + "</td></tr>" +
-
+                "<tr><th>totalInvestment</th><td>" + SurfacePvPotential  + "</td></tr>" +
 
                 "</tbody></table>";