How to share custom Sandcastle examples

This is a mini-guide on how to use Sandcastle, our online coding environment, to share code examples that others can run. When asking for help on the forum, or reporting a bug on GitHub, this helps get you a faster response since it saves us time in setting up or reproducing the issue.

Step 1 - Create your example on Sandcastle

Go to: https://sandcastle.cesium.com/index.html

Add your code there to reproduce the issue you’re having.

Step 2 - Click the “Share” button

This will give you a URL you can copy:

Step 3 - Share that URL

Paste that URL on the forum or in GitHub. Others can click on it to run the example.

(Optional) Step 4 - Share your data

If you have 3D models, imagery, terrain, or vector data you need to include in Sandcastle, sign up for a Cesium ion account and upload your data there.

1 Like
How to use glPolygonOffset inside fragmentShader to reduce z-fighting
KML clampping to 3Dtiles
Create Sandcastle demos for major Javascript frameworks
A lot of Lables are drawn by LableCollection ,but it is very Caton
Is there is any ways to develop 3d moon model
Huge memory leaks with rendering images as entities
How can I change outline color of billboard?
Only some 3D tile works
Label is gone when it is zoomed out
Control Earth rotation
Setting luminanceAtZenith value in Cesium3DTileset does not work
Object rotation and height
How entity above primitives
Extrusion of polygons with per position height
Orientation of entity changing even if the position is changed
Info Box Pops Up, But is Empty
Can't zoom in to ground with a custom ellipsoid
Moving (lowering/raising) WebMapTile...Provider in the ImageryLayerCollection
A lot of lables are drawn ,but it is very slow
Polyline geometry rendering color and order
The text in the label in the entity is sometimes not displayed
Low frame rate with dynamic SampledPositionProperty
How to get more zoom level on 3D Tiles with Terrain
Map mode rotate Blink issue
Camera move X pixels
Changing model's center
Lines disappears on zooming in
Quickest way to know if map is currently on terrain mode or not
Generating 3D geometry object with different base and top geometry
Is there a performance difference between primitives and entities?
Now polygon do not support callback,why? if that, how can do it? i
The objectsToExclude of clampToHeight does not work at the second time
GeoJsonDataSource.entities statement does nothing
Can not control camera on Flutter Webview with Stack Layout. IOS platform
Walls completely facing the sun appears dark
Cesium JS Dev tool crashed when two instances are running for long time
Model rotating with earth with czml positions
Creating polyline from array of x, y, z
Background issue visible after post processing (Android)
Camera orientation and Frustum intersection

Other helpful tips:

Customize the HTML

Sandcastle has an HTML & CSS tab you can use to add additional buttons, styling, or import third party libraries from a CDN if it’s relevant to your example.

Add Sandcastle buttons

It’s often helpful to add a button to trigger an action. In Sandcastle, you can do this with the following snippet:

Sandcastle.addToolbarButton("My Button", function () {
   console.log("My button was pressed");
   // Add any code here. 
});

This will create an HTML button you can click on to run that code:

image

Share specific camera views

If the problem you’re trying to show only happens in a particular camera view, it’s helpful to be able to navigate to that view, save the camera, and share that. You can do this in Sandcastle by pasting the following code in your example:

Sandcastle.addToolbarButton('Get Camera', function(){
  console.log(getCameraFlyTo());
});
function getCameraFlyTo() {
    var camera = viewer.camera;
    var position = camera.position;
    var direction = camera.direction;
    var up = camera.up;

    var cameraString = '{\n\
        destination : new Cesium.Cartesian3(' + position.x + ', ' + position.y + ', ' + position.z + '),\n\
        orientation : {\n\
            direction : new Cesium.Cartesian3(' + direction.x + ', ' + direction.y + ', ' + direction.z + '),\n\
            up : new Cesium.Cartesian3(' + up.x + ', ' + up.y + ', ' + up.z + '),\n\
        },\n\
        duration : 3\n\
    }';
    return cameraString;
}

This will add a “Get Camera” button that will print the camera view to the console. You can then fly to that view using viewer.camera.flyTo(<output_from_console_here>).

1 Like

Click to get position

This is often useful if you’re trying to create any custom geometry on the map (like create a polygon or add a label):

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(result) {
    var worldPosition = viewer.scene.pickPosition(result.position);
    var carto = Cesium.Cartographic.fromCartesian(worldPosition);
    console.log(carto); //Or print the worldPosition for the Cartesian3 coordinate.
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
1 Like