How to share custom Sandcastle examples

General
1

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:

image
image900×255 27.6 KB

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.

2 Likes
2

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
3

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