How to display multiple Angular Maps on a single page?

By setting a unique id name to the Angular Maps, multiple maps can be displayed on a single page. This section will explain you how to display multiple Maps on a single page.

In the following example, we have displayed three Maps components by assigning each a unique ID name. This enables multiple Maps to be displayed on the same page, each of which can be customized independently.

The below code example demonstrates how to display multiple Angular Maps on a single page.

app.component.html

<div class="control-section">
  <div class="col-lg-8">
    <div>
      <ejs-maps
        id="containerone"
        [titleSettings]="titleSettingsOne"
        [layers]="layersOne"
      >
      </ejs-maps>
    </div>
    <div>
      <ejs-maps
        id="containertwo"
        [titleSettings]="titleSettingsTwo"
        [layers]="layersTwo"
      >
      </ejs-maps>
    </div>
    <div>
      <ejs-maps
        id="containerthree"
        [titleSettings]="titleSettingsThree"
        [layers]="layersThree"
      >
      </ejs-maps>
    </div>
  </div>
</div>

app.component.ts

/**
 * Maps default sample
 */
import { Component, ViewEncapsulation } from '@angular/core';
import { Maps } from '@syncfusion/ej2-angular-maps';
import worldMap from './world-map.json';
declare var require: any;
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  titleSettingsOne: object = {
    text: 'Maps One',
    textStyle: {
      size: '16px',
    },
  };

  titleSettingsTwo: object = {
    text: 'Maps Two',
    textStyle: {
      size: '16px',
    },
  };

  titleSettingsThree: object = {
    text: 'Maps Three',
    textStyle: {
      size: '16px',
    },
  };

  public layersOne: object[] = [
    {
      shapeData: worldMap,
      markerSettings: [
        {
          visible: true,
          height: 30,
          width: 30,
          dataSource: [
            { latitude: 49.95121990866204, longitude: 18.468749999999998 },
            { latitude: 59.88893689676585, longitude: -109.3359375 },
            { latitude: -6.64607562172573, longitude: -55.54687499999999 },
          ],
          animationDuration: 0,
        },
      ],
    },
  ];

  public layersTwo: object[] = [
    {
      shapeData: worldMap,
      shapeDataPath: 'name',
      shapePropertyPath: 'name',
      bubbleSettings: [
        {
          visible: true,
          minRadius: 5,
          valuePath: 'population',
          dataSource: [
            { name: 'India', population: '38332521' },
            { name: 'New Zealand', population: '19651127' },
            {
              name: 'United States',
              population: '5050442726',
            },
            {
              name: 'Oman',
              population: '3415597234',
            },
            {
              name: 'United Arab Emirates',
              population: '2759638942',
            },
          ],
          maxRadius: 20,
        },
      ],
    },
  ];

  public layersThree: object[] = [
    {
      shapeData: worldMap,
      markerSettings: [
        {
          visible: true,
          template:
            '<div id="marker4" class="markerTemplate">Europe' + '</div>',
          dataSource: [
            { latitude: 49.95121990866204, longitude: 18.468749999999998 },
          ],
          animationDuration: 0,
        },
        {
          visible: true,
          template:
            '<div id="marker5" class="markerTemplate" style="width:50px">North America' +
            '</div>',
          dataSource: [
            { latitude: 59.88893689676585, longitude: -109.3359375 },
          ],
          animationDuration: 0,
        },
        {
          visible: true,
          template:
            '<div id="marker6" class="markerTemplate" style="width:50px">South America' +
            '</div>',
          dataSource: [
            { latitude: -6.64607562172573, longitude: -55.54687499999999 },
          ],
          animationDuration: 0,
        },
      ],
    },
  ];
  constructor() {}
}

The following screenshot illustrates the output of the above code snippet.

View Sample in Stackblitz

Conclusion

I hope you enjoyed learning how to display multiple Angular Maps on a single page.

You can refer to our Angular Maps feature tour to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Maps example to understand how to create and visualize the data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!