I'm trying to add an image layer to CesiumJS using a georeferenced TIFF file, but I'm unable to get the image to display on the map. In order to do so, I uploaded my TIFF file as an asset to Cesium Ion, and got the code provided by Cesium Ion itself to import the image in Cesium JS. I get errors everytime, and the code doesn't work on Cesium Sandcastle either. I've followed the Cesium documentation and examples, but nothing seems to be working correctly. For reference, this is the doc i was following, and more but this was the main one: https://cesium.com/learn/3d-tiling/ion-tile-imagery/
Here's what i've done:
Firstly, I downloaded their example Image: A courtyard tif file (Courtyard.tif) Then, I uploaded it as an asset on Cesium Ion (Data type - Raster Imagery as mentioned in their doc) After it is done uploading, it provides a code.
const layer = viewer.imageryLayers.addImageryProvider(
await Cesium.IonImageryProvider.fromAssetId(1942848)
);
I paste this into my HelloWorld file, in the Javascript part which now looks like below:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8" />
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Hello World!</title>
<script src="../Build/CesiumUnminified/Cesium.js"></script>
<style>
@import url(../Build/CesiumUnminified/Widgets/widgets.css);
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
const viewer = new Cesium.Viewer("cesiumContainer");
const layer = viewer.imageryLayers.addImageryProvider(
await Cesium.IonImageryProvider.fromAssetId(1942848)
);
</script>
</body>
</html>
And the error I get on the console is:
HelloWorld.html:33 Uncaught SyntaxError: missing ) after argument list
As seen in the side panel here, below the code, there's an option for me to run this directly on Cesium's SandCastle editor and there I get: Request has failed. Status Code: 404. And this is the code that's on the SandCastle.
// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = "MY_TOKEN_HERE";
const viewer = new Cesium.Viewer("cesiumContainer");
try {
const imageryLayer = viewer.imageryLayers.addImageryProvider(
await Cesium.IonImageryProvider.fromAssetId(1942848)
);
await viewer.zoomTo(imageryLayer);
} catch (error) {
console.log(error);
}