Angular Cesium supports integration of multiple maps. A simple way to implement multiple maps is by using *ngFor directive inside <ac-map>. AcMapComponent has a containerId input which can be used to specify the id of the containing element. In order to set initial viewer configuration for multiple maps you can set ViewerConfigurationService.viewerOptions to an array of options. The map initialized first will be set with the first option object in the options array and so on.

Usage example:

@Component({...})
export class MultipleMaps {
  maps = [
    {
      id: 'main-map',
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
      containerId: 'left-map-container',
    },
    {
      id: 'sub-map',
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
      containerId: 'right-map-container',
    },
  ];
  
  constructor(private viewerConf: ViewerConfiguration) {
    viewerConf.viewerOptions = [{...}, {...}];
  }
}

<ac-map *ngFor="let map of maps; trackBy: mapsTrackBy" 
  [mapId]="map.id"
  [sceneMode]="map.sceneMode"
  [containerId]="map.containerId"
>
</ac-map>

<div style="display: flex; flex-direction: row; flex: 1;">
  <multiple-maps></multiple-maps>
  <div 
    id="left-map-container" 
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
  >
  </div>
  <div 
    id="right-map-container" 
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
  >
  </div>
</div>

Syncing Multiple Maps

When displaying multiple maps you can sync their cameras so that moving the camera in one map will update the camera position in another map. By doing so you can have multiple views of the same data from different angles and zoom levels.

In order to sync multiple maps, all of the synced maps should be setup withSceneMode.PERFORMANCE_SCENE2D as their sceneMode.

To sync multiple maps, run sync2DMapsCameras() from MapsManagerService.

sync2DMapsCameras(mapsConfiguration)

The function is used to bind the cameras of multiple 2d maps (maps should be configured with SceneMode.PERFORMANCE_SCENE2D as their sceneMode). The function accepts a single argument:

mapsConfiguration - an array of maps configs the camera binding of each of the synced maps. The argument is of the following type:

type Array<{
  //The mapId of the map to sync
  id: string;
  
  //The percent that the map's camera position should change in order to trigger
  //an update in the other synced maps camera.
  //The lower the value - the greater the sensativity (values between 0 - 1).
  sensitivity?: number;  //Default: 0.01
  
  //Determines if the zoom level should also be matched 
  //to the currently updating map
  bindZoom?: boolean; 
}>

Usage example:

@Component({...})
export class MultipleMaps implements AfterViewInit {
  maps = [
    {
      id: 'main-map',
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
      containerId: 'left-map-container',
    },
    {
      id: 'sub-map',
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
      containerId: 'right-map-container',
    },
  ];
  
  constructor(
    private viewerConf: ViewerConfiguration,
    private mapsManagerService: MapsManagerService
  ) {
    viewerConf.viewerOptions = [{...}, {...}];
  }
  
  ngAfterViewInit(): void {
    this.mapsManagerService.sync2DMapsCameras([
      {id: 'main-map'},
      {id: 'sub-map'}
    ]);
  }
}

<ac-map *ngFor="let map of maps; trackBy: mapsTrackBy" 
  [mapId]="map.id"
  [sceneMode]="map.sceneMode"
  [containerId]="map.containerId"
>
</ac-map>

<div style="display: flex; flex-direction: row; flex: 1;">
  <multiple-maps></multiple-maps>
  <div 
    id="left-map-container" 
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
  >
  </div>
  <div 
    id="right-map-container" 
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
  >
  </div>
</div>

​