Highlight area

vcm/config.json

@@ -244,6 +244,51 @@
           "properties": [],
           "balloonHeader": "Balloon header"
         },
+        {
+          "template": [
+            "<div class='balloon' id='myBalloon'>",
+            "<div class='balloon-content'>",
+            "<h1 class='balloon-title'>Balloon header</h1>",
+            "<% for (var key in obj) { %>",
+            "<% if (obj[key] instanceof Object){%>",
+            "<% for (var key2 in obj[key]) { %>",
+            "<p class='balloon-text'><span class='balloon-street'> <strong> <%=key%>.<%=key2%> </strong> : <%=obj[key][key2]%></span><br></p>",
+            "<% } %>",
+            "<% } else{ %>",
+            "<p class='balloon-text'>",
+            "<span class='balloon-street'> <strong> <%=key%> </strong> : <%=obj[key]%></span><br>",
+            "</p>",
+            "<% } %>",
+            "<% } %>",
+            "</div>",
+            "<div class='balloon-close-col'>",
+            "<button class='close-balloon'><i class='fa fa-times fa-lg'></i></button>",
+            "</div>",
+            "<div class='dialog-image-balloon'></div>",
+            "<div class='balloon-left-edge'></div>",
+            "</div>"
+          ],
+          "layerTypes": [
+            null
+          ],
+          "layerNames": [
+            "Rosenstein"
+          ],
+          "minTop": "balloonHeight + 30",
+          "minLeft": "70",
+          "allAvailable": true,
+          "properties": [
+            {
+              "title": "creationDate",
+              "name": "creationDate"
+            },
+            {
+              "title": "gml:name",
+              "name": "gml:name"
+            }
+          ],
+          "balloonHeader": "Balloon header"
+        },
         {
           "template": [
             "<div class='balloon' id='myBalloon'>",
@@ -318,6 +363,7 @@
             "<p class='balloon-text'><span>Für mehr Infos klicken Sie bitte hier!</span><br></p>",
             "<button id='newP' onclick='newPlan()'>Neue Planung</button>",
             "<button id='oldZ' onclick='oldZust()'>Ist Zustand</button>",
+            "<button id='high' onclick='highlightStuff()'>Highlight</button>",
             "</div>",
             "<%  %>"
 

vcm/templates/custom.js

@@ -230,7 +230,7 @@ var layersZus = frameworkZus.getLayers();
 var layerStock = layersZus[3];
 
 layerStock.showObjects(["DEBW522AA00022dcc", "DEBW522AA0003bf3b","DEBW522AA0000976a","DEBW522AA00001d00"]);
-  
+ 
 
 }
 
@@ -250,4 +250,38 @@ var layerStock = layersZus[3];
 
 layerStock.hideObjects(["DEBW522AA00022dcc", "DEBW522AA0003bf3b","DEBW522AA0000976a","DEBW522AA00001d00"]);
   
+}
+
+function highlightStuff() {
+  highlightBuildings(3,["DEBW522AA00022dcc", "DEBW522AA0003bf3b","DEBW522AA0000976a","DEBW522AA00001d00"]); 
+}
+
+function highlightBuildings(layerIndex, id){
+
+  var Framework = vcs.vcm.Framework.getInstance();
+  var layers = Framework.getLayers();
+  var layer = layers[layerIndex];
+  layer.highlight({"DEBW522AA00022dcc":Cesium.Color.fromCssColorString("#BB8FCE")})
+  layer.highlight({"DEBW522AA0003bf3b":Cesium.Color.fromCssColorString("#BB8FCE")})
+  layer.highlight({"DEBW522AA0000976a":Cesium.Color.fromCssColorString("#BB8FCE")})
+  layer.highlight({"DEBW522AA00001d00":Cesium.Color.fromCssColorString("#BB8FCE")})
+
+  layer2 = layers[2];
+  var tileset = layer2.getCesium3DTileset();
+
+  tileset.style = new Cesium.Cesium3DTileStyle({
+    color: {
+      conditions: [
+          ["true", "rgb(127, 59, 8)"],
+      ],
+    },
+  });
+
+  // ----------why does this not work?
+  // for (i = 0; i < id.length - 1; i++){
+  //   idtext = '' + id[i]
+  //   layer.highlight({idtext:Cesium.Color.fromCssColorString("#BB8FCE")})
+  //   console.log("layer.highlight({" + idtext + ":Cesium.Color.fromCssColorString('#BB8FCE')})")
+  // }
+
 }
\ No newline at end of file