“a beautiful elegant highly expressive language buried under a steaming pile of good intentions and blunders"
Douglas Crockford describing javascript
I am not afraid to learn new things or admit to rough patches in my toolbox. Curse or gift — I can pick up tech pretty quickly but with one caveat. Either I only learned it for one specific reason that future Bonny doesn’t currently need or I have used the skill so infrequently it was replaced with something having immediate utility in my line of vision.
In my defense, as a multi-media video journalist and speaker I am motivated by the visuals. Geospatial is sexy, immediate and cinematic. Go ahead, print the t-shirts.
In the video above you can see the gallery (on the left). My historical use of CesiumJS has always been to look at the code and swap out different details for my intended goal. Basically creating little Frankenstein zombies that rendered a visual but would likely not withstand prolonged execution at scale.
I know enough about coding from early days of Fortran in university — gulp—to modern era coding languages like R and Python with late entries like SQL and even Julia to squeeze code into submission.
But along the way I sort of fell in love with Cesium. Technically CesiumJS, but the beauty is you can generate beautiful 3D tiles and 2D mapping with no code. Cesium Ion has a lovely story builder that I tend to use live in workshops to introduce participants to geospatial storytelling without the proprietary soul sucking pay to play model.
But now I have a bigger project that I am exploring. So here we are dear reader. I need to roll up my sleeves and focus on the massive and steep learning curve to someday obtain enough javascript mastery to truly appreciate the expanse of Cesium. Multiple integrations with QGIS, Blender and Unreal Engine finally could not be ignored. Here is a brief synopsis on what I learned and continue to learn.
First out of the gate. Java and javascript are different programming languages. I will show myself out, thank you. I never thought about it before but I figure it needs to be said.
Cesium sandcastle is for quick demos and exploring CesiumJS snippets in the gallery but limited for larger projects. I use VS Code with alternatives to serve and host the app (stay tuned). It allows me to write, debug and manage dependencies. Tutorials on the website also use Glitch but it isn’t ideal for larger projects or production hosting, at least in my limited dalliance.
I am still on the journey but so far here is what I did…
created project folder
initialize rpm: rpm init -y
Install Cesium: rpm install cesium
Create index.html and a main script (app.js — shown below) to load CesiumJS
# Cesium Local Project
A simple local setup for CesiumJS development.
## Setup
1. **Install dependencies:**
```bash
npm install
```
2. **Add your Cesium Ion token:**
- Go to https://ion.cesium.com/tokens
- Copy your access token
- Open `app.js` and replace `’your_token_here’` with your actual token
3. **Run the development server:**
```bash
npm run start
```
4. **Open in your browser:**
If you used a simple static server, install one:
npm install --save-dev http-server
Add “start”: “http-server -p 8080” to package.json
Run npm run start
Open
```
http://localhost:8080 (whatever port you choose)
```
## File Structure (example)
- `index.html` — Main HTML file
- `app.js` — JavaScript entry point (configure your Cesium Ion token here)
- `package.json` — Project dependencies and scripts
## Next Steps
- Modify `app.js` to add your own Cesium features
- Add more interactive elements to `index.html`
- Install additional npm packages as needed
Create viewer: const viewer = new Cesium.Viewer(’cesiumContainer’, { imageryProvider: new Cesium.IonImageryProvider({ assetId: 2 }) });
## Deployment
Once you’re happy with your project locally, deploy to:
- **Netlify** — Drag & drop your project folder
- **Vercel** — Import from GitHub/GitLab
- **GitHub Pages** — Push to a gh-pages branch
- **Any static hosting** — Upload the files
The code is available in sandcastle if you want to try your hand…(click image)
More to come as I continue to explore. Any errors are my own and I welcome any insights or illumination.
“The strength of JavaScript is that you can do anything. The weakness is that you will.” — Reg Braithwaite