Blazor Map - Overview

  • Overview.razor
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming
blazor ui ninja image

The Map component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.


The Telerik UI for Blazor Map component allows you to display geographical information organized in layers and can be integrated with open map providers in your apps. The Blazor Map includes tile, bubble, shape and marker layers, touch support, multiple customization options as well as support for the GeoJSON data format. It is compatible with a wide range of tile map providers, enabling you to easily integrate advanced location and mobility capabilities into your maps.

Layers represent the structure of the Blazor Map in the following way:

  • Tile: The Tile layer is normally the foundation of the map and will visualize the geography by binding to Open Street Maps or Azure Maps.
  • Marker: The Marker layer is where you indicated geographic points with a marker. The Blazor Maps component provides two types of markers: Pin and Pin Target. You can also connect a tooltip to each marker.
  • Shape: The Shape layer renders geospatial objects using GeoJSON data. It normally presents as an illustration of a location (e.g., a drawing of Australia).
  • Bubble: The Bubble layer gives you an advanced way to visualize data on a map. A circle is placed over a location and its size can indicate the associated value.


The Blazor Map example above uses a Tile layer bound to Open Street Maps and a Marker layer that indicates a few locations with Pin Target markers.

Other Blazor Map features include pan and zoom controls, appearance configuration settings and events used to customize behavior.

This Blazor Map Overview example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.