Azure Maps as a Source to Syncfusion Maps
Tags: azure, csharp, dotnet, webdev
Published: 2022-12-23 06:27:22

---
title: Azure Maps as a Source to Syncfusion Maps
published: true
date: 2022-12-22 11:46:34 UTC
tags: azure, csharp, dotnet, webdev
canonical_url: https://www.syncfusion.com/blogs/post/azure-maps-as-a-source-to-syncfusion-maps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgiwczd7g4evfsc4y28n.png
---
[Azure Maps](https://learn.microsoft.com/en-us/azure/azure-maps/about-azure-maps "Azure Maps Documentation") is a map provider powered by Microsoft, offering geospatial capabilities to developers who require them. When the Syncfusion Maps component connects to the Azure Maps tile URL, the Maps component loads a collection of tile images, arranges them, and displays them as satellite, road view, geographical, and other types of maps. Azure Maps is operational for web and mobile applications.

The Syncfusion Maps component is available for:

- [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-maps "Syncfusion Javascript Maps Library")
- [Angular](https://www.syncfusion.com/angular-components/angular-maps "Syncfusion Angular Maps Library")
- [React](https://www.syncfusion.com/react-components/react-maps "Syncfusion React Maps Library")
- [Vue](https://www.syncfusion.com/vue-components/vue-maps "Syncfusion Vue Maps Library")
- [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/maps "Syncfusion ASP.NET MVC Maps Library")
- [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/maps "Syncfusion ASP.NET Core Maps Library")
- [Blazor](https://www.syncfusion.com/blazor-components/blazor-map "Syncfusion Blazor Maps")

This blog explains the features that can be achieved when using Azure Maps as the source for Syncfusion Maps.

## Loading Azure Maps

To get started with the Syncfusion Maps control, refer to the [getting started documentation](https://ej2.syncfusion.com/documentation/maps/getting-started/ "Getting Started with JavaScript Maps Library").

We can render Azure Maps by assigning the [**UrlTemplate**](https://ej2.syncfusion.com/documentation/api/maps/layerSettingsModel/#urltemplate "UrlTemplate property of JavaScript Maps") property with the appropriate tile URL provided by the Azure Maps provider. The **UrlTemplate** API is available on all platforms previously listed to connect to Azure Maps. In the meantime, we need a subscription key to view and interact with Azure Maps.

For example, an Azure Maps tile URL will look like the following.

```
https://atlas.microsoft.com/map/imagery/png?subscription-key=Your-Key &api-version=1.0&style=satellite&zoom=level&x=tileX&y=tileY
```

## Layers

We can render the Azure Maps as the main layer in the Syncfusion Maps component via tile URL. On top of the main layer, **n** number of additional layers can be added, resulting in a multilayer pattern. Sublayers added on top of the main layer should be shape files, i.e., in GeoJSON-like format.

For example, we can add a sublayer over the main layer to view a country’s cities, boundaries, roads, mountains, rivers, and coastlines. Additionally, we can add map elements, such as markers, bubbles, and color mapping, only to a sublayer.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/African-continent-highlighted-using-layers-2.png" alt="African continent highlighted using layers" style="width:100%">

  <figcaption>African continent highlighted using layers</figcaption>

</figure>
## Markers

The marker is a visual representation that helps pinpoint a specific coordinate (location). A marker uses a standard shape such as a circle, rectangle, line, or balloon. For a better user experience, the marker can also display as a custom image rather than predefined shapes.

When many markers overlap, the markers are grouped in a technique known as marker clustering. The number above the cluster indicates how many overlapped markers it contains. If we perform zoom-in action on any cluster location, the number on the cluster will decrease, and the individual markers will spread out on the map. With zoom out, the markers cluster again.

## Navigation lines

Navigation lines show the path between two or more points, such as flight or sea routes, and routes from the current location to the destination location.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Navigation-lines-in-web-maps-3.png" alt="Navigation lines in web maps" style="width:100%">

  <figcaption>Navigation lines in web maps</figcaption>

</figure>
## Annotations

Annotations help us to draw more attention to specific characteristics of certain locations on the map and provide highlighting information about them. In a nutshell, annotations are specific overlays of information that inform the user without overcrowding the map. Including annotations in maps is becoming increasingly popular.

We can represent annotations in text or image formats, or a combination of both. Also, we can add any annotations to the map using x- and y-coordinates.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Annotations-in-web-maps-1.png" alt="Annotations in web maps" style="width:100%">

  <figcaption>Annotations in web maps</figcaption>

</figure>
## Zooming and Panning

Zooming allows you to see the map entirely and inspect specific regions. Panning enables you to move on the zoomed map to view different areas. Use the zoom-out and reset options to return the map to its original position. Zooming options include a zooming toolbar, single-click zoom, double-click zoom, mouse wheel zoom, selection zoom, and pinch zoom.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/South-America-map-zoomed-out-1.png" alt="South America map zoomed out" style="width:100%">

  <figcaption>South America map zoomed out</figcaption>

</figure>
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/South-America-map-zoomed-in-1.png" alt="South America map zoomed in" style="width:100%">

  <figcaption>South America map zoomed in</figcaption>

</figure>
## Legend

The legend is a visual collection of the map symbols followed by short text descriptions of what each symbol represents. There may be many symbols on a map, and it may be difficult for the end user to understand each one without a legend.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Legend-1.png" alt="Legend in web maps" style="width:100%">

  <figcaption>Legend in web maps</figcaption>

</figure>
## Tooltip

The tooltip allows you to display text information for markers when they are hovered over or touched.

## References

Refer to the following user guide documentation links to render and work with Azure Maps:

- [TypeScript](https://ej2.syncfusion.com/documentation/maps/providers/azure-maps/ "Azure Maps in JavaScript Maps control documentation")
- [JavaScript](https://ej2.syncfusion.com/javascript/documentation/maps/providers/azure-maps/ "Azure Maps in JavaScript (ES5) Maps control documentation")
- [Angular](https://ej2.syncfusion.com/angular/documentation/maps/providers/azure-maps/ "Azure Maps in Angular Maps component documentation")
- [React](https://ej2.syncfusion.com/react/documentation/maps/providers/azure-maps/ "Azure Maps in React Maps component documentation")
- [Vue](https://ej2.syncfusion.com/vue/documentation/maps/providers/azure-maps/ "Azure Maps in Vue Maps component documentation")
- [ASP .NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/maps/providers/azure-maps "Azure Maps in ASP.NET Core Maps component documentation")
- [ASP .NET MVC](https://ej2.syncfusion.com/aspnetmvc/documentation/maps/providers/azure-maps "Azure Maps in ASP.NET MVC Maps component documentation")
- [Blazor](https://blazor.syncfusion.com/documentation/maps/providers/azure-maps "Azure Maps in Blazor Maps component documentation")

## Conclusion

Thanks for reading! This blog explores how to integrate Azure Maps support into Syncfusion Maps. Try out these features and elegantly visualize the world with Syncfusion Maps controls. You can leave your opinions in the comments section below.

If you have questions, contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Effectively Visualize a Large Number of Markers Using JavaScript Maps](https://www.syncfusion.com/blogs/post/visualize-a-large-number-of-markers-using-javascript-maps.aspx "Blog: Effectively Visualize a Large Number of Markers Using JavaScript Maps")
- [Blazor Maps Control: The Perfect Tool to Visualize Maps](https://www.syncfusion.com/blogs/post/blazor-maps-control-the-perfect-tool-to-visualize-maps.aspx "Blog: Blazor Maps Control: The Perfect Tool to Visualize Maps")
- [JavaScript Objects vs. Maps](https://www.syncfusion.com/blogs/post/javascript-map-vs-object.aspx "Blog: JavaScript Objects vs. Maps")