Is anyone able to make latest Cesium work with cordova or capacitor?

Cesium’s article to use it in the hybrid app is so old. It does not works anymore :frowning:

Very old article
https://cesium.com/blog/2016/05/18/an-introduction-to-cesium-android-apps-with-cordova/

With the latest cesium, it just does not work. Do we need to do some special configuration in Cordova to make it work?

I have created a very basic Cordova project, nothing fancy.

  1. Downloaded latest cesium
  2. Added links to index.html
<link href="Cesium/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
 <script src="Cesium/Build/Cesium/Cesium.js"></script>
    <script src="main.js" charset="utf-8"></script>
  1. Html body looks like
<body onload="init()">
    <div id="cesiumContainer" style="width: 100%; height:600px;">
    </div>
</body>
  1. JS code of main.js
function init() {
  Cesium.Ion.defaultAccessToken = 'eyJhbG******28r6gE';
  var viewer = new Cesium.Viewer('cesiumContainer');
}

On the desktop web chrome it works pretty well, but when running as Cordova hybrid app in the simulator. Nothing shows up and when i open console it says cesium is just a empty object. and it has a error

TypeError: undefined is not an object (evaluating 'Cesium.Ion')
Global Code
evaluateWithScopeExtension
(anonymous function)
_wrapCall

I did recently get Cesium + Cordova working on my Android phone (as of a few weeks ago).

Can you post your full project setup, perhaps as a GitHub repo? You may be missing some configuration there, and that can help us create an updated official example.

Let me create a GitHub repo for this and sahre URL.
Note: I am trying iOS platform.

Here is the github repo :slight_smile:

Here is how it looks, when i run it on iOS.

And on Desktop web chrome it works fine

It is very basic cordova project. Steps i used to create project

Step 1
cordova create hello com.example.hello HelloWorld

Step 2
cordova platform add ios

Step 3
// Updated www folder to implement very basic example of cesium 

Step 4
cordova build ios

Step 5
cordova run ios

IMPORTANT: Hey @omar i am the same guy who reported below issue lol. In below issue i was using capacitor with ionic and it was failing if i add any cordova plugin. But after doing some research i found that it has nothing to do with capacitor or ionic. Either it is Cesium or it is Cordova. For that reason this time i tried with simple basic HTML, JS with cordova and there also it fails :frowning: . I think some configuration is missing in the documentation.

Hi @omar did you got chance to look into it.

I’ll try and take a look this week.

Hi @omar did you got chance to look into it.

So I’m not sure why your application isn’t working, but here’s my minimal project setup I have, tested with the latest version of CesiumJS:

I test this by running npm install and then phonegap build android and copy the APK onto my Android device.

Can you try running this either in your simulator or on your iOS device and let me know if you’re getting any errors?

Hi Omar, thanks for checking. It’s not android that is failing, it’s IOS where it fails.
For android device my application also works.

But when you try to build iOS then it errors. For generating iOS build you will have to first add iOS platform and then do a build. Which will generate IPA file instead of APK file.

You can see commands I use are for iOS

Step 1
cordova create hello com.example.hello HelloWorld

Step 2
cordova platform add ios

Step 3
// Updated www folder to implement very basic example of cesium 

Step 4
cordova build ios

Step 5
cordova run ios

What error does the ZIP file I provided give you on iOS?

Hi @omar, the error I get using your ZIP file on iOS:

I don’t have an iOS device setup to test with this right now, but it looks like the issue here is coming from the FullScreen button, which is generally not supported on iOS. You can read a bit about that here: https://github.com/CesiumGS/cesium/issues/8746.

Can you try disabling the fullscreen button by passing fullscreen: false to the Viewer constructor?

1 Like

Yesssss :slight_smile: it works with below options

var viewer = new Cesium.Viewer('cesiumContainer', {
                fullscreenButton: false 
            });
1 Like

@omar Kindly share the google drive link to me also.
I am trying to build app for android and ios using monaca which uses cordova to make a remote build. cesiums map doesn’t appear in android and ios device. screen stays black.

@naveedshahzad_o

I am looking forward to seeing your project when it is complete :grinning:

Here is a link that you can use to access the files directly: https://drive.google.com/file/d/1jMRMRLXRvvGcHIUFdyBom8IVUaXhXlRq/view?usp=sharing

Here is a GitHub repository that you can clone:

-Sam

@sam.rothstein I uploaded your project in monaca (same as cordova), and it worked perfectly in mobile app. But still, Im unable to show cesiumjs earth on my actual app. I have developed using Angular. I am trying to upload angular build to monaca, but maps arent showing up.

Hi @sam.rothstein, any assistance you can provide to get the app that @naveedshahzad_o is working on up and running would be greatly appreciated. Many thanks in advance

@naveedshahzad_o

I am glad to hear that my project worked well for you in the mobile app! This seems like a great first step :rocket:

What exact error are you receiving when the Cesium Viewer is failing to load? Some more information on where you are adding the CesiumJS code would also be helpful. To be candid, my experience with Cordova/Monaca is limited - community suggestions would be especially welcomed here!

@alexvizgard understood!

-Sam

1 Like

@sam.rothstein Actually there is no error at all. only globe does not appear when run in mobile.

image
main component has cesium selector.

in cesium directive:

ngOnInit() {
    Cesium.Ion.defaultAccessToken = "**********";
    this.viewer = new Cesium.Viewer(this.el.nativeElement, {
      baseLayerPicker: false,
      geocoder: true,
      homeButton: false,
      scene3DOnly: true,
      navigationHelpButton: false,
      imageryProvider: false,
      fullscreenButton : false
    });

let scope = this;
    this.viewer.scene.globe.tileLoadProgressEvent.addEventListener(function (tiles) {
      scope.loadingTiles = tiles;
    });

let ifConnected = window.navigator.onLine;
    if (ifConnected) {
      var mapbox = new Cesium.MapboxStyleImageryProvider({
        styleId: '../********/*********',
        accessToken: '**********'
      });

      this.viewer.imageryLayers.addImageryProvider(
        //new Cesium.IonImageryProvider({ assetId: 3 })
        mapbox
      );
    }

    else {
      this.viewer.imageryLayers.addImageryProvider(
        new Cesium.TileMapServiceImageryProvider({
          url: Cesium.buildModuleUrl("Assets/Textures/NaturalEarthII")
        })
      );
    }
1 Like

@naveedshahzad_o

Thank you for the details on your code and the clarification about the error. From my end, nothing looks blatantly incorrect. However, as mentioned before, my experience with Cordova is limited.

@Shashwat_Tripathi @Jackie @Chris_Wang your input on Cordova-related issues in the past has been both timely and accurate. The community really appreciates your engagement. Do any of you have suggestions for @naveedshahzad_o?

-Sam