How to share custom Sandcastle examples

General
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