GeoBlazor Pro

GeoBlazor Pro is a commercial extension to the free GeoBlazor Core library that includes many exclusive features around editing and manipulating GIS data. This package requires agreeing to our license to use. By using GeoBlazor Pro, you agree to share your email address with dymaptic, so that we might contact you about important updates to the software. You receive a 1-year subscription to generate license keys for new versions of the GeoBlazor Pro, after which time your current license keys will continue to work for that major release, and you may renew to generate keys for new releases.

How the License Works

GeoBlazor Pro will internally validate your License Key at runtime. It requires no internet connection and does not send any information back to the licensing server.

Getting Started

Below instructions are for creating a Blazor application from scratch and adding GeoBlazor Pro. Adding GeoBlazor Pro to an existing application would be the same, beginning with step 2.

Alternatively, you can use the new GeoBlazor Templates to create a new Blazor application with GeoBlazor already installed.

Create a new Blazor Web App (.NET 8), Blazor Server, Blazor Wasm, or Blazor Hybrid (MAUI) project, using the templates provided in your IDE or the dotnet CLI. If creating a Blazor Web App, be sure to also select an Interactive Render Mode, either Server, WebAssembly, or Auto.
Add a PackageReference to the latest version of the dymaptic.GeoBlazor.Pro package via your IDE’s Nuget Package Manager or dotnet add package dymaptic.GeoBlazor.Pro. For Blazor Web Apps supporting WebAssembly, add this reference to the .Client WebAssembly project, or a Razor Class Library where you intend to write your mapping Razor components.
The ArcGIS API requires some form of authentication. The simplest is to use an API Key. Generate a key from the ArcGIS Developer Dashboard. For Blazor Server, place it in your appsettings.json, like this:
```
{
  "Logging": ...,
  "AllowedHosts": ...,
  "ArcGISApiKey": "yourKeyValue"
}
```
Note: If you are using Blazor WASM, there are several issues with this approach. First, appsettings.json is not added by default to all templates. If you want to add it yourself, you need to add it inside the wwwroot folder. For Blazor Web Apps with WebAssembly, you must define the API key in _both_ projects. Be Aware that the API key will be exposed in the browser (just like it would with Javascript). Even when using Blazor Server, the API key may be present in HTTP requests visible to the user in the browsers dev tools, so you should probably take other steps like setting up referrer rules in ArcGIS.

You can also set up an OAuth2 workflow, which is more secure as it does not expose a static API key, but this is more complex. You can read about all the authentication options in Authentication.
Visit dymaptic licensing (https://licensing.dymaptic.com) and register for a license.

Copy the new license key from https://licensing.dymaptic.com/ into your appsettings or secrets.

{
   "ArcGISApiKey": "yourKeyValue",
   "GeoBlazor": {
      "LicenseKey": "YOUR_LICENSE_KEY"
   }
}

In the root file that defines your html, add the following lines to the <head> section. This would be _Layout.cshtml for Blazor Server, index.html for Blazor Wasm and Blazor Hybrid, or App.razor for Blazor Web Apps. Note that YourProject is the namespace for the application that you are creating.

 <link href="_content/dymaptic.GeoBlazor.Pro"/>
 <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" />

or (dark theme)

 <link href="_content/dymaptic.GeoBlazor.Pro"/>
 <link href="_content/dymaptic.GeoBlazor.Core"/>
 <link href="_content/dymaptic.GeoBlazor.Core/assets/esri/themes/dark/main.css" rel="stylesheet" />
 <link href="YourProject.styles.css" rel="stylesheet" />

Note: You may already have the `YourProject.styles.css` file. If so, you can just add the two lines to the existing file. In some .Net templates, this file is commented out by default and you will need to add it.

In _Imports.razor (for each executable project), add the following lines, or add as needed to resolve code that you consume.

 @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.Renderers.ColorRamps
 @using dymaptic.GeoBlazor.Core.Components.Symbols
 @using dymaptic.GeoBlazor.Core.Components.Views
 @using dymaptic.GeoBlazor.Core.Components.Widgets
 @using dymaptic.GeoBlazor.Core.Events
 @using dymaptic.GeoBlazor.Core.Model
 @using dymaptic.GeoBlazor.Core.Objects
 @using dymaptic.GeoBlazor.Pro.Components.Layers
 @using dymaptic.GeoBlazor.Pro.Components.Renderers
 @using dymaptic.GeoBlazor.Pro.Components.Widgets
 @using dymaptic.GeoBlazor.Pro.Model
 @using dymaptic.GeoBlazor.Pro.Objects

In Program.cs (for each executable project), add the following line to your builder.Services to inject logic components like GeometryEngine.

builder.Services.AddGeoBlazorPro(builder.Configuration);

If you are using Blazor Server or InteractiveServer mode in Blazor Web Apps, you should also add the following lines to Program.cs to support the .wsv file type.

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".wsv"] = "application/octet-stream";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

If you wish to exclude JavaScript .map files (useful for debugging, but are a large download for end users), update the provider code above to exclude .map files.

var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".wsv"] = "application/octet-stream";
#if RELEASE
provider.Mappings.Remove(".map");
#endif
app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});

Create a new Razor Component in the Pages folder, or just use Index.razor. Add a MapView. You must provide either Style or Class attributes that give the view a height and width in order to render properly.

@page "/"
   
<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 400px; width: 100%;"> 
    <Map ArcGISDefaultBasemap="arcgis-topographic">
        <GraphicsLayer @ref="_graphicsLayer" />
    </Map>
    <SketchWidget GraphicsLayerId="_graphicsLayer!.Id!" Position="OverlayPosition.BottomLeft" />
</MapView>
   
@code {
   private readonly double _latitude = 34.027;
   private readonly double _longitude = -118.805;
   private GraphicsLayer? _graphicsLayer = new();
}

GeoBlazor Pro

How the License Works

Getting Started

Table of contents