UI for Blazor
Blazor Map
- The Telerik UI for Blazor Map helps you create robust and interactive maps with ease.
- Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
- Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
-
Visualize Maps in Your Blazor Apps
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, 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, touch support, multiple customization options and more!
See demo of the Telerik Blazor Map component.
-
Map Configuration Options
The Map component for Blazor includes multiple configuration options related to the map itself, the map controls (zoom, attribution, navigator) and its tiles (type, size, min & max zoom, multiple style fill properties, marker shape and more).
-
Map Layers
Depending on the different map providers and use case, you can take advantage of the following map layers:
- Tile – Renders elements and can be bound to OpenStreetMap & Azure map providers
- Bubble – A vector layer that displays bubbles over another layer to mark regions
- Shape – Binding to GeoJSON data
- Marker – Used for displaying markers on the map and a tooltip when the marker is hovered
-
Marker Layer Template
Effortlessly define a custom HTML markup to style the markers of the Telerik UI for Blazor Map Marker layer. The component supports MapLayerMarkerSettings, which exposes a Template, enabling the customization of the markers’ appearance and content.
-
Map Events and Methods
The Map exposes a Refresh method and several events that let you define logic when a marker, shape or the map itself is clicked upon, navigated or zoomed in: OnMarkerClick, OnShapeClick, OnClick, OnPanEnd and OnZoomEnd.
-
Theming
The Telerik UI for Blazor Map component has several built-in themes, such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling for smooth integration) and Fluent (based on Microsoft Fluent UI). You can easily customize any of the out-of-the-box themes with a few lines of CSS, or create a new theme to match your colors and branding by using the Telerik Sass ThemeBuilder application.
-
Also Available...
The Map component is also available for the following popular Web frameworks:
-
Right-to-Left (RTL) Support
The Telerik UI for Blazor Map component supports right-to-left configuration. The RTL functionality is supported by most of our components to accommodate users who communicate in a right-to-left language script, such as Arabic and Hebrew.
Learn more in our Blazor Right-to-Left Support documentation
