How to Add Azure Maps Component in a React application?

1 min read

The React Maps component supports various online map providers, including OpenStreetMap, Azure Maps, and others. This section will demonstrate how to display Azure Maps using the Maps component.

Online maps are rendered using their tile server URL, which provides the tile images. The 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 learn more about rendering online map providers in the Maps component, please refer to the documentation link below.
https://ej2.syncfusion.com/react/documentation/maps/providers/other-maps

By specifying the appropriate tile server URL in the urlTemplate property, you can render an Azure map in the Maps component.

In the example below, we use the provided URL to render the Azure map. Ensure that you include the appropriate key to display the online map.
https://atlas.microsoft.com/map/tile?subscription-key=Your_Key&api-version=2024-04-01&tilesetId=microsoft.base.road&zoom=level&x=tileX&y=tileY

The code example below demonstrates how to display an Azure map from online map providers in React Maps:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Add DataSource</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #container {
            height : 500px;
            display: block;
        }
    </style>
</head>

<body style="margin-top: 100px;">
        <div id='container'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

index.js

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  MapsComponent,
  LayersDirective,
  LayerDirective,
} from '@syncfusion/ej2-react-maps';

export function App() {
  return (
    <MapsComponent>
      <LayersDirective>
        <LayerDirective urlTemplate="https://atlas.microsoft.com/map/tile?subscription-key=Your_Key&api-version=2024-04-01&tilesetId=microsoft.base.road&zoom=level&x=tileX&y=tileY"></LayerDirective>
      </LayersDirective>
    </MapsComponent>
  );
}

const root = createRoot(document.getElementById('container'));
root.render(<App />);

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

View Sample in Stackblitz

NOTE : To run the sample above, you need to add your key to the tile server URL in the urlTemplate property.

Conclusion

I hope you enjoyed learning how to add Azure Maps component in a React application.

You can refer to our React 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 React 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, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to Add Azure Maps Component in a React application?

Access denied