Quickstart is faulty

CesiumJS
1

Hi,

I have a problem with the QuickStart page (https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/).

I made the first step so far, but in the 2nd step I copied the sample code there and added to my JS file.
Then the VSC (Visual Studio Code) has shown many mistakes, which I did not realize with it.

For example, the one error says: The Createosmbuildings property is not available for type “Typene Cesium”.

The next error is marked with “orientation” and says: the type “{heading: number, pitch: number,}” can type "{direction: cartesian3, up: cartesian3;} | {heading: number, pitch: number; roll: number;} not be assigned. The property “roll” is missing in type “{heading: number, pitch: number”, but is in the type “{heading: number, pitch: number: roll: number; }” required.

If I look at the other examples, there will be worse. Almost the entire JS file is marked in red before blast.

What can I do, what is missing here?
Do I have to import something else?
I have explained as in the example in HTML the cesium.js file imported.

I ask for help?
Seats for several days on this file and do not come on. It is also nowhere documentation or tutorials to find where the code is declared reasonable. At least I find no, maybe you could give me good sources.

It would be nice if a discord channel is opened for cesium, as you can better entertain and support each other.

I thank you in advance and hope for speedy solution proposals.

Many greetings

2

Hello folks,

There are 15 days passed and I do not get an answer here.

What is this support?!
The whole sample codes are faulty and do not work.
As soon as I create the sample codes in my TS File insert compiler errors and can not be run at all.

I urgently for help.
I’m totally new in the area and do not know me at all.

3

Here is a screenshot of the error:

grafik
grafik1353×279 13.5 KB

Here is the code

import * as Cesium from 'cesium';
const viewer = new Cesium.Viewer('cesiumContainer');

const wyoming = viewer.entities.add({
  name: 'Wyoming',
  polygon: {
    hierarchy: Cesium.Cartesian3.fromDegreesArray([
      -109.080842, 45.002073,
      -105.91517, 45.002073,
      -104.058488, 44.996596,
      -104.053011, 43.002989,
      -104.053011, 41.003906,
      -105.728954, 40.998429,
      -107.919731, 41.003906,
      -109.04798, 40.998429,
      -111.047063, 40.998429,
      -111.047063, 42.000709,
      -111.047063, 44.476286,
      -111.05254, 45.002073]),
    height: 0,
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK
  }
});
1 Like
4

@Mr.Lion

I apologize for the delayed response. Moving forward, I can assure you that we will respond to your questions within 24 hours of you posting them. Regarding your issue, I have a few initial questions and thoughts.

  • Are you setting up the CesiumJS client by importing it from CDN or installing it with NPM?
  • It seems like your JavaScript code is missing various key components. For instance, I do not see a line of code updating Cesium.Ion.defaultAccessToken or window.CESIUM_BASE_URL. Are there parts of your JavaScipt code that you are not sharing with the community? Are you using Cesium ion in your project?
  • The error that you shared in your recent screenshot suggests that there is an issue with how you are updating Cartesian3 - let’s address this after I get a basic understanding of your development environment.

It is very important that our CesiumJS Quickstart guide is up to date and user-friendly. I appreciate the feedback that you have provided and look forward to working with you to find a robust solution.

More information on your use case would help me give you the best support - what kind of project are you building with CesiumJS? I put together a public GitHub repository with a basic flight tracker. If you have soon-approaching deadlines, you can always use this repository to help you get started.

Let me know if you have any additional questions or concerns - I am looking forward to learning more about your project.

-Sam

5

Hi Sam,

Thank you for the answer.
I’m really very excited and very glad that you have answered me here.
I had almost completely lost the hope and abandoned. Since I’m totally desperate.

I am now busy about 1 month unsuccessful with cesium. But on the internet I find no suitable solutions. There are plenty of solutions for Angular, Webpack, React, Vue but nothing something for normal PHP programmer / project and gulp.
The Cesium’s documentation is extremely incomplete and faulty.

I hope you can help me. I will describe my problem in more detail, but first of all I have the following question: Is there a discord channel for cesium or something similar?
Because you get better support than here in a very slimmed forum. This forum is totally confusing, and you get as good as nothing, no answer.

My project is actually the following:
I use in my PHP project node_modules, gulp and TypeScript.
My TypeScript files I compile with Gulp and create JS Bundle.
I have “cesium” and “@types/cesium” installed in my node_module. Afterwards, I imported cesium to my TypeScript file. But in the browser, if I call my “index.html” I get in the console of DevTools error. Furthermore, I get TypeScript Errors in VS Code Editor, if I add some examples of cesium to my TS file. None of the documentation shows how “.tconfig.json” file should be configured to get cesium properly to run.

