Entity Infobox respond too slow when clicked

Hi Guys,

My infoboxes are responding too slow to show up after i started passing data from database. Its like i am getting PHP data, converting it to Javascript and passing this data to infobox for entities.

This resulted damm slowness.
Can you guys please guide me what could be done to improve its response time ?

Thanks,
Kulvinder Singh

I would profile your application to see where this delay is coming from. Do you fetch the data only when the user clicks on your entity? Is the bottleneck coming from the network?

Hi Omar,

Thanks for responding.

I nailed the issue. The below code is responsible for slowness. What i am doing is, i drawn a dome based on the database values and passing in the infobox the db values. At the same time if i click the dome, the color of the dome should change. The following code is doing the trick for me to change the color, but it slowed down the response time to say 5-10 seconds. Is there another way that i can use in my application to overcome this slowness if i use the following code:

                     var scene = viewer.scene;
                   
                    if (!scene.pickPositionSupported) {
                        window.alert('This browser does not support pickPosition.');
                    }
                    var handler;
                    handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                    handler.setInputAction(function(click) {
                    var pickedObject = scene.pick(click.position);
                    if (Cesium.defined(pickedObject) && (pickedObject.id === dome))
                    {        
                      dome.ellipsoid.material = Cesium.Color.GREEN.withAlpha(0.3); 
                    }
                      else {
                                dome.ellipsoid.material = Cesium.Color.DARKORANGE.withAlpha(0.3);
                        }
                      
                    }, Cesium.ScreenSpaceEventType.LEFT_CLICK); 
                    

                    var dome =  viewer.entities.add({
                    name : name,
                    position: Cesium.Cartesian3.fromDegrees(city.longitude, city.latitude),
                    ellipsoid : {
                        radii : new Cesium.Cartesian3(72.0,-42.0,15000),
                         maximumCone : Cesium.Math.PI_OVER_TWO, 
                        material : Cesium.Color.DARKORANGE.withAlpha(0.3),
                        outline : true
                    }
                });

Thanks,
Kulvinder Singh

What exactly is slow in your application? Does it just take 5-10 seconds to update the color of the dome? Or something else?

Both, the color and inforbox take 5-10 seconds do show up when i use handler code to apply click event. Not sure if i am doing it wrong.

At least for the color change, try making the material property a CallbackProperty. That should help speed it up greatly. See the drill down picking part of this example in the sandcastle. https://sandcastle.cesium.com/?src=Picking.html

1 Like

Hi @Dana_Conway,
Thanks for responding, but it did not help.

Thanks,

I am sorry that did not work for you. Did you try to make your position property a CallbackProperty as well? I have a project where I was drawing Polylines. They took about 5 - 10 seconds to draw, but once I changed the positions property to a Callback, it drew almost immediately. I got the information from this post: https://github.com/CesiumGS/cesium/issues/3740

1 Like

Hi @Dana_Conway,

Thanks.

I will take a look into this and reach you again if i find any difficulty.

Much thanks for guiding me out on this.

Thanks,
Kulvinder Singh

Hi Guys,

Saturn is not changing the color on click, Can you please take a look:

Thanks,
Kulvinder

Hi Guys,

@Hyper_Sonic, @omar Can’t we handle entities this way:

var myentity = viewer.entities.add({
name: “Saturn”,
id : ‘uniqueId’,
position: saturnPosition,
ellipsoid: {
radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
material: new Cesium.Color(0.95, 0.82, 0.49),
},
});

var entity = viewer.entities.getById(myentity.id);

entity.addEventListener(“click”, function (e) {
alert(“myentity is clicked”);

});

I am getting following error

Uncaught TypeError: entity.addEventListener is not a function (on line 22)

Here is the sandcastle:

Thanks,
Kulvinder

In your handler.setInputAction function, you need to change entity.ellipsoid.color to entity.ellipsoid.material. Also, you’ll want to check if the pickedObject is defined, not cartesian.

if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.id === entity) {
entity.ellipsoid.material = Cesium.Color.RED;
}
else
{
entity.ellipsoid.material = Cesium.Color.WHITE;

    }

Hi @Dana_Conway,

Thanks for pointing this, i worked fine. Now i am seeing another error for id. When i click the saturn, it changes color but also throws error in console tab. Would you be able to take a look please:


Thanks,
Kulvinder Singh

You would have to make the other change I mentioned in order to get rid of the error. Instead of checking for the cartesian to be defined, which it will be because it’s a position, you need to check for the pickedObject to be defined. Change Cesium.defined(cartesian) to Cesium.defined(pickedObject). :slight_smile:

1 Like

Thanks @Dana_Conway

I will take a look.

Have a good weekend!!!

Kulvinder Singh