How to display satellite imagery from online map providers in Angular Maps?

The Angular Maps component supports displaying various online map providers, including OpenStreetMap, Azure Maps, MapBox, Bing Maps and others. This section will demonstrate how to display satellite imagery from online map providers in Maps.

The tile server URL of the online map providers is used to render the map in the Maps component, which provides tile images. The tile server URL must be in the format shown below.

https://< domain_name >/maps/basic/{z}/{x}/{y}.png

• ”${z}” - It represents zoom factor (level).
• ”${x}” - It indicates tile image x-position (tileX).
• ”${y}” - It indicates tile image y-position (tileY).

To know more about the online map providers rendering in the Maps component, please follow the below documentation link.
https://ej2.syncfusion.com/angular/documentation/maps/providers/other-maps

By specifying the appropriate tile server URL in the urlTemplate property, you can render a satellite map or a street view map in the Maps component.
> In the example below, we are using the below URL to render the satellite image, and we must provide the appropriate key to display the online map.
> https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/level/tileX/tileY?access_token=Your-Key

The below code example demonstrates how to display the satellite imagery from online map providers in Angular Maps:

app.component.html

<div class="control-section">
  <div align="center">
    <ejs-maps id="container" style="display:block;" [layers]="layers" [zoomSettings]="zoomSettings"> 
    </ejs-maps>
  </div>
</div>

app.component.ts

import { Component, ViewEncapsulation } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  public zoomSettings: object = {
    enable: true,
  };
  public layers: object[] = [
    {
      urlTemplate:
        'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/level/tileX/tileY?access_token=Your-Key',
    },
  ];
  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 the satellite imagery from online map providers in Angular Maps component.

You can refer to our Angular Maps feature tour page 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 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!