Map Context Menu

The Service manages a singleton context menu over the map. The Service allows opening angular components and anchoring to the map.
my-context-menu-layer.component.ts
   constructor(private contextMenuService: ContextMenuService,
              private mapEventsManager: MapEventsManagerService,
              private coordinateConverter: CoordinateConverter) {
  }
  
  ngOnInit() {
    this.mapEventsManager
      .register({ event: CesiumEvent.RIGHT_CLICK, pick: PickOptions.NO_PICK })
      .subscribe(event => {
        const position = this.coordinateConverter.screenToCartesian3(event.movement.endPosition);
        if (!position) {
          return;
        }
​
        this.contextMenuService.open<ContextMenuData>(
          MyCustomContextMenuComponent,
          position,
          {
            data: {
              item: {name: 'Cool name'},
              onActionClick: () => {
                console.log('do action');
                this.contextMenuService.close();
              }
            }
          }
        );
      });
  }
Tip: It should be initialised withMapEventsManager.e.g: open a menu component on every right click on the map.  
open<D>(contentComponent, position: Cartesian3, option: ContextMenuOptions<D>)
Open's an angular component and anchor it to the given position.
close()
Remove any opened components.
​

GUIDES - Previous

Html Anchoring

Next - GUIDES

Camera Control

Last modified 2yr ago

Copy link