Edit the Hello World! example

CesiumJS
1

I've been using Cesium Sandcastles and have developed some working code. I want to now run that code on my own web browser. I looked at the "Getting Started" page and downloaded everything I needed to download and ran the "Hello World!" example, and it worked. That example is 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/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

Now the next step is to add my own JavaScript code that I've been running on Cesium Sandcastles. There were 2 logical attempts at doing this. Either I reference it by doing <script src="..."></script>, or I copy and paste all of the javascript code in the HTML text file

<script>
      **code here**
</script>

Neither of these work and the "Getting Started" example doesn't specify a good way to integrate your own code. Any suggestions is greatly appreciated, thank you.

2

Hello,

Either of the methods you tried should have worked. What happened when you tried to run the application? Did you see any error messages in the console?

Best,

Hannah

3

I didn't get any error messages. I know my changes worked because I modified <title>Hello World!</title> and that changed, but my javascript code won't run

4

The problem is that I cannot access the toolbar from my Javascript code. I didn't include it in the original post, but I did define the toolbar as they do in the cesium sandcastle html <div id="toolbar"></div>. However I must not be defining it correctly or in the correct spot.

<!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>Cesium Example</title>
  <script src="../Build/Cesium/Cesium.js"></script>
  <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
  <style>
    @import url(../templates/bucket.css);
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <div id="cesiumContainer" class="fullSize"></div>
  <div id="loadingOverlay"><h1>Loading...</h1></div>
  <div id="toolbar"></div>
  <script>
    
  </script>
</body>
</html>

5

Are you using functions like ‘Sandcastle.addToolbarButton’?
These are helper function that are specific to Sandcastle and are not included in Cesium. You will have to add your own buttons.

Resources like w3schools and Mozilla Developer Network are great if you are just starting out with web programming.
Here is an example on w3schools for how to create a button with a click handler: http://www.w3schools.com/jsref/event_onclick.asp

Best,

Hannah