Minimal (getting started) sample using TypeScript

CesiumJS
1

Please provide a minimal code for creating a map using TypeScript, and the required part of the downloaded package for it.

import * as Cesium from “cesium”;

import { Viewer } from “cesium”;

let map: Viewer = undefined;

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

    map = new Viewer( "mapViewDiv",
        {
            timeline: false,
            animation: false,
            infoBox: false,
            navigationHelpButton: false,
            fullscreenButton: false,
            geocoder: false,
            shadows: false  
        } );

    console.log( map );

    addMarker();
   

}

 map.zoomTo(map.entities);

};

this is the function which I am trying to create the map as I would do normally in JS, but it report me the following error :
Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: cesium_1 is undefined
when running.

1 Like
2

Found the issue.
Seems like referenting directly Viewer is not a good idea and it is leading to the issue above in ASP.

1 Like
3

Unfortunately this mistake:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: cesium_1 is undefined

is gone, but now I am not sure what is wrong with the namespace or something, since I am receiving the follow :

TypeError: Error resolving module specifier: cesium

in Firefox, and :

Uncaught TypeError: Failed to resolve module specifier “cesium”. Relative references must start with either “/”, “./”, or “…/”.

in Chrome.

What could be causing this issue ?

1 Like
5
6

Cesium is distributed as a Node package (NPM). The way Typescript supports typings in packages is to put a “types” field in the package.json which points to the typings file (.d.ts) for the package. This way, when you say import { Viewer } from cesium in your TS, the IDE knows to look at node_modules/cesium/package.json which points to node_modules/cesium/Source/Cesium.d.ts. You may have to explicitly tell TS to use “node style” module resolution, which is a line in your tsconfig.json.

That said, your error output sounds highly ASP.NET-specific to me. I’m not familiar with it, so I can’t really help you with that. Have you consumed other libraries that distribute their own typings using the types field in package.json? I did a grep through my installed modules and found this one at random – if you npm install that, then paste some of their sample code into your editor, you should get Intellisense without any additional steps as long as your project config is correct. If that random package works and Cesium doesn’t, please reply here, but I suspect it won’t, which means it’s to do with your tsconfig or your ASP.NET settings.

7

but since the project run without server - entirely on the client - would this be issue that i am integrating node.js?
as well up to now i lacked of tsconfig.json. what should i put on it ?

8

Even if the project ultimately will run on the client without a server, you still need a built step, since TypeScript is not supported in the browser. This is typically what you’d have a NodeJS script for (and then to run a static HTTP server to host the generated files so you can run them in your browser).

9

I want to emphasize that I have no experience setting up ASP.NET with TypeScript or NPM, but I did find this page in the Typescript handbook that talks about getting started. They use Gulp as a build step. If you’re still lost, maybe follow that guide to get a “Hello world” project working, then add a simple NPM module like the one I linked above (fast-deep-equal) and get their sample code working. After that, install Cesium in your project and see if you can get a basic Viewer constructed.

If that doesn’t help, you’re probably better off asking on StackOverflow – again, this is not a Cesium problem, but an ASP.NET + Typescript problem.

1 Like
10

Well… finally I’ve given up on TypeScript (at least for now) and I have switched to JS.
Probably will wait for someone to showcase implementation of Blazor + TypeScript, and then I will report back. :’(