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
1
   constructor(private contextMenuService: ContextMenuService,
2
              private mapEventsManager: MapEventsManagerService,
3
              private coordinateConverter: CoordinateConverter) {
4
  }
5
  
6
  ngOnInit() {
7
    this.mapEventsManager
8
      .register({ event: CesiumEvent.RIGHT_CLICK, pick: PickOptions.NO_PICK })
9
      .subscribe(event => {
10
        const position = this.coordinateConverter.screenToCartesian3(event.movement.endPosition);
11
        if (!position) {
12
          return;
13
        }
14
​
15
        this.contextMenuService.open<ContextMenuData>(
16
          MyCustomContextMenuComponent,
17
          position,
18
          {
19
            data: {
20
              item: {name: 'Cool name'},
21
              onActionClick: () => {
22
                console.log('do action');
23
                this.contextMenuService.close();
24
              }
25
            }
26
          }
27
        );
28
      });
29
  }
Copied!
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