Easily Visualize Online Maps in Your .NET MAUI Apps
Tags: netmaui, mobile, ui, maps
Published: 2023-03-24 05:53:18

---
title: Easily Visualize Online Maps in Your .NET MAUI Apps
published: true
date: 2023-03-23 11:15:00 UTC
tags: netmaui, mobile, ui, maps
canonical_url: https://www.syncfusion.com/blogs/post/easily-visualize-online-maps-in-your-net-maui-apps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xthtrbnahk1vs8hb9zzc.png
---
[Syncfusion .NET MAUI Maps](https://www.syncfusion.com/maui-controls/maui-maps "Syncfusion .NET MAUI Maps") is a powerful data visualization control that displays statistical information for a geographical area. Its rich feature set includes selection, tooltips, legends, markers, bubbles, color mapping, and more. The [shape layer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapShapeLayer.html "MapShapeLayer Class of the .NET MAUI Maps") renders geographical areas from GeoJSON data.

With tile-layer rendering support, we can load map tiles or images from web map tile services ([WMTS](https://en.wikipedia.org/wiki/Web_Map_Tile_Service "Wikipedia page for Web Map Tile Service")) such as OpenStreetMap, Bing Maps, Google Maps, and TomTom.

In this blog, we will see how to visualize online maps with the title layer and how to enable markers, zooming, and panning features.

## Tile layer in .NET MAUI Maps

The [tile layer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html "MapTileLayer Class of .NET MAUI Maps") in .NET MAUI Maps is a collection of small images (tiles) that are combined to display a map in a mobile or desktop app. Each tile represents a small part of the overall map, and by combining multiple tiles a complete map can be displayed.

Tile layers are typically used to display maps from online mapping services such as OpenStreetMap, Bing Maps, Google Maps, and TomTom. This approach reduces the amount of data that needs to be loaded and the processing power required to display the map.

You can use this tile layer to zoom in on a specific region by pinching and panning the map to see what’s nearby.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Tile-Layer-Support-in-Syncfusion-.NET-MAUI-Maps-Control.gif" alt="Tile Layer Support in Syncfusion .NET MAUI Maps Control" style="width:100%">

  <figcaption>Tile Layer Support in Syncfusion .NET MAUI Maps Control</figcaption>

</figure>

**Note:** For more details, refer to [how to configure and create an app with .NET MAUI Maps](https://help.syncfusion.com/maui/maps/getting-started#creating-an-application-using-the-net-maui-maps "Creating an application using the .NET MAUI Maps") control.

## Visualizing online map services in .NET MAUI Maps

Let’s see how to add and visualize various online map services using the Syncfusion .NET MAUI Maps control with the help of the tile layer!

### Adding an OpenStreetMap

One of the most popular web map tile services is [OpenStreetMap](https://www.openstreetmap.org/#map=4/19.30/82.45 "OpenStreetMap") (OSM). It is a free and open-source map of the world created and maintained by a community of volunteers. If you are looking for a cost-effective map tile provider, then OpenStreetMap will work.

The map data is available to anyone under the Open Database License and can be used for many purposes, from creating maps to using the data for scientific research. It uses a standard set of web mapping protocols to deliver map tiles, such as the Web Map Service ([WMS](https://en.wikipedia.org/wiki/Web_Map_Service "Wikipedia page for the Web Map Service")) and the Web Map Tile Service ([WMTS](https://en.wikipedia.org/wiki/Web_Map_Tile_Service "Wikipedia page for the Web Map Tile Service")).

**Disclaimer:** OpenStreetMap can be used for free. However, we recommend you check the licensing terms on its official website.

We need to add the OpenStreetMap to the [MapTileLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html?tabs=tabid-1 "MapTileLayer Class of .NET MAUI Maps") in the [Layer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.SfMaps.html?tabs=tabid-1#Syncfusion_Maui_Maps_SfMaps_Layer "Layer property of .NET MAUI Maps") property of [.NET MAUI Maps](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.SfMaps.html?tabs=tabid-1 "SfMaps Class ").

Refer to the following code example.

```xml
<maps:SfMaps>
   <maps:SfMaps.Layer>
      <maps:MapTileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" />
   </maps:SfMaps.Layer>
</maps:SfMaps>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Visualizing-OpenStreetMap-Using-.NET-MAUI-Maps.png" alt="Visualizing OpenStreetMap Using .NET MAUI Maps" style="width:100%">

  <figcaption>Visualizing OpenStreetMap Using .NET MAUI Maps</figcaption>

</figure>

#### How to set the URL template

The [UrlTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html#Syncfusion_Maui_Maps_MapTileLayer_UrlTemplate "UrlTemplate property of .NET MAUI Maps") property accepts the URL in WMTS format. This URL might vary slightly depending on providers. The formats can be:

- https://exampleprovider **/{z}/{x}/{y}.png**
- https://exampleprovider **/z={z}/x={x}/y={y}.png**
- https://exampleprovider **/z={z}/x={x}/y={y}.png?key=subscription\_key**

Here, {z} represents the zoom level, and {x} and {y} represent the tile’s x- and y-coordinates, respectively.

We will replace {z}, {x}, and {y} internally based on the zoom level and the tile position.

A subscription key may be needed for some of the providers, like Bing Maps and TomTom. Include it in the [UrlTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html#Syncfusion_Maui_Maps_MapTileLayer_UrlTemplate "UrlTemplate property of .NET MAUI Maps").

**Note:** The format may vary among map providers. You can check the exact URL format needed for the providers on their official websites.

### Adding Bing Maps

Another popular web map tile service is [Bing Maps](https://www.bing.com/maps "Bing Maps"). It is a paid mapping service provided by Microsoft that offers a wide range of features, including aerial and street maps, 3D maps, and the ability to create custom maps with your own data. It uses standard web mapping protocols to deliver map tiles, such as WMS and WMTS.

#### How to set the URL template

Adding Bing Maps to the [MapTileLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html "MapTileLayer class of .NET MAUI Maps") is the same as adding OpenStreetMap except for the way we set the [UrlTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html#Syncfusion_Maui_Maps_MapTileLayer_UrlTemplate "UrlTemplate property of .NET MAUI Maps") property.

For Bing Maps, an additional step is required. We have to add the [GetBingUrl](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html#Syncfusion_Maui_Maps_MapTileLayer_GetBingUrl_System_String_ "GetBingUrl method of .NET MAUI Maps") method that returns the URL in the required form. You can use the URL returned from this method and set it to the [UrlTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html#Syncfusion_Maui_Maps_MapTileLayer_UrlTemplate "UrlTemplate property of .NET MAUI Maps") property.

A subscription key is needed for Bing Maps. We should add it to the UrlTemplate property.

Bing Maps also supports map types such as Road, Aerial, and AerialWithLabelsOnDemand. These types should also be added in the UrlTemplate itself.

Other than these differences, everything is the same for all the tile providers. Refer to the following code example.

**XAML**

```xml
<maps:SfMaps>
  <maps:SfMaps.Layer>
    <maps:MapTileLayer x:Name="tileLayer" />
  </maps:SfMaps.Layer>
</maps:SfMaps>
```

**C#**

```csharp
public MainPage()
{
   InitializeComponent();
   this.GenerateBingUrl();
}
private async void GenerateBingUrl()
{
   tileLayer.UrlTemplate = await MapTileLayer.GetBingUrl("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/RoadOnDemand?output=json&uriScheme=https&include=ImageryProviders&key=your_subscription_key");
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Visualizing-Bing-Maps-Using-.NET-MAUI-Maps-Control.png" alt="Visualizing Bing Maps Using .NET MAUI Maps Control" style="width:100%">

  <figcaption>Visualizing Bing Maps Using .NET MAUI Maps Control</figcaption>

</figure>

### Other tile providers

In addition to OpenStreetMap and Bing Maps, it is possible to add other tile providers, such as [Google Maps](https://maps.google.com/ "Google Maps") and [TomTom](https://www.tomtom.com/en_us/drive/maps-services/maps/ "TomTom maps"), which follow the WMTS format. For example, tiles from TomTom can be added as shown in the following code.

**Note:** You must append the subscription key at the end of the URL.

```xml
<maps:SfMaps>
 <maps:SfMaps.Layer>
  <maps:MapTileLayer UrlTemplate="https://api.tomtom.com/map/1/tile/basic/main/{z}/{x}/{y}.png?key=your_subscription_key" />
 </maps:SfMaps.Layer>
</maps:SfMaps>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Visualizing-TomTom-Map-Using-.NET-MAUI-Maps-Control.png" alt="Visualizing TomTom Map Using .NET MAUI Maps Control" style="width:100%">

  <figcaption>Visualizing TomTom Map Using .NET MAUI Maps Control</figcaption>

</figure>

**Note:** For more details, refer to the [title layer in the .NET MAUI Maps](https://help.syncfusion.com/maui/maps/tile-layer#setting-url-template "Tile layer in .NET MAUI Maps documentation") documentation.

## Enabling other data visualization features in .NET MAUI Maps

Now let’s see how to enable markers, zooming, and panning features in the Syncfusion .NET MAUI Maps control to effectively visualize online maps services in it.

### Zooming and panning

You can enable zooming and panning on the map by using the [ZoomPanBehavior](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapLayer.html#Syncfusion_Maui_Maps_MapLayer_ZoomPanBehavior "ZoomPanBehavior property of .NET MAUI Maps") property of the [MapTileLayer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapTileLayer.html "MapTileLayer Class of .NET MAUI Maps"). You can zoom in on the tile layer for a closer look at a specific region by:

- Pinching on touch devices.
- Scrolling the mouse wheel or trackpad.

Refer to the following code.

```xml
<maps:SfMaps>
 <maps:SfMaps.Layer>
  <maps:MapTileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" CanCacheTiles="True">
   <maps:MapTileLayer.ZoomPanBehavior>
    <maps:MapZoomPanBehavior EnableDoubleTapZooming="True"/>
   </maps:MapTileLayer.ZoomPanBehavior>
  </maps:MapTileLayer>
 </maps:SfMaps.Layer>
</maps:SfMaps>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Zooming-and-Panning-on-OpenStreetMap-Using-.NET-MAUI-Maps.gif" alt="Zooming and Panning on OpenStreetMap Using .NET MAUI Maps" style="width:100%">

  <figcaption>Zooming and Panning on OpenStreetMap Using .NET MAUI Maps</figcaption>

</figure>

### Markers

You can show markers at any position in the tile layer. You can use the built-in shapes (circles, diamonds, squares, and triangles) or add any custom content like an image or pin as a marker using the [MarkerTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Maps.MapLayer.html#Syncfusion_Maui_Maps_MapLayer_MarkerTemplate "MarkerTemplate property of .NET MAUI Maps") support.

Refer to the following code example.

```xml
<maps:SfMaps>
 <maps:SfMaps.Layer>
  <maps:MapTileLayer UrlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png" >
   <maps:MapTileLayer.Markers>
    <maps:MapMarkerCollection>
     <maps:MapMarker Latitude="-14.235004" Longitude="-51.92528"
                     IconWidth="10" IconHeight="10" IconFill="White"
                     IconStroke="Black" IconStrokeThickness="2" IconType="Circle" />
     <maps:MapMarker Latitude="51.16569" Longitude="10.451526"
                     IconWidth="10" IconHeight="10" IconFill="White"
                     IconStroke="Black" IconStrokeThickness="2" IconType="Circle" />
     <maps:MapMarker Latitude="-25.274398" Longitude="133.775136"
                     IconWidth="10" IconHeight="10" IconFill="White"
                     IconStroke="Black" IconStrokeThickness="2" IconType="Circle" />
     <maps:MapMarker Latitude="20.593684" Longitude="78.96288"
                     IconWidth="10" IconHeight="10" IconFill="White"
                     IconStroke="Black" IconStrokeThickness="2" IconType="Circle" />
     <maps:MapMarker Latitude="61.52401" Longitude="105.318756"
                     IconWidth="10" IconHeight="10" IconFill="White"
                     IconStroke="Black" IconStrokeThickness="2" IconType="Circle" />
    </maps:MapMarkerCollection>
   </maps:MapTileLayer.Markers>
  </maps:MapTileLayer>
 </maps:SfMaps.Layer>
</maps:SfMaps>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Adding-Markers-to-OpenStreetMap-Using-.NET-MAUI-Maps-Control.png" alt="Adding Markers to OpenStreetMap Using .NET MAUI Maps Control" style="width:100%">

  <figcaption>Adding Markers to OpenStreetMap Using .NET MAUI Maps Control</figcaption>

</figure>

## GitHub reference

For more details, refer to the [visualizing online map services in the .NET MAUI Maps control](https://github.com/SyncfusionExamples/Easily-Visualize-OpenStreetMap-and-Bing-Maps-in-the-.NET-MAUI-Apps "Visualize OpenStreetMap and BingMaps in the .NET MAUI apps GitHub demo") GitHub demo.

## Conclusion

Thanks for reading! In this blog, we have seen how to visualize online map services using the tile layer support in the Syncfusion [.NET MAUI Maps](https://www.syncfusion.com/maui-controls/maui-maps "Syncfusion .NET MAUI Maps") control. Try out this feature and share your feedback in the comments below.

Explore the other features in the .NET MAUI Maps [user guide](https://help.syncfusion.com/maui/maps/getting-started "Getting started with MAUI Maps") and [GitHub demos](https://github.com/syncfusion/maui-demos/tree/master/MAUI/Maps/SampleBrowser.Maui.Maps/Samples/Maps "Syncfusion .NET MAUI Maps GitHub demo"). Additionally, you can check out our .NET MAUI demo apps on [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.sampleBrowser.maui&hl=en&gl=US "Syncfusion .NET MAUI controls on the Google Play Store") and [Microsoft Store](https://www.microsoft.com/store/productId/9P2P4D2BK270 "Syncfusion .NET MAUI controls Gallery on Microsoft Store").

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

## Related blogs

- [Replicating a Cruise Travel App UI in .NET MAUI](https://www.syncfusion.com/blogs/post/replicating-a-cruise-travel-app-ui-in-net-maui.aspx "Blog: Replicating a Cruise Travel App UI in .NET MAUI")
- [Building an Audio Recorder and Player App in .NET MAUI](https://www.syncfusion.com/blogs/post/building-an-audio-recorder-and-player-app-in-net-maui.aspx "Blog: Building an Audio Recorder and Player App in .NET MAUI")
- [Introducing the New .NET MAUI Pyramid Charts](https://www.syncfusion.com/blogs/post/dotnet-maui-pyramid-charts.aspx "Blog: Introducing the New .NET MAUI Pyramid Charts")
- [Introducing the New .NET MAUI Text Input Layout](https://www.syncfusion.com/blogs/post/dotnet-maui-text-input-layout.aspx "Blog: Introducing the New .NET MAUI Text Input Layout")
- [Create Project Planning and Resource Management Calendar in .NET MAUI](https://www.syncfusion.com/blogs/post/create-project-planning-and-resource-management-calendar-in-net-maui.aspx "Blog: Create Project Planning and Resource Management Calendar in .NET MAUI")