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

**URL:** <https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601>\
**Category:** CesiumJS\
**Created:** [May 11, 2020, 3:49pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601 "2020-05-11T15:49:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [May 11, 2020, 3:49pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/1 "2020-05-11T15:49:13Z")

</div>

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

Very old article  
[https://cesium.com/blog/2016/05/18/an-introduction-to-cesium-android-apps-with-cordova/](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

```auto
<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

```auto
<body onload="init()">
    <div id="cesiumContainer" style="width: 100%; height:600px;">
    </div>
</body>

```

1. JS code of main.js

```auto
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

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

```

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [May 11, 2020, 4:24pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/2 "2020-05-11T16:24:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [May 11, 2020, 4:47pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/3 "2020-05-11T16:47:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [May 11, 2020, 5:15pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/4 "2020-05-11T17:15:22Z")

</div>

Here is the github repo 🙂

> **[GitHub - stripathix/cesium-cordova](https://github.com/stripathix/cesium-cordova)**
>
> Contribute to stripathix/cesium-cordova development by creating an account on GitHub.

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

 ![image](https://global.discourse-cdn.com/cesium/original/2X/2/20a0553d99f9c9bf5f7a7815e424649477787ca6.jpeg)

And on Desktop web chrome it works fine

 ![image](https://global.discourse-cdn.com/cesium/original/3X/b/4/b46fcf19fcf024b080b86645ef25aa8daecb05ae.jpeg)

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

```auto
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 ☹ . I think some configuration is missing in the documentation.

> <https://github.com/CesiumGS/cesium/issues/8405>
>
> On iOS i get thi error.
> 
> \<img width="214" alt="Screenshot 2019-11-19 at 12 42 …16 AM" src="https://user-images.githubusercontent.com/8480351/69082161-8b1b0580-0a65-11ea-834f-dfddab93dc2a.png"\>
> 
> To load in my index.html i have below files
> \`\`\`
> \<script src="https://cesium.com/downloads/cesiumjs/releases/1.63/Build/Cesium/Cesium.js"\>\</script\>
> \<link href="https://cesium.com/downloads/cesiumjs/releases/1.63/Build/Cesium/Widgets/widgets.css" rel="stylesheet"\>
> \`\`\`
> 
> Vue component looks like:
> \`\`\`
> Cesium.Ion.defaultAccessToken = 'eyJhbGciOiCI6IkpXV\*\*\*\*\*\*\*\*\*\*\*\*\*eD6J--cH1eE28r6gE';
> var viewer = new Cesium.Viewer('three-globe');
> \`\`\`
> 
> In web it renders fine but on iOS it crashes.

---

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [May 13, 2020, 6:07am UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/5 "2020-05-13T06:07:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [May 13, 2020, 11:52am UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/6 "2020-05-13T11:52:08Z")

</div>

I’ll try and take a look this week.

---

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [May 23, 2020, 3:12am UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/7 "2020-05-23T03:12:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [May 31, 2020, 11:45pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/8 "2020-05-31T23:45:22Z")

</div>

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:

> **[cesium-cordova.zip](https://drive.google.com/file/d/1jMRMRLXRvvGcHIUFdyBom8IVUaXhXlRq/view?usp=sharing)**
>
> Google Drive file.

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?

---

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [June 1, 2020, 1:08am UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/9 "2020-06-01T01:08:26Z")

</div>

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

```auto
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

```

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [June 1, 2020, 11:43am UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/10 "2020-06-01T11:43:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [June 1, 2020, 12:05pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/11 "2020-06-01T12:05:09Z")

</div>

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

 ![Screenshot 2020-06-01 at 5.37.51 PM](https://global.discourse-cdn.com/cesium/original/3X/8/5/85c5aefd43d7aa5e52da18a0663505c3e3490631.png)

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [June 1, 2020, 2:18pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/12 "2020-06-01T14:18:48Z")

</div>

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](https://github.com/CesiumGS/cesium/issues/8746).

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

---

<div class="post-metadata">

**Author:** ![Shashwat\_Tripathi](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/shashwat_tripathi/32/2303_2.png) [@Shashwat\_Tripathi](https://community.cesium.com/u/Shashwat_Tripathi)\
**Post date:** [June 1, 2020, 4:16pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/13 "2020-06-01T16:16:55Z")

</div>

Yesssss 🙂 it works with below options

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

```

---

<div class="post-metadata">

**Author:** ![naveedshahzad\_o](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/naveedshahzad_o/32/3476_2.png) [@naveedshahzad\_o](https://community.cesium.com/u/naveedshahzad_o)\
**Post date:** [August 15, 2021, 7:31pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/14 "2021-08-15T19:31:37Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 16, 2021, 2:04pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/15 "2021-08-16T14:04:09Z")

</div>

@naveedshahzad_o

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

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

Here is a GitHub repository that you can clone:

> **[GitHub - srothst1/cesium-cordova: Minimal project setup for CesiumJS and...](https://github.com/srothst1/cesium-cordova)**
>
> Minimal project setup for CesiumJS and Cordova. Contribute to srothst1/cesium-cordova development by creating an account on GitHub.

-Sam

---

<div class="post-metadata">

**Author:** ![naveedshahzad\_o](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/naveedshahzad_o/32/3476_2.png) [@naveedshahzad\_o](https://community.cesium.com/u/naveedshahzad_o)\
**Post date:** [August 22, 2021, 3:40pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/16 "2021-08-22T15:40:45Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![alexvizgard](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/alexvizgard/32/5242_2.png) [@alexvizgard](https://community.cesium.com/u/alexvizgard)\
**Post date:** [August 23, 2021, 10:12am UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/17 "2021-08-23T10:12:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 23, 2021, 1:18pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/18 "2021-08-23T13:18:04Z")

</div>

@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 🚀

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

---

<div class="post-metadata">

**Author:** ![naveedshahzad\_o](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/naveedshahzad_o/32/3476_2.png) [@naveedshahzad\_o](https://community.cesium.com/u/naveedshahzad_o)\
**Post date:** [August 23, 2021, 2:23pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/19 "2021-08-23T14:23:06Z")

</div>

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

![image](https://global.discourse-cdn.com/cesium/original/2X/e/e90634305cc095a7e605a5ef19aeeacd059d47a8.png)  
main component has cesium selector.

in cesium directive:

```auto
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")
        })
      );
    }

```

---

<div class="post-metadata">

**Author:** ![sam.rothstein](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/sam.rothstein/32/6584_2.png) [@sam.rothstein](https://community.cesium.com/u/sam.rothstein)\
**Post date:** [August 24, 2021, 2:03pm UTC](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601/20 "2021-08-24T14:03:37Z")

</div>

@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

[Next page](https://community.cesium.com/t/is-anyone-able-to-make-latest-cesium-work-with-cordova-or-capacitor/9601.md?page=2)