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. GeoBlazor Pro is currently in an open Beta. You can register for free during the Beta period. By using GeoBlazor Pro, you agree to share your email address with dymaptic, so that we might contact you about updates to the program.
How the License Works
Each deployment of an application, be it website or MAUI app, will make a one-time call to https://licensing.dymaptic.com to validate the license key and email, which are placed in environment settings/config as described below. Once the license has been validated for that device/deployment, it will be stored locally and will not need to be validated again. Any change in base URL or redeployment will trigger a new validation call.
For Blazor WebAssembly and Blazor Hybrid MAUI applications, this does mean that each end user of your app will need access to the internet in order to unlock the Pro license.
Getting Started
- Create a new Blazor Server, Blazor Wasm, or Blazor Hybrid (MAUI) project, using the templates provided in your IDE or the
dotnet
CLI. - Add a
PackageReference
to the latest version of thedymaptic.GeoBlazor.Pro
package via your IDE’s Nuget Package Manager ordotnet add package dymaptic.GeoBlazor.Pro --prerelease
. -
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 the template. If you want to add it yourself, you need to add it inside thewwwroot
folder. 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. If you intend to release MAUI applications, also add the
"MauiAppName"
property."ValidationServerStoragePath"
is optional to define where a Blazor Server application will store the validated license result (defaults toPath.GetTempPath()
). You must ensure that your server has write access to this path.
{
"ArcGISApiKey": "yourKeyValue",
"GeoBlazor": {
"LicenseKey": "YOUR_LICENSE_KEY",
"MauiAppName": "YOUR_APP_NAME",
"ValidationServerStoragePath": "YOUR_PATH_TO_STORAGE"
}
}
-
In the root file that defines your html, add the following lines to the
<head>
section. This would be_Layout.cshtml
for Blazor Server, orindex.html
for Blazor Wasm and Blazor Hybrid. Note thatYourProject
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
, 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.Symbols @using dymaptic.GeoBlazor.Core.Components.Views @using dymaptic.GeoBlazor.Core.Components.Widgets @using dymaptic.GeoBlazor.Core.Events @using dymaptic.GeoBlazor.Core.Objects @using dymaptic.GeoBlazor.Pro.Components.Widgets
-
In
Program.cs
, add the following line to yourbuilder.Services
to inject logic components likeGeometryEngine
.builder.Services.AddGeoBlazorPro(builder.Configuration);
If you are using Blazor Server, 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(); // NOTE: for some reason, you still need the plain "UseStaticFiles" call above app.UseStaticFiles(new StaticFileOptions { ContentTypeProvider = provider });
-
Create a new Razor Component in the
Pages
folder, or just useIndex.razor
. Add aMapView
. Give it basic -
Create a new Razor Component in the
Pages
folder, or just useIndex.razor
. Add aMapView
. Give it basic parameters to ensure that it can render.
@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();
}