Syncfusion.Blazor.Maps 34.2.7

Syncfusion® Blazor Maps

Interactive map visualization component for Blazor applications. Render maps from GeoJSON data or map providers like OpenStreetMap, Google Maps, and Bing Maps with rich features.

Using this package with an AI coding agent

Before generating Syncfusion® code, ask your AI coding agent to run the Syncfusion® setup using the following prompt:

Set up this project for Syncfusion® before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.

The setup detects your project's platform and loads the appropriate Syncfusion® skill pack. No Syncfusion® account or MCP key is required to install or read Syncfusion® agent skills.

Platform reference: https://ai.syncfusion.com/blazor/llms.txt

Key Features

• Multiple Map Providers: Support for OpenStreetMap, Google Maps, Bing Maps, and custom GeoJSON data
• Interactive Markers: Add, customize, and interact with markers on the map
• Bubble and Label Layers: Visualize data with bubbles and text labels
• Navigation Lines: Draw routes and paths between locations
• Legends and Tooltips: Display information and legends for map data
• Zooming and Panning: Intuitive navigation with mouse wheel and touch gestures
• Drill Down: Interactive drill-down capabilities for regional data visualization
• Layer Management: Multiple layers with easy toggle and customization
• Export: Export maps as images (PNG, SVG, PDF)

System Requirements

• .NET 8.0 or later (Blazor Server, Blazor Web App, Blazor WebAssembly, Blazor Hybrid)
• See full requirements: System Requirements

Installation

Install the Maps package and the themes package, which provides the stylesheets referenced below:

dotnet add package Syncfusion.Blazor.Maps
dotnet add package Syncfusion.Blazor.Themes

Add Stylesheet and Script References

For Blazor Web App / Blazor Server, add these to Components/App.razor or App.razor. For Blazor WebAssembly, add these to wwwroot/index.html:

<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick Start

1. Register the Syncfusion® Blazor service in Program.cs:

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the Maps component to your Razor page:

@using Syncfusion.Blazor.Maps

<SfMaps>
    <MapsLayers>
        <MapsLayer UrlTemplate="https://tile.openstreetmap.org/level/tileX/tileY.png">
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Height="25" Width="15" DataSource="@MarkerData">
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    public class MarkerData
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }

    public List<MarkerData> MarkerData { get; set; } = new List<MarkerData>
    {
        new MarkerData { Latitude = 37.6872, Longitude = -122.3021 },
        new MarkerData { Latitude = 37.7749, Longitude = -122.4194 },
        new MarkerData { Latitude = 34.0522, Longitude = -118.2437 }
    };
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with WebAssembly
• API Reference
• Live Demos
• Feature Overview

Support

• Submit a support ticket
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET