CODEWITHSUNDEEP
typescriptcesiumjs
Yordan Yanakiev
Yordan Yanakiev

Reputation: 2604

Using Cesium with TypeScript?

I am unable to run Cesium with TypeScript, it constantly fails with the mistake that "cesium" is not available in one or another form of error.

I have this project tree:

enter image description here

in tsconfig.json:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "allowJs": true,
    "noEmit": true,
    "types": [],
    "strict": true
  },
  "exclude": [
    "node_modules",

    "Build"
  ],
  "include": [

    "Build/CesiumUnminified/Cesium.js"
  ]
}

in index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CesiumTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="manifest.json" rel="manifest" />
    <link href="css/syncfusion-blazor-icons.css" rel="stylesheet" />
    <link href="Build//Cesium/Widgets/widgets.css" rel="stylesheet" />
    <link rel="stylesheet" href="_content/Syncfusion.Blazor/styles/bootstrap4.css" />

</head>

<body>
    <app>Loading...</app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>navigator.serviceWorker.register( 'service-worker.js' );</script>
    <script src="Source/Cesium.js"></script>

    <script src="Main.js" ></script>
</body>

</html>

in Main.ts:

import * as Cesium from "cesium";


let map: Cesium.Viewer = undefined;

function createTheMap()
{
    if (map === undefined) {

        map = new Cesium.Viewer("mapViewDiv",
            {
                timeline: false,
                animation: false,
                infoBox: false,
                navigationHelpButton: false,
                fullscreenButton: false,
                geocoder: false,
                shadows: false



            });

        console.log( map );

    }
    map.zoomTo(map.entities);
};

PS. The project is fully client side - therefore Node.js is not used.

Upvotes: 2

Views: 2589

Answers (3)

alisahindev
alisahindev

Reputation: 415

There is no need for TypeScript configuration for Cesium. Cesium installs it for you, including the Typescript configuration.

@types/cesium

Upvotes: -1

nshen
nshen

Reputation: 1

run yarn create cesium you will get a new typescript scaffolding without config by yourself

Upvotes: 2

japrescott
japrescott

Reputation: 5023

generally, you will need to add the @typings for cesium to your project. But if you have it installed locally, you will want to either

  • import it from the directory àla import * as Cesium from "../Build/Cesium/Cesium.js"; (but this will fail since its outside of your rootDir)

  • add it to paths in your tsconfig inside the compilerOptions;

    compilerOptions: { ... "paths": { "cesium": ["../Build/Cesium/cesium.js"] } }

Upvotes: 0

Related Questions