Just FYI, there are several warnings from TSC when no-implicit-any is enabled:

node_modules\angular-cesium\src\angular-cesium-widgets\directives\draggable-to-map.directive.d.ts
Error:(7, 9) TS7008: Member 'style' implicitly has an 'any' type.

node_modules\angular-cesium\src\angular-cesium\components\ac-array-desc\ac-array-desc.component.d.ts
Error:(10, 16) TS7006: Parameter 'item' implicitly has an 'any' type.
Error:(10, 22) TS7006: Parameter 'index' implicitly has an 'any' type.

node_modules\angular-cesium\src\angular-cesium\services\ac-html-manager\ac-html-manager.service.d.ts
Error:(6, 9) TS7008: Member 'entity' implicitly has an 'any' type.
Error:(7, 9) TS7008: Member 'primitive' implicitly has an 'any' type.
Error:(10, 9) TS7008: Member 'entity' implicitly has an 'any' type.
Error:(11, 9) TS7008: Member 'primitive' implicitly has an 'any' type.

node_modules\angular-cesium\src\angular-cesium\services\coordinate-converter\coordinate-converter.service.d.ts
Error:(27, 9) TS7008: Member 'latitude' implicitly has an 'any' type.
Error:(28, 9) TS7008: Member 'longitude' implicitly has an 'any' type.
Error:(30, 9) TS7008: Member 'latitude' implicitly has an 'any' type.
Error:(31, 9) TS7008: Member 'longitude' implicitly has an 'any' type.
Error:(35, 9) TS7008: Member 'latitude' implicitly has an 'any' type.
Error:(36, 9) TS7008: Member 'longitude' implicitly has an 'any' type.
Error:(38, 9) TS7008: Member 'latitude' implicitly has an 'any' type.
Error:(39, 9) TS7008: Member 'longitude' implicitly has an 'any' type.

use ac-box-desc，Create multiple entities，when I update show attribute true->false，An error occurred

Intended outcome:

Actual outcome:
This was tested on Chrome v62.0.3202.94, 64bit.
I am not able to use the module as described below.

How to reproduce the issue:
Just installed cesium and angular-cesium, imported AngularCesiumModule etc. as stated in README.md. When I hit ng serve I get the following error in console: SyntaxError {__zone_symbol__error: Error: Can't resolve all parameters for KeyboardControlService: ([object Object], [object Object], ?…, …}. If I comment AngularCesiumModule from app.module.ts imports the error disappears, but I can't use the module anymore, obviously.

Version

• [email protected]

I'm trying to create a minimalist code sample to display a track layer with only one track provided by a service.
I can't see anything.

Here is my layer:

 <ac-map>
   <ac-layer acFor="let track of tracks$" [show]="show" [context]="this">
     <ac-billboard-desc props="{
           image: track.image,
           position: track.position,
           color: getTrackColor(track),
           scale: 0.1,
           name: track.callsign,
           rotation: -track.heading
         }">
     </ac-billboard-desc>
   </ac-layer>
 </ac-map>

My Component

import { Input } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { StompService, StompState} from '@stomp/ng2-stompjs';
import { TrackService } from '../track.service';
import { AcNotification, ActionType, AcEntity } from 'angular-cesium';

@Component({
  selector: 'app-raw',
  templateUrl: './raw.component.html',
  styleUrls: ['./raw.component.css']
})
export class RawComponent implements OnInit {
  @Input()
  show: boolean;
  private tracks$: Observable<AcNotification>;
  constructor(public trackService: TrackService) {
    this.tracks$ = trackService.getNotificationStream();
  }
  ngOnInit() {
  }
  getTrackColor(track): any {
   return Cesium.Color.GREENYELLOW;
  }
}

And my simple service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { TrackProvider } from './track-provider';
import { AcNotification, ActionType, AcEntity } from 'angular-cesium';

@Injectable()
export class TrackService implements TrackProvider {

  public stream: Observable<AcNotification>;