I have published an example of the project for you on GitHub.
There, what I tried, will give you (I hope to at least), much clearer. Please click here => Cesium-Test-Project

I would be very grateful if you could help me here. I’m really at the end with my nerves and desperate.

Would it be possible that we are about Discord, Telegram, WhatsApp or whatever in contact?

Please excuse me for my English. She is not so good, but I’ll give me a lot of effort.

I am very happy about your answer.

Kind regards
Daniel

6

Hi Sam,

It is now over 24 hours that I was written last and answered your question. However, I have no help / support to my problem by cesium so far.

I thought you will help me?
How can I finally solve my problem?
I have published the entire project on Github and the link already shared with you.

I ask for help and support.
thanks

7

@Mr.Lion

Cesium does not have a discord channel available for community members to join. However, I think that adding a discord channel might be a good idea - I will let you know if we implement this in the future. Thank you for publishing your project on GitHub. What instructions should I follow to build your project on my local machine?

In addition, can you please share the errors that you are receiving related to .tconfig.json? I would like to learn more about the issues that you are facing here. I appreciate your patience as we work through these issues.

-Sam

8

It is definitive to implement a good idea to implement a discord channel. Many frameworks and various programming languages, ​​this possibility are enabled to members. The best example of this would be for example “Flutter” … This is a mobile application framework offered by Google. You would definitely have profit, no matter how big, for the effort.

To your question, what statement you should follow would be as follows:
First, the packages should have installed on “Package.json” for node_modules. You can do that with “npm i”. Then you can start the compiler for the bundler with “Gulp Build”.

The project is actually running on a Apache web server … The startup file is on “public/index.html”.
Please note that the “CSS” and “JS” files are updated each time by “Gulp Build” execution and should not be changed by hand … The TypeScript editing and SASS files are in the “src/build/scripts/ts” and in the “src/build/scripts/sass” directories … The gulp reads this, compiled and packs it as a bundle and stores it in “public/js” or “public/css” .

I have updated the “.tsconfig.json” file on GitHub in Github. There you can look at the whole Errors. Because here in the forum, it is very difficult to describe them individually.

On my TS file (TypeScript), I gained a lot because there are a lot of mistakes. If you remove the “//”, you will be able to detect all the errors.

Furthermore, on the line 1 I tried to import “bootstrap”. This too has done to errors. If I only imported bootstrap alone, bootstrap works flawlessly. The problem exists solely by cesium.

9

@Mr.Lion

I appreciate the suggestion about creating a Discord channel. I just cloned the repository and ran npm i and gulp build. Is there an npm start script that I should run to start a local server?

-Sam

10

Since I’m curious when a discord channel is provided for cesium. I hope very soon :-).

You do not necessarily need to start a server. So that it becomes easier for them, I have added a normal “index.html” in the “public” directory. If you need to open these in the browser it will work. You can also start a normal web server, e.g. xampp. Since you just have to note that the startup file is in the “public” directory and routes your server accordingly.

“npm start” you do not need here. Here it is just just enough to run the “gulp build” in the terminal. The rest does the gulpfile …

11

@Mr.Lion

Thanks for the information. This is what I get when running gulp build:

srothstein@CSM-4ZBPCB3-Linux:~/Desktop/communityProjects/cesium$ gulp build
development
[14:24:28] Using gulpfile ~/Desktop/communityProjects/cesium/src/gulpfile.js
[14:24:28] Starting 'build'...
[14:24:28] Starting 'cleanOutputDir'...
[14:24:28] Finished 'cleanOutputDir' after 59 ms
[14:24:28] Starting 'compileScript'...
[14:24:28] Starting 'compileStyle'...
[14:24:29] Finished 'compileScript' after 779 ms
[14:24:34] Finished 'compileStyle' after 6.33 s
[14:24:34] Finished 'build' after 6.39 s

Does this look correct to you? If so, what command should I run next?

-Sam

12

Yes, that looks right. In the terminal, you do not have to do anything anymore. The Gulp has thus now compiled, bundled CSS and JS files here and stored in “public/css” and stored in “public/js”.

Now start the “index.html” in the browser (Firefox, Chrome, Opera etc.) You can find this in the “public/index.html” directory …

