Cesium Completely Offline Mode

CesiumJS
1

Hello,

How could we do Cesium offline? Below two links related to this topic exists but they are not complete. If someone wants to do full world map offline CesiumJS app that’s offline, could they do that and how? We could assume like developer will figure out where to store the data etc, but of course I do not know how to get the data for free.

There is

and

and

Clipping is a useful feature but we are interested in entire globe not a part of it.

There are many Cesium guru’s out there, I am sure we could get to the bottom of is this possible or not, and if so what’s best approach.

Additionally, can Cesium access maptiles itself without needing to spin off a nodejs server that requests maptiles like /api/tiles/{z}/{x}/{y} constanly in the background, can I setup file/folder structure locally for cesium to find/locate images of map areas itself?

Also, is it possible to do this in 3D. Currently Cesium works 3D with internet connection, I want local offline mode Cesium with no internet connection that behaves identically to the Cesium that connects online, is this possible?

2

Hi @Baris_Sarac,
Thanks for you post and being a part of the Cesium community. Here are some hopefully useful answers to your questions.

Additionally, can Cesium access maptiles itself without needing to spin off a nodejs server that requests maptiles like /api/tiles/{z}/{x}/{y} constanly in the background, can I setup file/folder structure locally for cesium to find/locate images of map areas itself?

You can serve 3D Tiles or other resources like glTF files, etc. to be consumed by a runtime like CesiumJS from the same file/folder structure as your application. This is a common setup for development environments and small applications. Here is another thread discussing this topic for more context and guidance Hosting glTF Tileset of 3D Tiles v1.1 by standard web file server - #3 by mdc9001 You do need to serve these files over http/s for browser security reasons.

Also, is it possible to do this in 3D. Currently Cesium works 3D with internet connection, I want local offline mode Cesium with no internet connection that behaves identically to the Cesium that connects online, is this possible?

You can use 3D in Cesium without an internet connection. For example the following will load a 3D globe without pulling any data from Cesium ion or other online sources.

const viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayer: false, 
    baseLayerPicker: false,  // Remove the base layer picker if you don’t need to switch layers
    terrainProvider: new Cesium.EllipsoidTerrainProvider()  // Use a simple ellipsoid terrain
});

To get a more exciting visual than a simple ellipse, you can load files containing imagery, terrain, 3D tiles, etc locally as shown above in the response to the previous question. One option for getting a terrain layer to host and serve locally is to use an open source tool like GitHub - geo-data/cesium-terrain-builder: A C++ library and associated command line tools designed to create terrain tiles for use in the Cesium JavaScript library to build a terrain dataset.

Imagery, terrain, tiles, etc. that span the globe are pretty large, which is why it is often most convenient to stream them into an app from somebody else’s server, like Cesium ion or OpenStreetMap.

 const viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayer: new Cesium.ImageryLayer(new Cesium.OpenStreetMapImageryProvider({
        url : 'https://tile.openstreetmap.org/'
    })),
    baseLayerPicker: false // Disable default base layers if you only want the Carto basemap
});

One offline option Cesium also has is Cesium ion Self Hosted Cesium ion Self-Hosted – Cesium which is a paid service.

I hope this helps answer your question. Please feel free to follow up.

Thanks,
Luke

3

Hi @Luke_McKinstry,

Thank you for your detailed response. I have the below setup, doing so I plan to use all offline code, though, map doesnt load up. I see if i activate accesstoken i get some assets getting loaded that are on cesium ion.

This is what it looks like

image
image951×610 99.4 KB

` CesiumJs.Ion.defaultAccessToken = “”;
// process.env.NEXT_PUBLIC_CESIUM_TOKEN || “”;

  const viewerOptions = {
    terrain: CesiumJs.Terrain.fromWorldTerrain({
      requestVertexNormals: true,
    }),
    imageryProvider: false, // Disable the default imagery provider
    baseLayerPicker: false, // Disable base layer picker to prevent external requests
    geocoder: false, // Disable geocoder to avoid internet calls
    navigationHelpButton: false,
    homeButton: false,
    sceneModePicker: false,
  };

  // Initialize the Cesium viewer with the options
  const viewer = new CesiumJs.Viewer(
    cesiumContainerRef.current,
    viewerOptions
  );
  cesiumViewer.current = viewer;

  // Add the local TileServer GL imagery layer
  viewer.imageryLayers.addImageryProvider(
    new CesiumJs.UrlTemplateImageryProvider({
      url: "http://localhost*******/{z}/{x}/{y}.png", // Updated URL pattern
      minimumLevel: 0, // Adjust if necessary
      maximumLevel: 14, // Set to your MBTiles max zoom level
      credit: "Local MBTiles",
    })
  );`
4

Hi @Baris_Sarac, I just noticed one thing about your code:

  const viewerOptions = {
    terrain: CesiumJs.Terrain.fromWorldTerrain({
      requestVertexNormals: true,
    }),

The TerrainProvider constructed by the fromWorldTerrain method depends on a HTTP connection to Cesium ion.

Have you tried leaving this option undefined? If nothing is specified, Cesium will default to an EllipsoidTerrainProvider, which does not require any remote data.

The EllipsoidTerrainProvider will model the Earth as a smooth ellipsoid. If you need 3D terrain (mountains etc) in your app, you will need to host it on your local server.

5

Hi @jjhembd,

Thank you, I’ve updated that since then, and the below currently fully works offline with issue of 3D buildings, nothing 3D shows up elevated. I need to create a mesh file apparently using a tool like this, is what I am understanding. GitHub - geo-data/cesium-terrain-builder: A C++ library and associated command line tools designed to create terrain tiles for use in the Cesium JavaScript library

CesiumJs.Ion.defaultAccessToken = "";

      const viewerOptions = {
        terrainProvider: new CesiumJs.EllipsoidTerrainProvider(),
        imageryProvider: false, // Disable the default imagery provider
        baseLayerPicker: false, // Disable base layer picker to prevent external requests
        geocoder: false, // Disable geocoder to avoid internet calls
        navigationHelpButton: false,
        homeButton: false,
        sceneModePicker: false,
        animation: false,
        timeline: false,
        sceneMode: CesiumJs.SceneMode.SCENE3D, // Explicitly set to 3D mode
      };

      // Initialize the Cesium viewer with the options
      const viewer = new CesiumJs.Viewer(
        cesiumContainerRef.current,
        viewerOptions
      );
      cesiumViewer.current = viewer;

      // Add the local TileServer GL imagery layer
      viewer.imageryLayers.addImageryProvider(
        new CesiumJs.UrlTemplateImageryProvider({
          url: "http://localhost:8010/styles/main/{z}/{x}/{y}.png", // Updated URL pattern
          minimumLevel: 0, // Adjust if necessary
          maximumLevel: 14, // Set to your MBTiles max zoom level
          credit: "Local MBTiles",
        })
      );
1 Like