  constructor() {
    const track1: AcNotification = {
      // tslint:disable-next-line:indent
      id: '0',
      actionType: ActionType.ADD_UPDATE,
      entity: AcEntity.create({
        'id': 0,
        'isTarget': true,
        'callsign': 'track0',
        'image': '/assets/fighter-jet.png',
        'heading': 0.23150836806679354,
        'position': {
          'lat': 43.075370416594396,
          'long': 6.39081839993192,
          'altitude': 3004.011205702888
        },
        'futurePosition': {
          'lat': 43.7393990242203383,
            'long': 6.94148858616866,
            'altitude': 3004.011205702888
          }
      })
    };

    const trackArray = [track1];
    this.stream = Observable.from(trackArray);
  }

  /**
   *
   */
  public getNotificationStream(): Observable<AcNotification> {
    return this.stream;
  }
}

after running AoT in angular v4.x

Can't resolve all parameters for EntitiesDrawerService in

....../node_modules/angular-cesium/src/services/drawers
/entities-drawer/entities-drawer.service.d.ts: ([object Object], ?, ?). 
This will become an error in Angular v5.x

Warning: Can't resolve all parameters for EntitiesDrawerService in
 ...../node_modules/angular-cesium/src/services/drawers/entities-drawer
/entities-drawer.service.d.ts:
 ([object Object], ?, ?). This will become an error in Angular v5.x

We're trying to ingegrate angular-cesium into a large existing Angular app that was based on the angular-seed project (which uses SystemJS). I'm have a lot of trouble getting angular-cesium to work:

• The library uses lodash.get, which is a Node library which seems to require Babel transpiling to work. Having to use Babel just to get this one tiny dependency to work seems like overkill. Could this be changed to just pull in _get from the full lodash.js module?
• There seem to be undeclared dependencies that assume angular-cli is being used (util, inherits, etc.).
• Heatmap is imported in a strange way ( from heatmap.js/build/heatmap.js) instead of just importing from heatmap.js and leaving it to the module loader to define or infer the mapping to /build/heatmap.js.

Basically, this is a large app that was built long before angular-cli existed, so switching it to angular-cli would be a big undertaking. We may do this at some point, but for now, could you document the steps to get angular-cesium working in a SystemJS project? I think that doing so would reveal some of the odd things that appear to be going on, which you may not be seeing because using a CLI project is masking them.

Intended outcome:
I try to edit specific polygon that is covered by other polygons and drag it from place to place - the Intended outcome is that the chosen polygon will be dragged;

Actual outcome:
the chosen polygon cant be dragged because it is covered by other polygons.

How to reproduce the issue:
create 3 new polygons with the same size and locate them in the same position,,
try to edit the second polygon and move it - it won't work.

Version

• [email protected]

I followed the steps in getting started, but the app doesn't work. Looking at the console there's an error that says "Can't bind to 'ngOutletContext' since it isn't a known property of 'ng-template'." Looks like ngx-charts has the same issue. ngOutletContext was deprecated in an earlier version of Angular, and it's no longer in Angular 5.

Intended outcome:
Sample app starts up

Actual outcome:
"ng serve" compiles fine, but I get a runtime error in the console after loading the page

How to reproduce the issue:
Follow the getting started steps

Version
angular-cesium 0.0.36
cesium 1.40
angular: 5.0.0

Hey, after updating to 0.0.32 angular-cli throws many compilation errors, for example:
coordinate-converter.service.d.ts: 36,9 Member 'longtitude' explicitly has an 'any' type

This error occurs many times in many different files and prevents me from starting my application...
Thank you!

when i try to load a wmts data, i get the following warning information:
'http://localhost:4500' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4203' that is not equal to the supplied origin. Origin 'http://localhost:4500' is therefore not allowed access.

So firstly, the app load the default map, then when i zoomin the map, the app load the wmts map, but it cannot move the map.

the port of the app is 4500.
here is the code of app.html just changed from the example.

<h1>
  <ac-map >
    <ac-map-layer-provider [provider]="webMapTileServiceProvide"
                           [options]="{
                         url : 'http://t0.tianditu.com/vec_w/wmts',
      layer : 'vec',
      style : 'default',
      format : 'tiles',
      tileMatrixSetID : 'w'
                            }">
    </ac-map-layer-provider>
  </ac-map>

</h1>

I also found the options cannot support the tilingScheme. which should be something like the following code in the js.
tilingScheme : new Cesium.GeographicTilingScheme(),
tileMatrixLabels:['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19']

By the way, where can i get the cesiumservice.
I try to get it in the app.component.ts file, but it cannot work. The code is

