The premier mapping solution for Asp.NET Core Blazor applications.
GeoBlazor brings the power of the ArcGIS Maps SDK for JavaScript into your Blazor applications with 100% C# code - no JavaScript required. Create beautiful, interactive maps with industry-leading geospatial capabilities while maintaining a pure .NET development experience.
CORE
PRO
- Pure C# Development: Access the complete ArcGIS Maps SDK without writing a single line of JavaScript
- Rich Component Library: Includes maps, layers, widgets, geometries, and more
- Interactive Maps: Build responsive, interactive maps with minimal code
- Flexible Architecture: Works with Blazor Server, WebAssembly, and Hybrid MAUI apps
- Enterprise-Ready: Supports ArcGIS Enterprise for organizations with internal GIS infrastructure
- Home Page
- Live Demo Site
- Documentation
- GitHub Repository
- Join our Discord Server
- Repository Contributions
dotnet add package dymaptic.GeoBlazor.CoreOr for the Pro version with additional features:
dotnet add package dymaptic.GeoBlazor.ProNote: .NET 9 can cause very slow build times due to its new static asset compression. If you need faster builds, we recommend staying on .NET 8 for now, and using a global.json file to pin your SDK build version to .NET 8. See our open request for a fix here.
(from https://docs.geoblazor.com/pages/gettingStarted.html)
-
Create a new Blazor Web App (.NET 8), Blazor Server, Blazor Wasm, or Blazor Hybrid (MAUI) project.
-
Add a
PackageReferenceto the latest version of thedymaptic.GeoBlazor.Corepackage via your IDE's Nuget Package Manager ordotnet add package dymaptic.GeoBlazor.Core. -
Get an API Key from the ArcGIS Portal. For Blazor Server, place it in your appsettings.json:
{ "ArcGISApiKey": "YourArcGISApiKey" } -
Register at licensing.dymaptic.com for a free GeoBlazor Core Registration key. Add the key to
appsettings.json:
{
"ArcGISApiKey": "YourArcGISApiKey",
"GeoBlazor": {
"RegistrationKey": "YourGeoBlazorRegistrationKey"
}
}-
In the root file that defines your html (
_Layout.cshtml,index.html, orApp.razor), add the following to the<head>section:<link href="_content/dymaptic.GeoBlazor.Core"/> <link href="_content/dymaptic.GeoBlazor.Core/assets/esri/themes/light/main.css" rel="stylesheet" /> <link href="YourProject.styles.css" rel="stylesheet" />
-
In
_Imports.razor, add the GeoBlazor namespaces:@using dymaptic.GeoBlazor.Core @using dymaptic.GeoBlazor.Core.Attributes @using dymaptic.GeoBlazor.Core.Components @using dymaptic.GeoBlazor.Core.Components.Geometries @using dymaptic.GeoBlazor.Core.Components.Layers @using dymaptic.GeoBlazor.Core.Components.Popups @using dymaptic.GeoBlazor.Core.Components.Renderers @using dymaptic.GeoBlazor.Core.Components.Symbols @using dymaptic.GeoBlazor.Core.Components.Views @using dymaptic.GeoBlazor.Core.Components.Widgets @using dymaptic.GeoBlazor.Core.Enums @using dymaptic.GeoBlazor.Core.Events @using dymaptic.GeoBlazor.Core.Exceptions @using dymaptic.GeoBlazor.Core.Extensions @using dymaptic.GeoBlazor.Core.Functions @using dymaptic.GeoBlazor.Core.Interfaces @using dymaptic.GeoBlazor.Core.Model @using dymaptic.GeoBlazor.Core.Options @using dymaptic.GeoBlazor.Core.Results
-
In
Program.cs, register the GeoBlazor services:builder.Services.AddGeoBlazor(builder.Configuration);
-
Create a Razor Component page with a map:
@page "/" <MapView Longitude="-118.805" Latitude="34.027" Zoom="11" Style="height: 400px; width: 100%;"> <WebMap> <PortalItem Id="4a6cb60ebbe3483a805999d481c2daa5" /> </WebMap> <ScaleBarWidget Position="OverlayPosition.BottomLeft" /> </MapView>
-
Run your application and see your map!
For complete documentation, please visit https://docs.geoblazor.com
GeoBlazor comes in two editions:
- GeoBlazor Core - Free, open-source edition with essential mapping capabilities
- GeoBlazor Pro - Commercial edition with advanced features, 3D support, and priority support
Check out our features comparison to see which edition is right for you.
GeoBlazor Core is licensed under the MIT License.
GeoBlazor Pro is licensed under a Commercial License with a yearly subscription fee.