Working Cesium Svelte Template 2022

CesiumJS
1

image
image1024×572 48.2 KB

Hey Everybody.

Ive builded a nice running template for your next projects, but in Svelte.
There was some help from the community(thank you @onsummer), but i decided to start from scretch…

Stack:

  • Svelte
  • Vite
  • PWA (app install option on mobile and desktop)
  • Serviceworker (cache first strategy)

Works without any server!
JamStack, static pages, prerendered, precompressed, hydrated via API, distributed via CDN.
GZip compresses the app from 4,3MB to only 1,02 MB!!!

The tiles get cached too and are available offline, just like in an app.
I almost got it working, that the globe also comes back after tabclose (without internet connection)

Maybe someone here knows how?

You able to just continue in javascript. You know javascript, right? :smiley:

And if you ever hit an obstacle in the future(which is peoples over-reasoned main reason not using Svelte yet), just if, then just continue (or just implement one component) in your old, bloated, slow framework. :nerd_face:

Thats Svelte! :heart_eyes:

Live: https://cloud-atlas.app

GitHub: GitHub - worldpeaceenginelabs/CESIUM-GUN: This is a POC of a decentralized, open-source Google Earth made with Gun and Cesium.

This is my Cloud Atlas project, but you able to download a clean template from the commits, till i am starting to go Cloud Atlas specific.

UPDATE: Here are some more serviceworker offline strategies for your individual needs :wink:

https://www.serviceworke.rs/ This collection is huge. Seems a bit deprecated (the website, not the code snippets) The code is in the upper right corner:

image
image1920×996 109 KB

Every step in the code is very well explained, which makes you able to combine your own strategies.

image
image1920×967 125 KB

1 Like
2

For svelte.js, maybe you can reference this:

onsummer/vite2-gislib-demos

This repo use vite2 to create project, it’s convenient and easy to use.

And for that 4 static assets dir (Assets/, ThirdParty/, Widgets/, Workers/) in CesiumJS, you can reference this repository: click me, although it only has vanilla, vue3, react18 template project, but I think you can find up static-copy.js file and get how Node.js copy these static file from node_modules.

1 Like
5

Notice when that package post installed, the postinstall script will auto run by package manager, so the 4 static assets folder from cesium package will copy to public/, then the svelte or vue, react front end app hold by vite devServer can access them.

When update cesium package’s version with such pnpm update cesium@latest, we can rerun static-copy script (pnpm static-copy) to copy new files to public directory.

By this way, the bundler can save so many build times.

6

Check imageryProvider’s network accessing? Open developer panel. Maybe the cesium dependency is too old or you can pass your ion token.

1 Like
8

@onsummer Is there any chance you can expand on how to setup vite to do this static-copy.js example? I’m trying to get a Svelte Cesium environment working and catching all kinds of errors when trying to access Cesium’s static files in Node.js

9

@Adam_Sadiq I’m not sure of the intricacies of doing so in Svelte, but it’s likely due to the environment variable CESIUM_BASE_URL not being set correctly. See the relevant section in this guide.

10

I just copied them manually like described here CesiumJS Quickstart – Cesium
I serve them with my repository now, so devs can hit npm install and then npm run dev without getting frustrating error messages.

This is a working, clean configured Cesium starter repo in Svelte, just delete everything in src except main.ts, vite-env.d.ts, app.svelte and cesium.svelte, plus delete every folder in public except the “build” folder, and dont delete the files in the root of public. plus delete the dependencies except cesium, and leave the dev dependencies untouched BEFORE hitting npm install. this will give you a clean starter repo. GitHub - worldpeaceenginelabs/METAVERSE-DAO_CLOUD-ATLAS: The ultimate construction kit for anyone interested in exploring the intersection of technology, science, and imagination. - Simply create your O3DE, UE5 or Unity3D bubble, and leave the rest to the community...

11

@cloudatlas Thank you for your considerate response! Will try this and your repo out and feedback :grinning:

12

another way is npm create vite@latest and just copy the cesium.svelte from my repo and initialize the component in app.svelte (import Cesium from Cesium.Svelte and <Cesium/> in the Markup section) Easier :wink:

13

** Your instructions worked. Caught some initial errors which derived from app.svelte. Deleting the unused imports (appsearch, Infobox, LoginPopUp) and corresponding div elements fixed it. Thank you!**