import { Component,Injectable } from '@angular/core';
import {AcMapLayerProviderComponent} from "angular-cesium/src/components/ac-map-layer-provider/ac-map-layer-provider.component";
import {CesiumService, MapLayerProviderOptions} from "angular-cesium";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers:[CesiumService]

})
export class AppComponent {
  title = 'app works!';
  cesiumService:CesiumService;
  webMapTileServiceProvide=MapLayerProviderOptions.WebMapTileService;
  constructor(cesiumService: CesiumService) {
    this.cesiumService=cesiumService;
  }
  ngAfterViewInit()
  {
   var cesiumViewer: any=   this.cesiumService.getViewer();
  }
}

when i try to get cesiumViewer in the ngAfterViewInit(), it got errors. And i found the cesiumService is invalid.

I have a "globe" component that I hold my cesium widget in, When I used the specified styles from the tutorial they are not applied. My styles are written in the globe.components.css file, and my html, body width and heights are set. my cesium viewer is 100% in width but not in height, I tried using .map-container (because editing this class in chrome allowed me to set the map at the right height) but the .css file cannot reach the classes within the ac-map attribute

globe.module.ts:

import { AngularCesiumModule } from 'angular-cesium';
import { GlobeComponent } from './globe.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    GlobeComponent
  ],
  imports: [
    AngularCesiumModule.forRoot()
  ]
})

export class GlobeModule {}

globe.component.html

<ac-map></ac-map>

globe.component.css

@import url(/node_modules/cesium/Build/Cesium/Widgets/widgets.css);

#cesiumContainer {
    width: 100%;
    height: 720px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.map-container {
    width: 100%;
    height: 720px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

globe.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-globe',
    templateUrl: './globe.component.html',
    styleUrls: [
        './globe.component.css'
    ],
})
export class GlobeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Sorry if this is not where you guys want inquiries posted, It is unclear in the docs changes that need to be made if you do not host cesium in the root component

Compodoc generate the docs into docs folder, and serve it from documentation folder.

I am trying to implement the polygon drawer from the demo app by importing the various components into my code. I am using the angular-cesium node module, and have copied the missing components from the demo source into my app (PolygonsEditorLayerComponent and PolygonsEditorLayerComponent, with a little fiddling). However, whenever I use an ac-layer component in my app (from polygons-editor.component.html), I get the error:

Error: No provider for MapLayersService!

...even though I am not referencing this service anywhere in my code, thus I believe it is the angular-cesium code itself that is trying to inject this service and failing.

I am probably just misunderstanding how to import the library properly, but I believe I have done all I need. In my AppModule:

@NgModule({
  declarations: [
    AppComponent,
    MapComponent,
    RightOptionsComponent,
    PolygonsEditorLayerComponent,
    PolygonsEditorComponent
  ],
  imports: [
    BrowserModule,
    CoreModule,
    SharedModule,
    AngularCesiumModule.forRoot()
  ],
  bootstrap: [AppComponent],
  providers: []
})
export class AppModule { }

What is going on?

Intended outcome:
Map displays without error

Actual outcome:
No compilation errors, but in the browser:

Error: No provider for MapLayersService!

How to reproduce the issue:
Copy the PolygonsEditorComponent from the demo app and insert it into my own app. It seems just using ac-layer causes the issue.

Version

• [email protected]

hi eitanfr,
I update my application to version 0.0.19.
Following the guid to update, I get an error.
" ERROR in Error encountered resolving symbol values statically. Calling function 'AngularCesiumModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in D:/SupreVision//src/app/app.module.ts, resolving symbol AppModule in D:/SupreVision/src/app/app.module.ts"

I am sure this is from AngularCesiumModule.forRoot().
How to fix it?

Thanks.

I tried to run the demo with a new version of Cesium, but it's not working.

The message on V1.33.0:
Uncaught Error: Core/GoogleEarthEnterpriseMetadata missing ThirdParty/pako_inflate

The message on V1.34.0:
Cesium missing ThirdParty/pako_inflate

I've created some ac-layer.
In my component TS file, I need to create some observable.
It seems not intuitive to iterate over my data array and use observer.next() on each entity.
Because of the use of acFor - it seems like the FOR should loop over the observable array and I (the client) am not supposed to iterrate over my data inside of my component.

Example - taken from your demo:

