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.

1 Like

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

Use existing 3D models as test data

There are several 3D models and 3D Tilesets accessible to Sandcastle examples. If you need a model to test with, see: https://sandcastle.cesium.com/index.html?src=3D%20Models.html.

Alternatively you can upload your data to Cesium ion and share it in a Sandcastle example that way.

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);