CesiumJS complete code

The page contains the complete code that can be run and tested in Cesium Sandcastle

const TOKEN = ""; // IMPORTANT: Place here the project session token between the ""
const BGCOLOR = "1f1f00"; // ff0000 is red, hexadecimal color
const SHADOW = true; //true ,false
const BASEMAP_INDEX = 0; // SATELLITE=0, TOPOGRAPHIC=1 and GRAY=2.
const STYLE = "COLORED"; // WHITE, COLORED
const SPACING = 10;
const TEXTURE = "MEDIUM"; // SMALL, MEDIUM , LARGE
const FEATURE_ID = "ID";
const BASEURL = "https://engine.tygron.com/web/";

// Constants
const dim = 128;
const minLevel = 6;
const maxLevel = 19;
const tilepx = 512;

// Construct the default list of terrain sources.
var terrainModels = [];
terrainModels.push(new Cesium.ProviderViewModel({
	name: "Project Terrain",
	category: "Terrain",       
    tooltip: "",
	iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
	creationFunction: function () {
		return new Cesium.CustomHeightmapTerrainProvider({
			width: dim,
			height: dim,
			maximumLevel: maxLevel,
			callback: function (x, y, level) {
				if (level <= 10) { // ignore zoom levels 10 and lower
					return new Float32Array(dim * dim); // all zeros
				}
				const test = Cesium.Resource.fetchArrayBuffer(BASEURL+'terrain/' + level + '/' + x + '/' + y + '.bin?worlddatum=true&token='+TOKEN+'&width=' + dim + '&height=' + dim);
				return test.then(function (buffer) {
					const array = new Float32Array(dim * dim); // all zeros
					const view = new DataView(buffer);
					for (let i = 0; i < dim * dim; i++) {
						array[i] = view.getFloat32(i * 4);
					}
					return array;
				});
			},
		});
	}
}));

var imageryViewModels = [];
const baseMaps = ["SATELLITE", "TOPOGRAPHIC", "GRAY"];
	for (let i = 0; i < baseMaps.length; i++) {
	imageryViewModels.push(new Cesium.ProviderViewModel({
		name: baseMaps[i],
		category: "Base Map",
             tooltip: "",
      

		iconUrl: Cesium.buildModuleUrl('Widgets/Images/TerrainProviders/Ellipsoid.png'),
		creationFunction: function () {
			return new Cesium.WebMapServiceImageryProvider({
				url: BASEURL+'wms',
				layers: baseMaps[i],
				maximumLevel: maxLevel,
				tileHeight: tilepx,
				tileWidth: tilepx,
				getFeatureInfoFormats: [new Cesium.GetFeatureInfoFormat("json", "application/json")],
				proxy: new Cesium.DefaultProxy('/proxy/'),
				parameters: {
					crs: "4326",
					forcexy: "true",
					bgcolor: BGCOLOR,
					walled: "false",
					token: TOKEN
				},
				getFeatureInfoParameters: {
					crs: "4326",
					forcexy: "true",
					token: TOKEN,
				},
			});
		}
	}));
}

// Construct the viewer, with a high-res terrain source pre-selected.
var viewer = new Cesium.Viewer('cesiumContainer', {
	terrainProviderViewModels: terrainModels,
	selectedTerrainProviderViewModel: terrainModels[0],
	imageryProviderViewModels: imageryViewModels,
	selectedImageryProviderViewModel: imageryViewModels[BASEMAP_INDEX],
	animation: false,
	timeline: false,
	homeButton: false,
	navigationHelpButton: false,
	navigationInstructionsInitiallyVisible: false,
	fullscreenButton: false,
	shadows: SHADOW,
});


var neighborhoodUrl = new Cesium.Resource({
	url: BASEURL+"neighborhoods.geojson",
	queryParameters: {
		token: TOKEN,
		crs: "4326",
		forcexy: "true",
	}
});

var data = await neighborhoodUrl.fetchJson();
var labels = data.features;
for (var i = 0; i < labels.length; ++i) {
	var p = labels[i];
	var longitude = p.geometry.coordinates[0];
	var latitude = p.geometry.coordinates[1];
	var height = p.geometry.coordinates[2] == null ? 200 : p.geometry.coordinates[2] + 200;
	var id = p.properties[FEATURE_ID];
		const entity = viewer.entities.add({
		position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
		label: {
			text: p.properties.name,
			font: "12pt arial",
			style: Cesium.LabelStyle.FILL_AND_OUTLINE,
			outlineWidth: 2,
			verticalOrigin: Cesium.VerticalOrigin.TOP,
			fillColor: Cesium.Color.WHITE,
		}
	});
}

/* Overlay Variables */
var overlayLayer = null;

const activateOverlay = function(overlayID, timeframe, difference){
    
  const provider = new Cesium.WebMapServiceImageryProvider({
	url: BASEURL+'wms',
	layers: overlayID,
	maximumLevel: maxLevel,
	tileHeight: tilepx,
	tileWidth: tilepx,
	proxy: new Cesium.DefaultProxy('/proxy/'),
	parameters: {
		crs: "4326",
		forcexy: "true",
		token: TOKEN,
		timeframe: timeframe,
		styles: difference ? "DIFFERENCE" : "",
	},
	getFeatureInfoParameters: {
		crs: "4326",
		forcexy: "true",
		token: TOKEN,
		timeframe: timeframe,
		styles: difference ? "DIFFERENCE" : "",
	}
});
    viewer.imageryLayers.remove(overlayLayer);
    var newOverlayLayer = new Cesium.ImageryLayer(provider, { minimumTerrainLevel: minLevel });
    viewer.imageryLayers.add(newOverlayLayer);
    if (overlayLayer !== null) {
	    overlayLayer.destroy();
    }
    overlayLayer = newOverlayLayer;
};




const start = async function () {	
	var tileset = await Cesium.Cesium3DTileset.fromUrl(BASEURL+'3dtiles/tileset.json?token='+TOKEN+'&style='+STYLE+'&spacing='+SPACING+'&texture='+TEXTURE);
	viewer.scene.primitives.add(tileset);
  
    var boundingSphere = tileset.root.boundingVolume._boundingSphere;
    viewer.camera.viewBoundingSphere(tileset.root.boundingVolume._boundingSphere);
    viewer.camera.flyToBoundingSphere(tileset.root.boundingVolume._boundingSphere);

    activateOverlay(1, 0, false);
};



start();