Blazor Maps Control: The Perfect Tool to Visualize Maps
Tags: blazor, webdev, cshap, dotnet
Published: 2022-04-20 12:22:10

---
title: Blazor Maps Control: The Perfect Tool to Visualize Maps
published: true
date: 2022-04-20 11:51:44 UTC
tags: blazor, webdev, cshap, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/blazor-maps-control-the-perfect-tool-to-visualize-maps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0rw095meh0ks2kdqkhy.png
---

The primary goal of maps is to provide a visual representation of the world or parts of it. Political maps show us the shapes of countries, the locations of states and cities, and the distance between them. You can plot and view important data such as population density, weather forecasts, geographical features, flight routes, and street views on them. Maps have become an indispensable tool for displaying information that we encounter daily.

The Syncfusion [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map "Blazor Maps") control completely serves these purposes. Its rich feature set includes layers and sublayers, navigation lines, annotations, animations, and more. Users can view not only a geographical map, but also custom shapes such as a floorplan of a room or building, or a venue’s seating chart.

**Note:** The Syncfusion Blazor Maps control is implemented to read the input shapefile or URL and draw the right shape. Syncfusion does not support shape designing. For this purpose, we recommend using online map providers.

Let’s explore the features of the Blazor Maps control to visualize the world elegantly!

## Input data sources

In our Blazor Maps control, there are two types of input data sources:

- Shapes.
- Online web map services.

### Shapes

