Multiple Maps and Maps Sync

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:
multiple-maps.component.ts
multiple-maps.component.html
app.component.html
1
@Component({...})
2
export class MultipleMaps {
3
  maps = [
4
    {
5
      id: 'main-map',
6
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
7
      containerId: 'left-map-container',
8
    },
9
    {
10
      id: 'sub-map',
11
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
12
      containerId: 'right-map-container',
13
    },
14
  ];
15
  
16
  constructor(private viewerConf: ViewerConfiguration) {
17
    viewerConf.viewerOptions = [{...}, {...}];
18
  }
19
}
Copied!
1
<ac-map *ngFor="let map of maps; trackBy: mapsTrackBy" 
2
  [mapId]="map.id"
3
  [sceneMode]="map.sceneMode"
4
  [containerId]="map.containerId"
5
>
6
</ac-map>
Copied!
1
<div style="display: flex; flex-direction: row; flex: 1;">
2
  <multiple-maps></multiple-maps>
3
  <div 
4
    id="left-map-container" 
5
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
6
  >
7
  </div>
8
  <div 
9
    id="right-map-container" 
10
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
11
  >
12
  </div>
13
</div>
Copied!
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:
1
type Array<{
2
  //The mapId of the map to sync
3
  id: string;
4
  
5
  //The percent that the map's camera position should change in order to trigger
6
  //an update in the other synced maps camera.
7
  //The lower the value - the greater the sensativity (values between 0 - 1).
8
  sensitivity?: number;  //Default: 0.01
9
  
10
  //Determines if the zoom level should also be matched 
11
  //to the currently updating map
12
  bindZoom?: boolean; 
13
}>
Copied!
Usage example:
multiple-maps.component.ts
multiple-maps.component.html
app.component.html
1
@Component({...})
2
export class MultipleMaps implements AfterViewInit {
3
  maps = [
4
    {
5
      id: 'main-map',
6
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
7
      containerId: 'left-map-container',
8
    },
9
    {
10
      id: 'sub-map',
11
      sceneMode: SceneMode.PERFORMANCE_SCENE2D,
12
      containerId: 'right-map-container',
13
    },
14
  ];
15
  
16
  constructor(
17
    private viewerConf: ViewerConfiguration,
18
    private mapsManagerService: MapsManagerService
19
  ) {
20
    viewerConf.viewerOptions = [{...}, {...}];
21
  }
22
  
23
  ngAfterViewInit(): void {
24
    this.mapsManagerService.sync2DMapsCameras([
25
      {id: 'main-map'},
26
      {id: 'sub-map'}
27
    ]);
28
  }
29
}
Copied!
1
<ac-map *ngFor="let map of maps; trackBy: mapsTrackBy" 
2
  [mapId]="map.id"
3
  [sceneMode]="map.sceneMode"
4
  [containerId]="map.containerId"
5
>
6
</ac-map>
Copied!
1
<div style="display: flex; flex-direction: row; flex: 1;">
2
  <multiple-maps></multiple-maps>
3
  <div 
4
    id="left-map-container" 
5
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
6
  >
7
  </div>
8
  <div 
9
    id="right-map-container" 
10
    style="display: flex; flex: 1; position: relative; overflow: hidden" 
11
  >
12
  </div>
13
</div>
Copied!
​

GUIDES - Previous

Maps Manager Service

Next - GUIDES

Map Imagery Providers

Last modified 2yr ago

Copy link

Contents

Syncing Multiple Maps

Usage example:

Syncing Multiple Maps

sync2DMapsCameras(mapsConfiguration)

Usage example:

​

`sync2DMapsCameras(mapsConfiguration)`