ArcGIS in Asp.NET Blazor – No JavaScript Required!

By Tim Purdum

August 17, 2022

.NETGeoBlazorArcGISC#Tutorial

In my previous post, I showed how to call the ArcGIS JavaScript API using the IJSRuntime from Asp.NET Blazor. Today, I'm happy to announce a free, open-source NuGet package for accessing ArcGIS directly in Blazor components, no JavaScript required!

Getting Started

To get started, create a new Blazor Server application, and add a PackageReference to the dymaptic.GeoBlazor.Core package (via your IDE's Nuget Package Manager or dotnet add package dymaptic.GeoBlazor.Core).

Next, in Pages/_Layout.cshtml, add the following to the head block of the html:

<link href="_content/dymaptic.GeoBlazor.Core"/>
<link href="_content/dymaptic.GeoBlazor.Core/assets/esri/themes/light/main.css" rel="stylesheet" />

<link href="_content/dymaptic.GeoBlazor.Core"/>
<link href="_content/dymaptic.GeoBlazor.Core/assets/esri/themes/light/main.css" rel="stylesheet" />

Setting Up Your ArcGIS API Key

Next, you will need to get an ArcGIS API Key from the ArcGIS Developers Dashboard. For security reasons, you should not add this key to any files that will be checked into version control. I recommend adding a User Secrets file. You can also use appsettings.development.json, but if you do, I recommend adding it to .gitignore before checking in your code.

Here's what the JSON would look like in secrets.json or appsettings.development.json:

{
  "ArcGISApiKey": "YOUR_API_KEY"
}

{
  "ArcGISApiKey": "YOUR_API_KEY"
}

This will be picked up and added to your maps automatically by the Asp.NET dependency injection framework.

Adding Package References

Next, let's add the following @using statements to _Imports.razor so that our pages and components have access to the necessary package components:

@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.Objects

@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.Objects

Creating Your First Map

That's it! Now you are ready to write your first ArcGIS Map View in Blazor. Add the following code to the bottom of Pages/Index.razor:

<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 400px; width: 100%;">
    <Map ArcGISDefaultBasemap="arcgis-topographic">
        <GraphicsLayer>
            <Graphic>
                <Point Longitude="_longitude" Latitude="_latitude"/>
                <SimpleMarkerSymbol Color="@(new MapColor(226, 119, 40))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleMarkerSymbol>
            </Graphic>
            <Graphic>
                <PolyLine Paths="@(new[] { _mapPath })" />
                <SimpleLineSymbol Color="@(new MapColor(226, 119, 40))" Width="2"/>
            </Graphic>
            <Graphic>
                <Polygon Rings="@(new[] { _mapRings })" />
                <SimpleFillSymbol Color="@(new MapColor(227, 139, 79, 0.8))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleFillSymbol>
                <Attributes Name="This is a Title" Description="And a Description"/>
                <PopupTemplate Title="{Name}" StringContent="{Description}"/>
            </Graphic>
        </GraphicsLayer>
    </Map>
</MapView>

@code
{
    private readonly double _latitude = 34.027;
    private readonly double _longitude = -118.805;

    private readonly MapPath _mapPath = new(new MapPoint(-118.821527826096, 34.0139576938577),
        new MapPoint(-118.814893761649, 34.0080602407843),
        new MapPoint(-118.808878330345, 34.0016642996246));

    private readonly MapPath _mapRings = new(new MapPoint(-118.818984489994, 34.0137559967283),
        new MapPoint(-118.806796597377, 34.0215816298725),
        new MapPoint(-118.791432890735, 34.0163883241613),
        new MapPoint(-118.79596686535, 34.008564864635),
        new MapPoint(-118.808558110679, 34.0035027131376));
}

<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 400px; width: 100%;">
    <Map ArcGISDefaultBasemap="arcgis-topographic">
        <GraphicsLayer>
            <Graphic>
                <Point Longitude="_longitude" Latitude="_latitude"/>
                <SimpleMarkerSymbol Color="@(new MapColor(226, 119, 40))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleMarkerSymbol>
            </Graphic>
            <Graphic>
                <PolyLine Paths="@(new[] { _mapPath })" />
                <SimpleLineSymbol Color="@(new MapColor(226, 119, 40))" Width="2"/>
            </Graphic>
            <Graphic>
                <Polygon Rings="@(new[] { _mapRings })" />
                <SimpleFillSymbol Color="@(new MapColor(227, 139, 79, 0.8))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleFillSymbol>
                <Attributes Name="This is a Title" Description="And a Description"/>
                <PopupTemplate Title="{Name}" StringContent="{Description}"/>
            </Graphic>
        </GraphicsLayer>
    </Map>
</MapView>

@code
{
    private readonly double _latitude = 34.027;
    private readonly double _longitude = -118.805;

    private readonly MapPath _mapPath = new(new MapPoint(-118.821527826096, 34.0139576938577),
        new MapPoint(-118.814893761649, 34.0080602407843),
        new MapPoint(-118.808878330345, 34.0016642996246));

    private readonly MapPath _mapRings = new(new MapPoint(-118.818984489994, 34.0137559967283),
        new MapPoint(-118.806796597377, 34.0215816298725),
        new MapPoint(-118.791432890735, 34.0163883241613),
        new MapPoint(-118.79596686535, 34.008564864635),
        new MapPoint(-118.808558110679, 34.0035027131376));
}

Run the project, and you should see your new map directly in the Blazor application. Congratulations! You have added ArcGIS in Asp.NET Blazor without writing a single line of JavaScript.

Blazor application showing a map with point, polyline, and polygon graphics

Explore More Features

If you'd like to see the API in action and check out our dozens of samples, visit our Samples Page, where we have hosted a full application built on top of the open-source project.

To learn more about the dymaptic Blazor GIS API, visit the code repository at github.com/dymaptic/GeoBlazor. Download the repository and test out the Samples applications, which include all of the following and more:

Sample applications for Blazor Server, Blazor Wasm, and Blazor Maui (multiplatform, including Android, iOS, Windows, and MacOS)
Demonstrating loading maps and feature layer data from ArcGIS Online
Navigation
Graphic Drawing
Renderers
Popups
Widgets
SQL Data Queries
Routing

Get Started with GeoBlazor Today

Are there any other features you would like to see? Do you have suggestions? Questions? Want help building your Blazor GIS application? We'd love to hear from you! Send us a message and let's get the conversation started.

Ready to build your mapping application?

Get Started with GeoBlazor - Install the NuGet package and start mapping in minutes
Explore the Documentation - Comprehensive guides, samples, and API reference
View Pricing - Free for development, affordable licensing for production
Join the Community - Get help and share your projects on Discord