show or hide entity

[mbun...@gmail.com]

Hi all!

I'd like to add show/hide feature for entity in my application. I'd also like to control this action with checkbox. Below is my experiment.

if (checkbox_nn.checked){
.
.
.
var redLine = viewer.entities.add({
name : 'Red line on the surface',
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(array_of_coordinates),
width : 3,
material : Cesium.Color.RED
}
});
}
else {
viewer.entities.remove(redLine); //this is not working
}

Help please. Thank you in front!

[Hannah Pinkos]

Hello,

Instead of adding and removing your entities, you can simply change the value of the show property for the entity.  Here is an example:

var viewer = new Cesium.Viewer('cesiumContainer');

var redLine = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width : 5,
        material : Cesium.Color.RED
    }
});

Sandcastle.addToolbarButton('Toggle Show', function() {
    redLine.show = !redLine.show;
});

viewer.zoomTo(viewer.entities);

Best,

Hannah

[mbun...@gmail.com]

I've tried and i got error:

"Sandcastle-header.js:40 Uncaught TypeError: Cannot read property 'appendChild' of null"

in my web browser.

Do I have to change sandcastle-header.js?

[Hannah Pinkos]

That might be happening because I used Sandcastle.addToolbarButton  to add a button to the example. This code runs in our Sandcastle app: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases

The code will work in your app if you remove the sandcastle specific function and call redLine.show = !redLine.show; from somewhere in your app.

Best,

Hannah

[mbun...@gmail.com]

It's not working. It says: "redLine is not defined"

Here's the part of code. I'm using jquery.ajax to fetch data from database using jsonp

if (checkbox_nn.checked){
jQuery.ajax({
type: 'GET',
url: url2,
dataType: 'jsonp',
jsonp: "cb",
jsonpCallback: "jQ2",
data:{x:x,
y:y
},
crossDomain:true,
cache:false,
beforeSend : function(jqXHR, settings){
var url2 = settings.url;
var url2 = url2.replace("&_=","&ts=");
console.log(url2);
jqXHR.url= url2;
settings.url = url2;
//console.log(settings.url);
},
success: function(data){
//drawing of low voltage layer
for (var i=0; i < data.length; i++){
for (var l=0; l<data[i].POINT.length; l++){
array_of_coordinates.push(data[i].POINT[l].p_x);
array_of_coordinates.push(data[i].POINT[l].p_y);
}
var redLine = viewer.entities.add({
name : 'Red line',
polyline : {
positions:
Cesium.Cartesian3.fromDegreesArray(array_of_coordinates),
width : 2,
material : Cesium.Color.RED
}
});
array_of_coordinates=[];
}
},
error: function (jqXHR, status, error) {
console.log(status, error);
}
});
}
else{
redLine.show = !redLine.show;
};

[mbun...@gmail.com]

Until i find better solution, i'll use

> else {
viewer.entities.removeAll(); //THIS

[mbun...@gmail.com]

Hi!

The problem remains. I still want to remove polyline according to checkbox state.

I have my code

if(something.checked){
var yellowLine = viewer.entities.add...
}else{
viewer.entities.remove(yellowLine);
}

and in my browser i got error:
yellowLine is not defined Uncaught reference error

Any one any idea?!

[mbun...@gmail.com]

I'm on the half way to get this done. The problem is in the scope of variable

If(checkbox.checked){
// jquery sets variable 'yellowLine'
}

If(!checkbox.checked){
viewer.entities.remove(yellowLine) //doesn't see the 'yellowLine'
}

Does anyone hava an idea?

[hoai...@gmail.com]

Thanks, Hannah for your solution. I tried your method and I was able to either completely remove the redline or hide it.

Best!