Shapes can represent the world map, a specific country or region, or a custom shape such as a building. The shapes are prepared in a [GeoJSON-like format](https://cdn.syncfusion.com/maps/map-data/world-map.json "GeoJSON Source File for World Map") and saved with the \*.json file extension. You can upload the shapefiles to online storage, whose link can be set as the data source or as a local file in the application itself.

**Note:** Currently, we support only polygon and multipolygon geometric types for shapes. We also have plans to add support for linestring and point in the near future.

### Online web services

The Syncfusion Blazor Maps control supports inheriting the following online web map services through their APIs:

- [OpenStreetMap (OSM)](https://www.openstreetmap.org/ "Open Street Map")
- [Bing Maps](https://www.microsoft.com/en-us/maps "Bing Maps")
- [Mapbox](https://www.mapbox.com/maps "Mapbox")
- [Esri](https://www.esri.com/en-us/home "Esri")
- [TomTom](https://www.tomtom.com/en_us/drive/maps-services/maps/ "TomTom")

Furthermore, we have implemented a URL template so that any online map service provider using the following template can be previewed and interacted with in our Maps control.

**Sample template:** https://<domain\_name>/maps/basic/{z}/{x}/{y}.png

- ${x} indicates the tile image x-position.
- ${y} indicates the tile image y-position.
- ${z} represents the zoom factor (level).

**Note:** For more details, refer to the [Easily Visualize Online Maps in a Blazor Application blog](https://dev.to/syncfusion/easily-visualize-online-maps-in-a-blazor-application-426n "Easily Visualize Online Maps in a Blazor Application blog").

## Layers and multiple layers

We can provide any of the previously listed input data sources to serve as the main layer in the Maps control. On top of the main layer, we can add any number of additional layers. This will result in a multilayer pattern.

A sublayer is a type of shapefile layer, i.e., GeoJSON-like format. It allows the loading of multiple shapefiles in a single map view. You can add a sublayer over the main layer to view a country’s cities, boundaries, roads, mountains, rivers, and coastlines. Add other map elements, such as markers, bubbles, color mapping, and legends, to the sublayer for better visualization.

![Location of African Continent on the World Map](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Location-of-African-Continent-on-the-World-Map.png)
<figcaption>Location of African Continent on the World Map</figcaption>

**Note:** Refer to the [Multi-layers in Blazor Maps](https://blazor.syncfusion.com/demos/maps/multi-layers "Example of Multi-Layers in Blazor Maps Component") and [documentation](https://blazor.syncfusion.com/documentation/maps/layers "Layers in Blazor Maps Component").

## Data labels

Data labels provide users with information such as identification, notification, warning, environmental advice, or any other general information. In short, they are simple text displayed over the shapes. Data labels will smartly arrange themselves not to overlap using the smart labels option.

![Showing Data Labels in Blazor Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Showing-Data-Labels-in-Blazor-Maps.png)
<figcaption>Showing Data Labels in Blazor Maps</figcaption>

**Note:** Refer to the [Example of Data Labels in Blazor Maps](https://blazor.syncfusion.com/demos/maps/data-labels "Example of Data Labels in Blazor Maps Component") and [documentation](https://blazor.syncfusion.com/documentation/maps/data-labels "Data labels in Blazor Maps Component").

## Markers

A marker is a visual representation that pinpoints a specific coordinate (location) on a map. A marker, by default, uses a standard shape such as a circle, rectangle, line, or balloon.

For a better user experience, we can customize markers to display images rather than predefined shapes.

![The World Clock](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/The-World-Clock.png)
<figcaption>The World Clock</figcaption>

### Marker clustering

When there are a lot of markers that overlap, we can group the markers, a technique known as marker clustering. The number above the cluster indicates the count of overlapped markers in it. If we zoom in on any of the cluster locations, the number on the cluster will decrease, and the individual markers will be seen on the map.

**Note:** Refer to the [Example of Markers in Blazor Maps](https://blazor.syncfusion.com/demos/maps/marker-cluster "Example of Marker Cluster in Blazor Maps Component") and [documentation](https://blazor.syncfusion.com/documentation/maps/markers "Markers in Blazor Maps Component").

## Bubbles

Bubbles are yet another visualization medium that summarizes your input data. The feature creates simple circles of varying sizes. They represent the appropriate numerical value from the input data within the map area. Use these bubbles to compare proportions across different locations on the map. The bigger the bubble, the larger the numeric value.

![TikTok Social Media Users Statistics](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/TikTok-Social-Media-Users-Statistics.png)
<figcaption>TikTok Social Media Users Statistics</figcaption>

**Note:** Refer to the [Example of Bubbles in Blazor Maps](https://blazor.syncfusion.com/demos/maps/bubble "Example of Bubbles in Blazor Maps Component") and [documentation](https://blazor.syncfusion.com/documentation/maps/bubble "Bubble in Blazor Maps Component").

## Navigation lines

Navigation lines are used to show paths between two or more locations, e.g., flight or sea routes, a route from the current location to a destination, and cycling routes.

![Flight Route Between Los Angeles and Mexico City](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Flight-Route-Between-Los-Angeles-and-Mexico-City.png)
<figcaption>Flight Route Between Los Angeles and Mexico City</figcaption>

**Note:** Refer to the [Example of Navigation Lines in Blazor Maps](https://blazor.syncfusion.com/demos/maps/navigation-lines "Example of Navigation Lines in Blazor Maps Component") and [documentation](https://blazor.syncfusion.com/documentation/maps/navigation-line "Navigation Lines in Blazor Maps Component").

## Annotations

Annotations are similar to data labels, but they are used to draw more attention to specific characteristics in certain locations on a map. They provide highlighting information about them. In a nutshell, they are specific overlays of information that inform the user without overcrowding the map with other information. Including annotations in maps is becoming increasingly popular.

In the Maps control, you can display annotations with text, images, or a combination of both formats. You can add any number of annotations to the map using x and y coordinates.

![Australian Cities Weather Report](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Australian-Cities-Weather-Report.png)
<figcaption>Australian Cities Weather Report</figcaption>

**Note:** Refer to the [Example of Annotations in Blazor Maps](https://blazor.syncfusion.com/demos/maps/annotation "Example of Annotations in Blazor Maps Component") and [documentation](https://blazor.syncfusion.com/documentation/maps/annotations "Annotations in Blazor Maps component").

## Color mapping

Color mapping is a technique of assigning different colors to different regions on a map. The assigned color palette is unique so that no two adjacent regions have the same color. On the other hand, we can set a single color to different regions or locations based on the numeric data value behind them and by adjusting the color’s opacity.

So, the color mapping in Blazor Maps is classified into range color mapping, equal color mapping, and desaturation color mapping. This feature is available not only for shapes but also for bubbles.

![World Population Density -Range Color Mapping](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/World-Population-Density-Range-Color-Mapping.png)
<figcaption>World Population Density- Range Color Mapping</figcaption>

![Spring Precipitation Averages of the World—Equal Color Mapping](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Spring-Precipitation-Averages-of-the-World%E2%80%94Equal-Color-Mapping.png)
<figcaption>Spring Precipitation Averages of the World- Equal Color Mapping</figcaption>

![Spring Precipitation Averages of the World—Desaturation Color Mapping](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Spring-Precipitation-Averages-of-the-World%E2%80%94Desaturation-Color-Mapping.png)
<figcaption>Spring Precipitation Averages of the World- Desaturation Color Mapping</figcaption>

**Note:** Refer to the [Example of Color Mapping in Blazor Maps](https://blazor.syncfusion.com/demos/maps/color-mapping "Example of Color Mapping in Blazor Maps") and [documentation](https://blazor.syncfusion.com/documentation/maps/color-mapping "Color Mapping in Blazor Maps Component").

## Selection and highlighting

Users can hover over any shape and that shape will change to a distinct color to distinguish it from the other shapes. Similarly, we can select a specific shape via mouse click or touch interaction and it can also be highlighted using a different color.

The selection and highlight options also apply to markers and bubbles.

Refer to the following image. Here, Greenland is selected and highlighted and the mouse hovers over Canada (showing a tooltip).  
 ![Selection and Highlighting Features in Blazor Maps](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Selection-and-Highlighting-Features-in-Blazor-Maps.png) **Note:** Refer to the [Example of Selection and Highlight in the Blazor Maps ](https://blazor.syncfusion.com/demos/maps/selection-highlight "Example of Selection & Highlight in Blazor Maps Component")and [documentation](https://blazor.syncfusion.com/documentation/maps/user-interactions#selection "Selection and Highlight in Blazor Maps").

## Zooming and panning

Zooming allows you to see the map in full depth, while panning allows you to move the zoomed map to view the entire map area.

To return the map to its original position, use the zoom-out and reset options. Zooming features include a zooming toolbar, single-click zoom, double-click zoom, mouse wheel zoom, selection zoom, and pinch zoom.

![South America](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/South-America.png)
<figcaption>South America</figcaption>

![South America—Zoomed](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/South-America%E2%80%94Zoomed.png)
<figcaption>South America- Zoomed</figcaption>

**Note:** Refer to the [Example of Zooming and Panning in Blazor Maps](https://blazor.syncfusion.com/demos/maps/zooming-panning "Example of Zooming and Panning in Blazor Maps")and [documentation](https://blazor.syncfusion.com/documentation/maps/user-interactions "User Interactions in Blazor Maps Component").

## Legends

In a map, there may be a large number of different symbols, and it is difficult for users to understand each one; this is where legends come in handy.

A legend is a glossary of the symbols used in a map. There are two types of legends supported in the Maps control: [default](https://blazor.syncfusion.com/documentation/maps/legend#default-mode "Default Mode in Legend in Blazor Maps") and [interactive](https://blazor.syncfusion.com/documentation/maps/legend#interactive-mode "Interactive Mode in Legend in Blazor Maps"). Marker and bubble definitions can also be displayed in legends.

![Legend Showing Average Internet Price in Africa](https://www.syncfusion.com/blogs/wp-content/uploads/2022/04/Legend-Showing-Average-Internet-Price-in-Africa.png)
<figcaption>Legend Showing Average Internet Price in Africa</figcaption>

**Note:** Refer to the [Example of a Legend in Blazor Maps](https://blazor.syncfusion.com/demos/maps/legend "Example of Legends in Blazor Maps") and [documentation](https://blazor.syncfusion.com/documentation/maps/legend "Legend in Blazor Maps Component").

## Drill down

You can view inner map layers by clicking a shape in the outer layer using the drill-down feature. For example, in a world map, you can see information about a specific country by clicking on that country. Then, the Blazor Maps control will display just that country by loading its shape via the drill-down feature.

**Note:** Refer to the [Example of Drill Down in Blazor Maps](https://blazor.syncfusion.com/demos/maps/drill-down "Example of Drill Down in Blazor Maps Component") and [documentation](https://blazor.syncfusion.com/documentation/maps/layers#displaying-different-layer-in-the-view "Displaying different layer in the Blazor Maps view").

## GitHub reference

Check out the [Blazor Maps component demos in our GitHub repository](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps "Getting Started with Blazor Maps Demo on GitHub").

## Conclusion

Thanks for reading! The Syncfusion [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map "Blazor Maps") component also provides tooltips, printing, exporting, appearance customization, and more. Try out these features and elegantly visualize the world using our Blazor Maps control!

For existing customers, the newest version of our Blazor components is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "License and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out the available features.

You can contact us with questions or comments 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/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Easily Visualize Online Maps in a Blazor Application](https://dev.to/syncfusion/easily-visualize-online-maps-in-a-blazor-application-426n "Easily Visualize Online Maps in a Blazor Application blog")
- [Build World-Class Blazor WebAssembly Apps with Globalization and Localization](https://www.syncfusion.com/blogs/post/build-world-class-blazor-webassembly-apps-with-globalization-and-localization.aspx "Build World-Class Blazor WebAssembly Apps with Globalization and Localization blog")
- [Elegantly Visualize Data with the World’s Fastest Blazor Charts](https://www.syncfusion.com/blogs/post/easily-visualize-online-maps-in-a-blazor-application.aspx "Elegantly Visualize Data with the World’s Fastest Blazor Charts blog")
- [How to Create Interactive Diagrams Using Syncfusion’s Blazor Diagram Library](https://www.syncfusion.com/blogs/post/create-interactive-diagrams-blazor-diagram-library.aspx "How to Create Interactive Diagrams Using Syncfusion’s Blazor Diagram Library blog")