# Cesium & Angular

**URL:** <https://community.cesium.com/t/cesium-angular/6797>\
**Category:** CesiumJS\
**Created:** [April 13, 2018, 8:06am UTC](https://community.cesium.com/t/cesium-angular/6797 "2018-04-13T08:06:03Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![setisinnovation](https://avatars.discourse-cdn.com/v4/letter/s/5f8ce5/32.png) [@setisinnovation](https://community.cesium.com/u/setisinnovation)\
**Post date:** [April 13, 2018, 8:06am UTC](https://community.cesium.com/t/cesium-angular/6797/1 "2018-04-13T08:06:03Z")

</div>

Hi everyone !

I've followed this post:

> **[Cesium and Angular | cesium.com](https://cesium.com/blog/2018/03/12/cesium-and-angular/)**
>
> This is a guest post by Aristeidis Bampakos of Plex.Earth about integrating Cesium with Angular. - SarahAngular is a popular web platform, created and mainta...

Everything works well !

Except that i must use the 1.42.1 version of cesium.  
If i use the latest 1.44 version, nothing shows up, and no error in console.

I only have to switch to 1.42.1 to make it work, with no other differences.

Can someone test it ?  
To see if i'm not alone in this case ?

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [April 16, 2018, 2:16pm UTC](https://community.cesium.com/t/cesium-angular/6797/2 "2018-04-16T14:16:46Z")

</div>

Hi there,

The core Cesium team hasn’t used Angular ourselves. It may be worth contacting the author of that blog post, Aristeidis Bampakos, to see if he has any input on which version to use and if any updates are necessary. (The author is also pretty active on the forum, maybe he’ll catch this thread.)

Thanks,

Gabby

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [April 16, 2018, 2:44pm UTC](https://community.cesium.com/t/cesium-angular/6797/3 "2018-04-16T14:44:38Z")

</div>

Hi,

There is a known bug with Cesium 1.44 and Angular example. You can follow the related issue in the official repo here [https://github.com/Developer-Plexscape/cesium-angular-example/issues/1](https://github.com/Developer-Plexscape/cesium-angular-example/issues/1)

---

<div class="post-metadata">

**Author:** ![Ankhenaten](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ankhenaten/32/15133_2.png) [@Ankhenaten](https://community.cesium.com/u/Ankhenaten)\
**Post date:** [April 18, 2018, 11:28am UTC](https://community.cesium.com/t/cesium-angular/6797/4 "2018-04-18T11:28:36Z")

</div>

In general it works. Angular 5 and Angular Material.

[http://www.deepship.ai/#/globe](http://www.deepship.ai/#/globe)

What I am trying to achieve might be difficult, this loads in the moment 22000 ships via a Perl Mysql czml and creates as many boxes and labels and clusters them…

The data is not updated yet as on the main page with leaflet.

So wait a bit for the whole page loading, the whole thing is alpha. But simpler efforts just loading a geojson with 27 point data + features. runs smoothly.

---

<div class="post-metadata">

**Author:** ![Ankhenaten](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ankhenaten/32/15133_2.png) [@Ankhenaten](https://community.cesium.com/u/Ankhenaten)\
**Post date:** [April 18, 2018, 11:30am UTC](https://community.cesium.com/t/cesium-angular/6797/5 "2018-04-18T11:30:26Z")

</div>

```auto
"cesium": "^1.44.0",
"angular-cesium": "0.0.48",

```

```auto
> Angular CLI: 1.7.4
> Node: 9.10.0
> OS: win32 x64
> Angular: 5.2.9
> ... animations, common, compiler, compiler-cli, core, forms
> ... http, language-service, platform-browser
> ... platform-browser-dynamic, router
>
> @angular/cli: 1.7.4
> @angular-devkit/build-optimizer: 0.3.2
> @angular-devkit/core: 0.3.2
> @angular-devkit/schematics: 0.3.2
> @ngtools/json-schema: 1.2.0
> @ngtools/webpack: 1.10.2
> @schematics/angular: 0.3.2
> @schematics/package-update: 0.3.2
> typescript: 2.5.3
> webpack: 3.11.0

```

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [April 18, 2018, 12:30pm UTC](https://community.cesium.com/t/cesium-angular/6797/6 "2018-04-18T12:30:01Z")

</div>

Hi,  
What do you think is the cause of the delay? Might be an Angular issue or a Cesium thing? I can see that you are using **angular-cesium** package which is really cool. Have you tried to load the CZML outside of angular-cesium package scope?

---

<div class="post-metadata">

**Author:** ![Ankhenaten](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ankhenaten/32/15133_2.png) [@Ankhenaten](https://community.cesium.com/u/Ankhenaten)\
**Post date:** [April 18, 2018, 4:44pm UTC](https://community.cesium.com/t/cesium-angular/6797/7 "2018-04-18T16:44:08Z")

</div>

This is for the OP.  
I compile with  
ng build --aot --environment=prod --output-hashing=all  
--sourcemaps=false --extract-css=true --named-chunks=false  
--build-optimizer=true

because of an issue with FireFox  
[https://github.com/angular/angular-cli/issues/9340](https://github.com/angular/angular-cli/issues/9340)

@Aristeidis

File size. 38 MB Although the server the apache pulls the file from is gzipped.

The geojson is 7 MB

I haven't looked into 3D Tiles yet.  
The CZML produces a lot of text as it also contains box, label and so  
on definitions,  
Ultimately I want to update live data so I have no idea yet what is  
the quickest into Cesium and producing acceptable frame rates.

There is for me no need to run after this in the moment but here are  
some errors thrown up.

It seems to be also that the Clustering algorithm is slower than in leaflet.

I have distanceDisplayCondition on for both labels and boxes and  
checked that its working, Is this available for Clustering?  
I use this code for Clustering.  
[https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Apps/Sandcastle/gallery/Clustering.html](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Apps/Sandcastle/gallery/Clustering.html)  
[https://www.google.co.uk/search?ei=2XPXWu6cDemVgAaWpaRw&q=Clustering+distanceDisplayCondition&oq=Clustering+distanceDisplayCondition](https://www.google.co.uk/search?ei=2XPXWu6cDemVgAaWpaRw&q=Clustering+distanceDisplayCondition&oq=Clustering+distanceDisplayCondition)

There are on Chrome Windows 10 (Version 66.0.3359.117 (Official  
Build) (64-bit)) as far as I can see.

[.Offscreen-For-WebGL-0000024BCE690310]GL ERROR :GL\_INVALID\_OPERATION  
: glDrawElementsInstancedANGLE: attempt to access out of range  
vertices in attribute 1

It stops at 256 errors.

generated. I think these are the labels.

On the latest Mozilla Firefox 59.0.2 (64-bit) Windows 10

Error: WebGL warning: texImage2D: Alpha-premult and y-flip are  
deprecated for non-DOM-Element uploads.  
scripts.bundle.js:476:31796  
Error: WebGL warning: texImage2D: Alpha-premult and y-flip are  
deprecated for non-DOM-Element uploads.  
Error: WebGL warning: texSubImage2D: Alpha-premult and y-flip are  
deprecated for non-DOM-Element uploads.  
scripts.bundle.js:477:8149  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 157740.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 92205.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 26670.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 157740.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 92205.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 26670.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 157740.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 92205.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 26670.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 157740.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 92205.  
scripts.bundle.js:504:12271  
Error: WebGL warning: drawElementsInstanced: Instance fetch requires  
223275, but attribs only supply 26670.

On edge nothing.

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [May 4, 2018, 1:48pm UTC](https://community.cesium.com/t/cesium-angular/6797/8 "2018-05-04T13:48:03Z")

</div>

Hi there,

FYI, the bug has been resolved in Cesium 1.45.0 version.

---

<div class="post-metadata">

**Author:** ![Ankhenaten](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ankhenaten/32/15133_2.png) [@Ankhenaten](https://community.cesium.com/u/Ankhenaten)\
**Post date:** [May 9, 2018, 5:14pm UTC](https://community.cesium.com/t/cesium-angular/6797/9 "2018-05-09T17:14:22Z")

</div>

I tried to upgrade and 1.45 fails in Angular 6 now with some other path issue. ☹

> <https://github.com/CesiumGS/cesium/issues/6411>
>
> Hi,
> Thanks for the new release. Always appreciated! Unfortunately, my app failed to start and it seems the broken cesium\_base directory issue...

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [May 23, 2018, 10:42am UTC](https://community.cesium.com/t/cesium-angular/6797/10 "2018-05-23T10:42:17Z")

</div>

Hey all,

We have upgraded our example repository to work with Angular version 6. For those that do not want to upgrade yet, we maintain a separate branch for Angular version 5 in [https://github.com/Developer-Plexscape/cesium-angular-example/tree/ng5](https://github.com/Developer-Plexscape/cesium-angular-example/tree/ng5)

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [May 24, 2018, 1:37pm UTC](https://community.cesium.com/t/cesium-angular/6797/11 "2018-05-24T13:37:33Z")

</div>

Thanks Aristeidis for all the work you’re doing! It’s a big help for the Cesium community using Angular.

Thanks,

Gabby

---

<div class="post-metadata">

**Author:** ![meseenu1979](https://avatars.discourse-cdn.com/v4/letter/m/d6d6ee/32.png) [@meseenu1979](https://community.cesium.com/u/meseenu1979)\
**Post date:** [December 6, 2019, 4:48pm UTC](https://community.cesium.com/t/cesium-angular/6797/12 "2019-12-06T16:48:37Z")

</div>

Hi everyone,

I’m new to this cesium and angular 8. I’m doing project using these two. I’m able to run angular application with cesium map viewing on that.

In order to draw rectangle on the globe, i have written code using sand castle of cesium. But im facing one problem

everytime I click a button the program it is creating new viewer and old viewer moving down in screen.

where can i get one small example of drawing line on globe which can be used as template.

Thanks every one in advance

sreeni

---

<div class="post-metadata">

**Author:** ![Aristeidis\_Bampakos](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/aristeidis_bampakos/32/2013_2.png) [@Aristeidis\_Bampakos](https://community.cesium.com/u/Aristeidis_Bampakos)\
**Post date:** [December 7, 2019, 1:06pm UTC](https://community.cesium.com/t/cesium-angular/6797/13 "2019-12-07T13:06:52Z")

</div>

Hi sreeni,

Could you please share some code of the button that you mention so that we can help you identify what the problem is?

Thanks,

Aristeidis

---

<div class="post-metadata">

**Author:** ![11117](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/11117/32/3177_2.png) [@11117](https://community.cesium.com/u/11117)\
**Post date:** [December 8, 2019, 11:57am UTC](https://community.cesium.com/t/cesium-angular/6797/14 "2019-12-08T11:57:20Z")

</div>

> > Hi sreeni,

Would you like to return to the same viewer every time?

or you would like to rerender it again?

Ezri.