this._socket.on('birds', (data) => {
    data.map((acNotification) => {
	 let action;
	 if (acNotification.action === 'ADD_OR_UPDATE') {
		 action = ActionType.ADD_UPDATE;
	 }
	 else if (acNotification.action === 'DELETE') {
		 action = ActionType.DELETE
	 }

	 acNotification.actionType = action;
	 acNotification.entity = convertToCesiumObj(acNotification.entity);
	 observer.next(acNotification);
    });
});

If I have the correct data I won't even need to iterate. It seems like the logically right way to use it would be:

// In case the data is right and I don't need to `map` anything
this._socket.on('birds', (data) => {
       observer.next(data);
});

Maybe there is something that I'm missing about the things going around behind the scenes, but the current usage seems just logically wrong.

Intended outcome:
I am trying to handle the left click on the ac-map.

Actual outcome:
Firstly I tried to inject the MapEventsManagerService in the constructor of my component but I got No provider for MapEventsManagerService error in console.

//ts file
@Component(...)
private provider = Cesium.ArcGisMapServerImageryProvider;
export class SomeComponent{
  constructor(private eventManager: MapEventsManagerService){
    const eventRegistration: EventRegistrationInput = {
      event: CesiumEvent.LEFT_CLICK, // event type enum. [required!]
      modifier: CesiumEventModifier.CTRL, // event modifier enum. [optional]
      entityType: AcEntity, // raise event only if AcEntity is clicked. [optional] 
      priority: 0, // event priority, default 0 . [optional]
      pick: PickOptions.PICK_FIRST // entity pick option, default PickOptions.NO_PICK. [optional]
    };
    const clickEvent = this.eventManager.register(eventRegistration).subscribe((result) => {
    	  console.log('map click', result.movement, 'primitives:', result.primitives, 'entities', result.entities);
    	});
  } 
}

I even changed the entityType: AcEntity to entityType: AcMapComponent because I thought it'd make a difference.

//html
<ac-map></ac-map>

Secondly I tried to take a reference to the ac-map component with @ViewChild, i.e.

@ViewChild(AcMapComponent) acmap: AcMapComponent;
...
ngOnInit() { // I used the ngOnInit to register the event because the property acmap is set after the constructor calls
    var eventManager = this.acmap.getMapEventsManager();
    ...
    // same code as above
}

In this case the error No provider for MapEventsManagerService doesn't show up, but nothing happens when clicking the map.

How to reproduce the issue:
In order to reproduce this issue, it is enough to create a template file which consists of a ac-map component, then create and subscribe to the map click event as stated in the readme. I also tried to include a ac-map-layer-provider like this:

<ac-map>
    <ac-map-layer-provider  *ngIf="true"
                            [provider]="provider"
                            [options]="{
                                url : 'https://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer'
                            }">
    </ac-map-layer-provider>
</ac-map>

Version

• [email protected]

hello , youve got a great product !
my problem is
there is no way to inject CesiumService and use the getViewer & getScene functions in a component/service which is located out side of ac-map in the dom hirarchy

Hey guys,
when the ac-circle object ngOnDestroy function is called the app crashes.
does the ngOnDestroy has any difference treatment on ac-circle ?

After updating to the latest version, I started getting exceptions saying that MapEventsManagerService has not been initialized yet, it needs to be called under . My component registers to the event using the service in it's constructor, and it is inside . This only happened when I updated to 0.0.29, and did not happen before. Thank you.

So i found a workaround for the 'ngOutletContext' exception i get, because i'm working with angular 5 - renaming 'ngOutletContext' to 'ngTemplateOutletContext' because 'ngOutletContext' got removed in angular 5. I do not know if following issue relates to the circumstance that i'm working with angular 5 but i thought it could be important to mention that here! :-)

I than integrated the ac-map into a componant of a sub-module - e.g. not into the root module as the README suggests. I do not get any exceptions and a already see the cesium-component rendered in my browser, but its height is 18px and unfortunately i was not able to fix this.

Any suggestions? Is this due to the fact, that angular-cesium is not optimized for angular5 yet or did i miss something?

Actual outcome:

The ac-map is only 18px high. Stylings (e.g. setting a height) in the corresponding component.scss only apply to the ac-map but does not resize .cesium-viewer. Stylings that would apply to .cesium-viewer are not applied.

