How to add entities to CesiumWidget? (not Viewer)

CesiumJS
1

I’ve been experimenting with using Cesium.CesiumWidget rather than the Viewer. I’m stuck when it comes to adding entities and data sources. I’ve created a minimal example on Sandcastle and also included the example code below for convenience. Would anybody be able to provide some guidance as to why this data point isn’t rendering on the globe?

var widget = new Cesium.CesiumWidget("cesiumContainer");
var scene = widget.scene;

var dataSourceCollection = new Cesium.DataSourceCollection();
var dataSourceDisplay = new Cesium.DataSourceDisplay({
  scene: scene,
  dataSourceCollection: dataSourceCollection
});
var entities = dataSourceDisplay.defaultDataSource.entities;

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    pixelSize: 20,
    color: Cesium.Color.YELLOW,
  },
});
1 Like
2

@obviousOak

Welcome to the community! :rocket: :fireworks:

Is there a particular reason why you are using Cesium.CesiumWidget rather than the Viewer? Some more information on your use case might help clarify this.

I have limited experience using Cesium.CesiumWidget. From my understanding, Cesium.CesiumWidget is similar to Cesium.Viewer, but it is trimmed down significantly. Essentially, it is just a widget for the 3D Globe. It does not include animation, imagery selection, and other widgets. In addition, it does not depend on the 3rd party Knockout Library. Thus, it is not appropriate for many applications.

Given its limited functionality, Cesium.CesiumWidget should only be used for very particular applications. This sandcastle demo showcases the various ways that points can be added to the Cesium viewer.

In addition, CZML can be used to easily add points to the viewer.

Let me know if you have any other questions or concerns. I am looking forward to learning more about your project!

-Sam

3

Hi @sam.rothstein, thanks for your response!

I started learning Cesium using the Viewer, and it is certainly easier to use. There are also a lot more useful examples out there that use than Viewer compared to the Widget.

However, I’m trying the Widget now rather than the Viewer because the plan is to embed Cesium into some pre-existing infrastructure that is built using Backbone (making Knockout redundant). We also plan to build our own custom UI, making most of the additional widgets unnecessary. I know that they can be disabled using the Viewer's ConstructorOptions, but the simpler Widget still seems more appropriate so far.

At this point, I’m also just curious, for learning purposes, how to add entities to the Widget!

I did figure out how to add a custom geometry (using this tutorial):

var widget = new Cesium.CesiumWidget("cesiumContainer");
var scene = widget.scene;

var instance = new Cesium.GeometryInstance({
  geometry : new Cesium.RectangleGeometry({
    rectangle : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),
    vertexFormat : Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT
  })
});

scene.primitives.add(new Cesium.Primitive({
  geometryInstances : instance,
  appearance : new Cesium.EllipsoidSurfaceAppearance({
    material : Cesium.Material.fromType('Stripe')
  })
}));

Here is the above code on Sandcastle

1 Like
4

@obviousOak

Thank you for sharing some more details on your use case! I am starting to understand why you are using the Widget and not the Viewer. Are you certain the Viewer can’t be embedded into your Backbone based infrastructure? Regardless, your demo looks amazing!

image
image716×385 31.8 KB

From the perspective of a user of your application, I will note that the scene is somewhat dark. You might want to consider changing the time of day for a brighter and more visible scene.

image
image743×385 50.3 KB

Let me know what you think! Please keep me posted on this project :rocket:

-Sam

5

For anyone who is having the same problem, here is the solution on Sandcastle - code also copied below.

My first example was missing dataSourceDisplay.update(time) - this needs to be run once the data sources are ready to be rendered on the globe (in this case, when the defaultDataSource from the dataSourceDisplay is ready).

In my solution dataSourceDisplay.update is called on every clock tick. This is also how the Cesium.Viewer does it. However, I think calling update so often seems excessive. Unfortunately, I couldn’t find an event that is fired when the datasources are ready for this update event. If someone finds a better solution one day, I would appreciate it if you were to share it here!

var clock = new Cesium.Clock();
var widget = new Cesium.CesiumWidget("cesiumContainer", {
  clock: clock,
});
var scene = widget.scene;

var dataSourceCollection = new Cesium.DataSourceCollection();
var dataSourceDisplay = new Cesium.DataSourceDisplay({
  scene: scene,
  dataSourceCollection: dataSourceCollection
});
var entities = dataSourceDisplay.defaultDataSource.entities;

entities.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
  point: {
    pixelSize: 20,
    color: Cesium.Color.YELLOW,
  },
});

clock.onTick.addEventListener(function() {
  dataSourceDisplay.update(clock.currentTime);
});
1 Like
6

@obviousOak

Thank you for this!

-Sam