I keep on getting this error when i load cesium in my react web page "SyntaxError: Unexpected token ‘<’, "<!DOCTYPE “… is not valid JSON”. I am new to Cesium JS. I have followed all the tutorials and some issues but i can not sem to solve. This is my code at the moment. Please help me see what ii could be ding wrong
import { useEffect, useRef } from “react”;
import “cesium/Build/Cesium/Widgets/widgets.css”;
import * as Cesium from “cesium”;
function CityGMLViewer() {
const cesiumContainerRef = useRef(null);
const newBuildingTilesetRef = useRef(null); // Store the new building tileset for later use
useEffect(() => {
const script = document.createElement(“script”);
script.src = “https://cesium.com/downloads/cesiumjs/releases/1.126/Build/Cesium/Cesium.js”;
script.async = true;
script.onload = () => {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://cesium.com/downloads/cesiumjs/releases/1.126/Build/Cesium/Widgets/widgets.css";
document.head.appendChild(link);
const style = document.createElement("style");
style.innerHTML = `
#toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; }
`;
document.head.appendChild(style);
// Your access token from Cesium Ion
Cesium.Ion.defaultAccessToken = 'mytoken';
// Initialize the viewer with Cesium World Terrain
const viewer = new Cesium.Viewer(cesiumContainerRef.current, {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
// Add Cesium OSM Buildings and GeoJSON
const loadBuildings = async () => {
try {
const buildingsTileset = await Cesium.createOsmBuildingsAsync();
viewer.scene.primitives.add(buildingsTileset);
// Load GeoJSON
const geoJSONURL = await Cesium.IonResource.fromAssetId('3097182');
const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true });
const dataSource = await viewer.dataSources.add(geoJSON);
for (const entity of dataSource.entities.values) {
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
}
// Hide specific buildings
buildingsTileset.style = new Cesium.Cesium3DTileStyle({
show: {
conditions: [
['${elementId} === 588791919', false],
['${elementId} === 419899272', false],
['${elementId} === 27230506', false],
['${elementId} === 341646730', false],
[true, true]
]
},
color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')"
});
// Add a new building tileset from Cesium Ion
const newBuildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId('3097182');
viewer.scene.primitives.add(newBuildingTileset);
viewer.flyTo(newBuildingTileset);
newBuildingTilesetRef.current = newBuildingTileset; // Store for later use
} catch (error) {
console.error("Error loading resources:", error);
}
};
loadBuildings();
return () => {
// Cleanup Cesium resources when component unmounts
if (viewer) {
viewer.destroy();
}
};
};
document.body.appendChild(script);
return () => {
// Cleanup the script in case of component unmount
document.body.removeChild(script);
};
}, );
useEffect(() => {
// Attach event listener for the toggle button
const toggleButton = document.querySelector(“#toggle-building”);
if (toggleButton && newBuildingTilesetRef.current) {
toggleButton.onclick = () => {
const newBuildingTileset = newBuildingTilesetRef.current;
if (newBuildingTileset) {
newBuildingTileset.show = !newBuildingTileset.show;
}
};
}
}, [newBuildingTilesetRef.current]); // Only run when newBuildingTilesetRef changes
return (
<div id=“cesiumContainer” ref={cesiumContainerRef} style={{ height: “100vh” }}>
Toggle new building
);
}
export default CityGMLViewer;