There is also a SO question about the same issue, but his workaround of setting the .map-container does not work for me, because the style does not get applied! (https://stackoverflow.com/questions/46409894/how-to-use-angular-cesium-not-in-the-root-module)

Version

• [email protected]
• [email protected]
• angular@5

I created a component with a simple map and I'm trying to apply some default settings like in the demo-app example.

I imported the configuration service
import { ViewerConfiguration } from 'angular-cesium/src/services/viewer-configuration/viewer-configuration.service';

providers: [
   ...
    ViewerConfiguration
  ]

And configure the viewer in the component constructor

constructor(public trackService: TrackService, public viewerConf: ViewerConfiguration) {
    viewerConf.viewerOptions = {
      sceneMode: Cesium.SceneMode.COLUMBUS_VIEW,
      selectionIndicator: false,
      timeline: false,
      infoBox: false,
      fullscreenButton: false,
      baseLayerPicker: false,
      animation: false,
      homeButton: false,
      geocoder: false,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
    };
   ...

It seems that the configuration is not applied. I can still see the timeline, geocoder,...
I'm using 0.0.18 version.

Hi eitanfr, You did great jobs. Thanks.

I want to use this project to load photogrammetry models. Can the angular-cesium load 3D titles models? Please help to provide an example.

Hi,
I am having some hard time configuring angular-cesium to work with a geoserver map provider.
I have tried following the samples here : samples
But had no success.
We are migrating from an Angular 1.5 project using CesiumJS with a geoserver map provider.
In CesiumJS we used the Cesium.WebMapServiceImageryProvider , initializing it with a url and a layers property as follows :
var imageryProvider = new Cesium.WebMapServiceImageryProvider({ url: url, layers: layer })
Assuming the url to the geoserver is : http://localhost:8080/geoserver/wms
and the layer name is : TrueMarble
What should I do in order to get a map showing ?
I have tried all variations of
<ac-map-layer-provider [provider]="MapLayerProviderOptions.WebMapService" [options]="{ url: 'http://localhost:8080/geoserver/wms', layers: 'TrueMarble' (with or without it) }">

I would really appreciate a sample or a guidance.
Thanks,
תודה רבה

hi,
I have a problem about event priority，now I have two left click event， set priority 1 and 2，but when I click Nothing happened，what should I do？

Console error showing up when I'm trying to initialize the scene, cannot read property 'scene' of undefined pointing to line 25 in cesium.service.js

CesiumService.prototype.getScene = function () {
        return this.cesiumViewer.scene;
};

I'm using the getScene() method in my component:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { CesiumService } from '../../../node_modules/angular-cesium/src/services/cesium/cesium.service.js'

@Component({
    selector: 'app-globe',
    templateUrl: './globe.component.html',
    styleUrls: ['./globe.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class GlobeComponent implements OnInit {
    cesiumViewer;
    cesiumScene;
    cesiumCanvas;
    acceptAllURL = 'http://65.102.85.13:8080/rest/kml/accept/all';

    constructor(private cesiumService: CesiumService) {
    }

    ngOnInit() {
        this.loadCesium();
    }

    loadCesium() {
        this.cesiumViewer = this.cesiumService.getViewer();
        this.cesiumScene = this.cesiumService.getScene();
        this.cesiumCanvas = this.cesiumService.getCanvas();

        const options = {
            camera : this.cesiumScene,
            canvas : this.cesiumCanvas,
            proxy : new Cesium.DefaultProxy('/proxy/')
        };

        const dataSourceAcceptAll = new Cesium.KmlDataSource(options);
        dataSourceAcceptAll.load(this.acceptAllURL, options);
    }
}

and providing the modules in my module

import { AngularCesiumModule } from 'angular-cesium';
import { GlobeComponent } from './globe.component';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CesiumService } from '../../../node_modules/angular-cesium/src/services/cesium/cesium.service.js'
import { ViewerFactory } from '../../../node_modules/angular-cesium/src/services/viewer-factory/viewer-factory.service.js'

@NgModule({
  declarations: [
    GlobeComponent
  ],
  imports: [
    AngularCesiumModule.forRoot()
  ],
  providers: [
    CesiumService,
    ViewerFactory
  ]
})

export class GlobeModule {}

full error:

Hello,

I'm trying to get a data stream to flow for a heatmap by following the cesium.js heatmap population tutorial here. But I'm running into a lot of problems trying to right the getter setter functions for the webGL prototype object. Is there a syntax for this in typescript? Or a better api to use for these?

I only found 4 results on google when searching for this issue :/

npm install --save angular-cesium

The directory in the node_modules folder is like this：

the angular-cesium.module is not a ts file.

How do i use it?

when you upload a uc-entity to the map there is a black page refresh that catches the eye.

Hello, Cesium.js has many examples in there docs of different data types, one of the most common being KML. Would you guys consider adding a KML example to the docs?

I have a stack question here and would be willing to right up a docs example in a pull request if I can be shown how to do this

Dear,
I just follow the steps to create an application. But it doesn't work!

The error:
main.js:469 Uncaught ReferenceError: Cesium is not defined
at main.js:469

which point to
EllipsePrimitive.borderStyleToPrimitiveType = {
solid: Cesium.PrimitiveType.LINE_LOOP,
dashed: Cesium.PrimitiveType.LINES
};

I followed the guide.
npm install --save angular-cesium (which version is 0.11)
npm install --save cesium (which version is 1.35.1)

Import AngularCesiumModule in app.module.ts file.
Set cesium config in .angular-cli.json like this:
"assets": [
"assets",
"favicon.ico",
{
"glob": "**/*",
"input": "../node_modules/cesium/Build/Cesium",
"output": "./assets/cesium"
}
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"../node_modules/cesium/Build/Cesium/Widgets/widgets.css",
"styles.css"
],
"scripts": [
"../node_modules/cesium/Build/Cesium/Cesium.js"
],

And I do declare Cesium in typings.d.ts file.
/* SystemJS module definition */
declare var Cesium: any;
declare var module: NodeModule;
interface NodeModule {
id: string;
}

My application is created by webstorm 2017.

Please help me!

hey,

there is no primitive single (not as part of a layer) polyline option,
ive looked at it , as you suggested its just changing the drawer from polylinedrawer to primitive polyline drawer ,but couldnt test it.

ill be super glad to have an 'ac-primitive-polyline' component.
Thanks !

Dear all,
I study the ac-html component now. I have some question.

1. In my opinion, the html feature either overlay the map with screen position, or embed in the map with world position. However, in our implement the html feature only provide the second one.

2. There is not a ac-html-desc feature. I mean the ac-html feature is very family with ac-label, there should be an observable array to stream.

cheers,
Nicky

Clicking an object on the map (or clicking multiple times) on an empty area while there is a polyline with Dash material throws an error Cannot read property 'distanceSquaredTo' of undefined, causing any PICK_FIRST event to not work.
Tried with Cesium versions 1.33.0 and 1.31.0, also tried replicating the issue on a clean cesium project and it did not happen.

After running basic set up and getting angular-cesium up and running,

warning in the console:
Invalid asm.js: Invalid member of stdlib globe:557

allow KeyboardControlService addEventListener to run outside of angular zone

Intended outcome:
Use availability property of an entity (ex. have am ac-box-desc only show when available).

Actual outcome:
Availability property of entity is not supported.

How to reproduce the issue:

HTML:

<ac-layer acFor="let ev of eventsCesium" [context]="this" [show]="show" [store]="store">

<ac-box-desc props="{
	dimensions: ev.box.dimensions,
	material: ev.box.material,
			position: ev.position,
			show: ev.show,
			availability: ev.availability
		  }">
</ac-box-desc>

JS:

                    var interval = new Cesium.TimeInterval({
			start: Cesium.JulianDate.fromDate(new Date()),
			stop: Cesium.JulianDate.fromDate(new Date(2017, 11, 13))
		});
		var arr = [interval];
		var timeint = new Cesium.TimeIntervalCollection(arr);
		var blueBox = new AcEntity({
			name: 'Blue box',
			position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
			box: {
				dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
				material: Cesium.Color.BLUE
			},
			availability: timeint
		});
		let notif: AcNotification = {
			id: event.id,
			entity: blueBox,
			actionType: ActionType.ADD_UPDATE
		}
		this.eventsCesium.next(notif);

How to fix the issue:
angular-cesium/src/angular-cesium/services/drawers/entities-drawer/entities-drawer.service.ts
after line 67 add
availability: cesiumProps.availability !== undefined ? cesiumProps.availability : undefined

after line 85 add
entity.availability = cesiumProps.availability !== undefined ? cesiumProps.availability : undefined;

Version

• [email protected]

Intended outcome:
images load in the Cesium container

Actual outcome:
missing resource thumbnails

How to reproduce the issue:
run ng build --prod --aot

Version
0.0.25

Hi again, (its David btw)
In AcHtml (which is not the docs for some reason.) we use cesium's wgs84ToWindowCoordinates to get the current position of the html component relative to the Cartesian position, this method has some issues that has been reported to cesium back in 2015 but has not yet been dealt with and wont be anytime soon, some times it returns incorrect values, some times it returns undefined which makes this line:
AcHtml-L33
this.elementRef.nativeElement.style.top = ${screenPosition.y}px; explode, as scrrenPosition is undefined.

*note that this only happens when the acHtml component is offscreen, so you cant see it anyway.

This is a cesium issue, but it wont be solved anytime soon and we can solve this by simply adding a check
if (screenPosition) {...}.

Also, as a btw, we directly set the ElementRef style in this code, which is bad practice according to angular, we should instead use renderer2
as in replace
this.elementRef.nativeElement.style.top = ${screenPosition.y}px
with
this.renderer.setStyle(this.elementRef, 'top', ${screenPosition.y}px);

If you would like I can make this quick changes and make a pull request.

Intended outcome:
I tried to set a non-cesium property to an Angular Cesium component.
E.g: <ac-billboard-desc props="{position: Position, aProperty: true}">
As you can see, aProperty is not a cesium property, although I would like it to be part of the cesium entity just like your acEntity property. It doesn't work on ActionType.ADD_UPDATE - as an ADD.
When using ActionType.ADD_UPDATE - as an UPDATE, It actually binds the non-cesium property to the entity.

Actual outcome:
When using ActionType.ADD_UPDATE - as an ADD, the non-cesium property is not assigned to the Cesium entity.

How to reproduce the issue:
Use a billboard for example, assign to it a non-cesium property when you ADD it. DON'T update yet.
Try picking the object with your events picker and watch the entity's non-cesium property missing

Version

• angular-cesium@latest

in this file
map-layer-provider.component.ts

The switch case for :
`

	switch (this.provider) {
		case MapLayerProviderOptions.WebMapService:
			this.layerProvider = AcMapLayerProviderComponent.createWebMapServiceProvider(this.options);
			break;
		case MapLayerProviderOptions.WebMapTileService:
			this.layerProvider = AcMapLayerProviderComponent.createWebMapTileServiceProvider(this.options);
			break;
		case MapLayerProviderOptions.ArcGisMapServer:
			this.layerProvider = AcMapLayerProviderComponent.createArcGisMapServerProvider(this.options);
			break;
		case MapLayerProviderOptions.OFFLINE:
			break; <-- remove this
		default:
			this.layerProvider = AcMapLayerProviderComponent.createOfflineMapProvider();
			break;
	}

`

Has a redundant break it skips over and does nothing, remove it or remove the option completely so it goes to default.

When I changed the property show to false it still show on the map in the first render.
On the second render it's gone.
<ac-dynamic-polyline-desc props = "{ width : polyline.dynamicPolyline.width, positions: polyline.dynamicPolyline.positions, material: polyline.dynamicPolyline.material, show: false }" >

Hi,
I have an unkown number of objects, each of them have uknown number of visited locations I wanted to present.
I followed the examples provided and everything worked fine for one object.
When trying to move to unkown number of users while maintaining the separation, e.g. - not showing all points together, each user has an ac-layer of its own - this way I can manipulate them easily (show\hide etc..).
I have tried the following :
<ac-layer *ngFor="let member$ of members$$ | async | mapValues" acFor="let location of members$" [context]="this" [store]="true">
<ac-point-desc props="{ pixelSize: 20, position: location.position, color: location.color }"> </ac-point-desc>
</ac-layer>

But got

ERROR Error: ac-layer: must initailize [acFor] with rx observable, instead received: undefined

members$$ - array of observables
member$ - an observable of locations

After an hour or so I figured its the context that causes the problem and therefore the member$ is undefined - it looks for a member$ in my component.

Can I define the context to something else ?
Is there any other way to do the above ? assuming that I dont want the simple one ac-layer for all locations solution..

Thanks,
Nadav

I'm getting a warning when running KML to the map.

which is causing some of the lines drawn on the map not to render. I have the same exact KML working in a regular cesium.js environment, with no warnings, and all the lines coming through

Let's say I have an ac-map-layer-provider component representing some layer on the map.
I'm using ngIf to hide it.
I'm expecting the layer to remove from the Cesium viewer.

Dear all,
I have a question. I noticed that we have an EventManager service(MapEventsManagerService). However, the MapEventsManagerService should be used in child component of ac-map, just like ac-layer.

In my opinion, the MapEventsManagerService should be a logic for ac-map, not for ac-layer, is that right?
Could you mind supporting a public method to get the instance from ac-map, for example getMapEventsManager().
I think this is similar to getCesiumViewer method of ac-map components.

I couldn't figure out from the docs how to add the map types and bing maps widgets for the different terrain types to the cesium tool bar. Could you clarify?

ex:

my current failing attempt:

ngOnInit() {
        const imageryViewModels = [];
        imageryViewModels.push(new Cesium.ProviderViewModel({
             name : 'Open\u00adStreet\u00adMap',
             iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/openStreetMap.png'),
             tooltip : 'OpenStreetMap (OSM) is a collaborative project to create a free editable \
        map of the world.\nhttp://www.openstreetmap.org',
             creationFunction : function() {
                 return Cesium.createOpenStreetMapImageryProvider({
                     url : 'https://a.tile.openstreetmap.org/'
                 });
             }
         }));

        imageryViewModels.push(new Cesium.ProviderViewModel({
             name : 'Black Marble',
             iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/blackMarble.png'),
             tooltip : 'The lights of cities and villages trace the outlines of civilization \
        in this global view of the Earth at night as seen by NASA/NOAA\'s Suomi NPP satellite.',
             creationFunction : function() {
                 return Cesium.createTileMapServiceImageryProvider({
                     url : 'https://cesiumjs.org/blackmarble',
                     credit : 'Black Marble imagery courtesy NASA Earth Observatory',
                     flipXY : true
                 });
             }
         }));

        imageryViewModels.push(new Cesium.ProviderViewModel({
             name : 'Natural Earth\u00a0II',
             iconUrl : Cesium.buildModuleUrl('Widgets/Images/ImageryProviders/naturalEarthII.png'),
             tooltip : 'Natural Earth II, darkened for contrast.\nhttp://www.naturalearthdata.com/',
             creationFunction : function() {
                 return Cesium.createTileMapServiceImageryProvider({
                     url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
                 });
             }
         }));

        const widget = new Cesium.CesiumWidget('cesiumContainer', { imageryProvider: false });
        const baseLayers = new Cesium.BaseLayerPicker('baseLayerPickerContainer', {
            globe: widget.scene.globe,
            imageryProviderViewModels: imageryViewModels
        });
    }

I've created a component and I want to handle the map mouse events.
I'm trying to import and use the MapEventManagerService but I got an error :

Error: No provider for CesiumService!

Here is my code

import { MapEventsManagerService } from 'angular-cesium/src/services/map-events-mananger/map-events-manager';


@Component({
  selector: 'app-raw',
  templateUrl: './raw.component.html',
  styleUrls: ['./raw.component.css'],
  providers: [
    MapEventsManagerService
  ]
})
export class RawComponent implements OnInit {

  constructor(private cesium: MapEventsManagerService) {
    // Register mouse handlers
    ...
  }

}

I can't found from the demo code where the CesiumService is provided.

hey,

I am using ac-ellipse-desc (version 0.0.33)
whenever the layer is updated, the ellipse is flashing
i have noticed that it happends only when the material i define has transparency

for example- when the material is red (248,77,80), it looks ok but when itis red with 60% transparency (248,77,80,153) it happends

thanks!
Roni Cohen :)

I currently have cesium in a div about half the size of my page, and when I click full screen it makes the background black, the whole html page goes full screen, and cesium stays the same size.

could this be related to this issue?

-----UPDATE--------

could it be related to my css styles?

#cesiumContainer {
    width: 100%;
    height: 720px;
    margin: 0; padding: 0;
    overflow: hidden;
}

.map-container {
    height: 720px;
    box-shadow: 4px 4px 7px #d2d2d2;
}

and then having ViewEncapsulation.None?