gml tileset can be loaded

public/js/connectToAPI.js

@@ -284,31 +284,64 @@ window.onclick = function (event) {
     }
 }
 
+//-------------------------------------------------------------------------------
 var tileData = null
 var tileset = null
+var tilesetURL = 'http://vm24.fkc.hft-stuttgart.de:8081/CampusLOD2/CityModel/tileset.json';
 
-fetch('https://boxofcare.de/3DContainerTile/collections/')
-    .then(response => response.json())
-    .then(data => {
-        tileData = data
-    });
 
+//fetching the tileset
+async function fetchTileset(){
+    const response = await fetch(tilesetURL);
+    const tilesetJSON = await response.json();
+    return tilesetJSON;
+}
+
+
+//loads tileset after submit button is clicked
+/*
+    FIXME:  -load the models but the are in the too high in the "air"
+            -building view doesn´t work because all buildings are grouped together
+            -surfaces are also broken
+
+    ? maybe add old menu back and the option to also load the new ones 
+    
+*/
 function loadTileset() {    
     viewer.scene.primitives.remove(tileset)
     tileContent = []
     modal.style.display = "block";
-    console.log(tileData)
+
+    fetchTileset().then(tilesetJSON =>{       
+        tileData = tilesetJSON;
+    });
+   
 
     var userurl = document.getElementById("3Durl").value;
+    console.log(userurl);
     
+    tileset=viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+        url: tilesetURL
+    }));
+    console.log(tileset);
+
+    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));
+            modal.style.display = "none";
+            saveTilesetContent(tileset)
+            deleteTilesetButtons()
+
+    /*
     tileData.collections.forEach(c => {
         if (userurl === 'hftcampus' && c.id === "HftCampus") useContent(c.content)
         if (userurl === 'paderborn' && c.id === "Paderborn") useContent(c.content)
-    })
+    })*/
+    console.log(tileData);
+    
+   
 }
 
-function useContent(content) {
 
+function useContent(content) {
     content.forEach(cont => {
         var element = document.createElement("input")
         element.type = "button"
@@ -344,8 +377,12 @@ function deleteTilesetButtons() {
     var x = document.getElementsByName("individualTileset")
     var len = x.length
     
+    //checking if there are even tileset to delete
+    if(x.length>0){
         parentNode = x[0].parentNode;
         for (var i = 0; i < len; i++) {
             parentNode.removeChild(x[0]);
         }
+    }
+   
 }

public/js/globe.js

 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjNjM5YzFjNC03NWNmLTQ2M2YtOWJiNC0xODNmMTY2ZjkwNTkiLCJpZCI6MzY3NjEsImlhdCI6MTYwMzk4NTU3Nn0.G3fnwzZ50towP1Nv9goyvu0JxJW5GtiudTR7X67Zo84';
 
-var roofTiles= ["PolyIDGeo755601","PolyIDGeo787622","PolyIDGeo135906","PolyIDGeo534180","PolyIDGeo1597157","PolyIDGeo1628130","PolyIDGeo570789","PolyIDGeo206785","PolyIDGeo785307","PolyIDGeo1096586","PolyIDGeo25714307","PolyIDGeo772461","PolyIDGeo25430590"];
-
 
 var viewer = new Cesium.Viewer('cesiumContainer', {
     homeButton: false,
@@ -47,21 +45,16 @@ var highlightedFeatures = [];
 
 //conatins currently selected features
 var selectedFeatures = [];
-
 var hoverpid;
-
 var selectpid;
-
 var pickedselect = true;
-
 var pickedhigh = false;
-
 var pickedalreadyselect = false;
-
 var radio = document.getElementById('radio-group');
 
 //selected gmlID
-var gmlID
+var gmlID;
+
 
 radio.addEventListener('click', function () {
     //hide chart for individual buildings
@@ -105,6 +98,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
         return;
     }
 
+    //SURFACE-VIEW
     if (document.getElementById("surface").checked) {
 
         // A feature was picked, so show it's overlay content
@@ -117,7 +111,6 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
             return;
         }
 
-
         var name = pickedFeature.getProperty("gml_id");
 
         nameOverlay.textContent = name;
@@ -133,41 +126,25 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
         if (pickedselect) {
             tileContent.forEach(t => {
                 if (t === pickedFeature) {
+                    if(t.getProperty("feature_type")==="RoofSurface"){
                         highlightedFeatures.push(new featurevar(t, t.color));
-                    t.color = Cesium.Color.YELLOW;
-                }
-            });
-        }
-
-    }
-
-    //TODO: add roof selection
-    else if(document.getElementById("roof").checked){
-        tileContent.forEach(t => {   
-                
-            if (t === pickedFeature) {                
-                console.log(t.getProperty("gml_id"));    
-                console.log(t);                  
-            }
-
-            roofTiles.forEach(rt =>{
-                if(t.getProperty("gml_id")===rt){
-                    var a =  Math.floor(Math.random() * 3);
-                    if(a==1){
-                        t.color = Cesium.Color.RED;
-                    }else if(0){
-                        t.color = Cesium.Color.YELLOW;
-                    }else{
+                        //t.color = randomRoofColor();  
                         t.color = Cesium.Color.GREEN;                      
-                    }
 
+                    }else{
+                        highlightedFeatures.push(new featurevar(t, t.color));
+                        t.color = Cesium.Color.YELLOW;
                     }
-            })
 
+                    //debugging - getting all info of the clicked surface
+                    //console.log(t.getPropertyNames());                    
+                    console.log(t.getProperty("description")+"\n"+t.getProperty("feature_type")+"\n" + t.getProperty("gml_id") + "\n" + t.getProperty("gml_parent_id"));
                                       
+                }
             });
         }
 
+    }
     
     else {
 
@@ -183,7 +160,7 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
 
 
         name = pickedFeature.getProperty("gml_parent_id");
-        hoverpid = name
+        hoverpid = name;
 
         nameOverlay.textContent = name;
         // Highlight the feature if it's not already selected.
@@ -199,6 +176,8 @@ viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
 },
     Cesium.ScreenSpaceEventType.MOUSE_MOVE);
 
+
+//----------------------------------------------------------------------------------------------- 
 var pickBuildingFunction
 var pickYearOfConstruction
 var pickHeight
@@ -322,7 +301,6 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
     }
     else {
-
         //save the selected feature's original color
         if (pickedhigh) {
             highlightedFeatures.forEach(h => {
@@ -374,13 +352,11 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
 
     }
 
-
-
-
-
 },
     Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
+
+//filling the table in the info sidebar with data    
 function fillTableProperties(gID, sID) {
 
     if (drawBox === false) {
@@ -445,3 +421,13 @@ function fillTableProperties(gID, sID) {
     }
 
 }
+
+function randomRoofColor(){
+    var r = Math.floor(Math.random() * 10);
+    var shade =29*r;
+    
+    var color = new Cesium.Color;
+    Cesium.Color.fromBytes(shade,shade,shade,255,color);
+    //console.log(color);
+    return color;
+}