Is there a way to make the (zoom) transition between fixed heights more fluid? and other questions

I add zoom control button set to fixed height values: 10km, 100km, 500km, 1000km, 2500km, 25000km.
1) Is there a way to make the (zoom) transition between fixed heights more fluid?

2) Why can not I scroll over cesium globe? Is there a way to solve this issue to scroll all page, over the globe too?
(Note: in my js I add this line of code
viewer.scene.screenSpaceCameraController.enableZoom = false;
to prevent zoom in cesium iframe when I use mouse wheel to scroll up and down.)

3) I use a KML file to add markers on globe. These markers are grouped in some different folder (<folder> kml tag). Is there a way to create a html structure like this (see below) to select (with checkbox) different folders?
            <input type="checkbox"><label>title folder 1</label>
            <input type="checkbox"><label>title folder 2</label>
            <input type="checkbox"><label>title folder 3</label>

This is my example page

Many thanks,

This is my js code (of the original globe map page contained into my iframe):

var rectangle = Cesium.Rectangle.fromDegrees(-20, 75, 40, 15)

Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = rectangle;

var viewer = new Cesium.Viewer('cesiumContainer', {
    animation: false,
    timeline: false,
  geocoder: false

viewer.scene.screenSpaceCameraController.enableZoom = false;

var cartographic = new Cesium.Cartographic();
var cartesian = new Cesium.Cartesian3();
var camera =;
var ellipsoid = viewer.scene.mapProjection.ellipsoid;
var toolbar = document.getElementById('toolbar');
toolbar.innerHTML = '<div id="hud"></div>' +
    '<button type="button" class="cesium-button" id="h1km">1km height</button></br>' +
    '<button type="button" class="cesium-button" id="h2km">2km height</button></br>' +
    '<button type="button" class="cesium-button" id="h10km">10km height</button></br>' +
    '<button type="button" class="cesium-button" id="h100km">100km height</button></br>' +
    '<button type="button" class="cesium-button" id="h500km">500km height</button></br>' +
    '<button type="button" class="cesium-button" id="h1000km">1000km height</button></br>' +
    '<button type="button" class="cesium-button" id="h2500km">2500km height</button></br>' +
    '<button type="button" class="cesium-button" id="h25000km">25000km height</button>';

toolbar.setAttribute('style', 'background: rgba(42,42,42,0.9); border-radius: 5px;');

var hud = document.getElementById('hud');

viewer.clock.onTick.addEventListener(function(clock) {
    ellipsoid.cartesianToCartographic(camera.positionWC, cartographic);
    hud.innerHTML =
        'Lon: ' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(3) + ' deg<br/>' +
        'Lat: ' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(3) + ' deg<br/>' +
        'Alt: ' + (cartographic.height * 0.001).toFixed(1) + ' km';

function setHeightKm(heightInKilometers) {
    ellipsoid.cartesianToCartographic(camera.position, cartographic);
    cartographic.height = heightInKilometers * 1000; // convert to meters
    ellipsoid.cartographicToCartesian(cartographic, cartesian);
    camera.position = cartesian;

document.getElementById('h1km').addEventListener('click', function() {
}, false);

document.getElementById('h2km').addEventListener('click', function() {
}, false);

document.getElementById('h10km').addEventListener('click', function() {
}, false);

document.getElementById('h100km').addEventListener('click', function() {
}, false);

document.getElementById('h500km').addEventListener('click', function() {
}, false);

document.getElementById('h1000km').addEventListener('click', function() {
}, false);

document.getElementById('h2500km').addEventListener('click', function() {
}, false);

document.getElementById('h25000km').addEventListener('click', function() {
}, false);

          canvas: viewer.scene.canvas
    destination: Cesium.Rectangle.fromDegrees(-20, 75, 40, 15)

About my third question I find this js code:
but I'm not able to do this one.

Please, give me definitive js solutions.
I'm not a developer.

Thank you,

For smoother transitions, replace


with the camera flyTo method:

You might need to set the camera’s orientation too.

To enable zoom with mouse wheel, remove the line that disables it:

viewer.scene.screenSpaceCameraController.enableZoom = false;


I think you’ll need to write more JavaScript code to capture the scroll event in the outer page and not pass it to the iframe if that’s the problem. I would google for JavaScript solutions to that since it’s not Cesium specific. But if might be easier if you just embed the cesium app itself in the page, as opposed to using an iframe. Is there a reason the iframe is necessary here?

For your KML/folder question, this is again another question that would require a bit more JavaScript knowledge to code up. You’d need to have a web server read the directory and serve up the files in that directory when clicked on. CesiumJS can load any KML that you have a link to, so clicking the file just needs to run :

canvas: viewer.scene.canvas


Except with a URL to the file you clicked on instead of that one.