If you have started in the browser, and if “cesium” is not imported in the TS file, but as “scripts” in HTML file, “cesium” should be watching in the browser.

The correct procedure here would be when “cesium” is imported in the TS file. But then the world globe is not displayed in the browser (cesium does not work anymore).

To detect the problem here, then press the “F12” button on your keyboard in the browser or open the “DevTool”. Once there, some errors will be displayed in the console.

Is there a possibility that you connect to my PC via remote connection (for example: via TeamViewer or AnyDesk)? So I could show you the problem live much better.

Many greetings
Daniel

13

Hi Sam,

Meanwhile, 7 days have passed. So I wanted to ask what the state of things has become? Could you find a solution or fix the problem?
How can I continue my project?

I ask for an answer.

14

@Mr.Lion

Have you considered cloning a functional repository that uses CesiumJS and starting from there? I am doing my best to help you get up and running with CesiumJS but I don’t have the bandwidth to set up a video meeting to work through the issues with your implementation. It has also been difficult for me to get your code up and running because I am not very familiar with the frameworks that you are using. Feel free to clone this repo. It provides a great starting point for using CesiumJS and Webpack.

-Sam

15

Thank you very much that you try to help me. But it is currently very annoying about 0%. I had a repository cloned a repository, which should be allegedly functional. But I had exactly the same problems as well.

I will still clone the proposed repository of them and try to get in a new project. Maybe that helps me. Thank you very much for the repository. Unfortunately, I do not know myself with “Webpack” at all. I have never worked with it.

I understand that they are very busy and hardly have time for a remote connection. But we could do this on the weekend. I am very flexible and with your knowledge that should not be too long. I am very sure that you can recognize the problem very quickly and can fix it. Since you see it live, what’s wrong.

16

Hi Sam,

I have now cloned the proposed repository and tries to run them.
I did not change anything on this project and just tries to start this repository. But I did not get it up.

As it is written in the description, I should run there “npm install”. I did this too and got these errors here:

grafik
grafik1361×286 42.4 KB

Since the file “package-lock.json” has spent a warning, I deleted these in my project directory. Since it is recreated by “node_module”.

Now, when new “npm install” came here:

grafik
grafik1425×532 29.5 KB

I do not know again what’s wrong here. Somehow, this repository does not seem to work.

I ask for help.
Seats since August at this cesium problem and I have not progressed.

17

When this thread started, I tried out the flight tracker that Sam initially linked to, and received the same error message. This seems to be related to some incompatibility of npm versions. The same happened now for the webpack starter tutorial example.

But the following worked for me:

I’m not sure why the node_modules directory was checked in into the repo in the first place - hosting these modules is what npm is for. But I’m a JavaScript noob, so there’s probably a reason behind that which I don’t understand.

2 Likes
18

Hi Marco,

Thank you for the answer and support.
Yes you are right. After additionally deleted the directory “node_module” and then restarted the installation routine, the repository of Sam worked wonderfully.

I had only the “package-lock.json” file deleted, but that alone has unfortunately not enough. I still have to delete the directory as described above.

Contraves, usually “node_module” is not included in the repository. You should update the repository here, so others do not come across the same problem as I am. What I discovered right away, the “readme.md” file seems to be outdated. Because there will be described by 2 “webpack.config.js” file. One should be used as a “release” and the other only for development. The file “webpack.release.config.js” no longer exists, in connection with the “Package.json” file.

I could start the repository now and will work in “webpack” and hope that I integrate this procedure in my actual project.

19

@Marco13 thank you for taking a deeper look at this issue. In general, it is best to start fresh without package-lock.json and node_modules. However, I expected that running npm install would have resolved this issue - I am going to take another look at the npm docs to figure out why it didn’t.

@Mr.Lion I recommend building your app from the webpack example. Ultimately, I am happy that we were able to resolve this issue. I apologize that it took so long to come to a solution.

-Sam

20

Hi Sam,

Well, so I could not solve my problem yet.
Although I can start the proposed repository, I could not integrate them into my project.
I took the repository as a base project and started it. But I do not know how to integrate my PHP project into the webpack.

What I did not quite understand, the following:
The Webpack config file is copied as Patterns 3 directories in “dist” directory. Why and what that is used I do not understand. If you could explain to me, I would be very happy.

Is there an example webpack for PHP?
On the internet, I have been looking for days, after a keen PHP webpack examples. Furthermore, I do not know how I can pack the “css” and “js” files in a separate directory in the “dist” folder in the webpack.