Working Cesium Svelte Template 2022

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/CLOUD-ATLAS-SVELTE: This is the sourcecode of https://cloud-atlas.app, which is a so called Collective Computer. And its becoming like from the movies. A computer which duty it is to support us the best way to work to better ourselves and the rest of humanity.

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:

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

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

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.

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

1 Like