2 min read
Tim Purdum

ArcGIS in Asp.NET Blazor – No JavaScript Required! 

2 min read
Tim Purdum

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!

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" />

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"
This will be picked up and added to your maps automatically by the Asp.NET dependency injection framework.

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

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">
                <Point Longitude="_longitude" Latitude="_latitude"/>
                <SimpleMarkerSymbol Color="@(new MapColor(226, 119, 40))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                <PolyLine Paths="@(new[] { _mapPath })" />
                <SimpleLineSymbol Color="@(new MapColor(226, 119, 40))" Width="2"/>
                <Polygon Rings="@(new[] { _mapRings })" />
                <SimpleFillSymbol Color="@(new MapColor(227, 139, 79, 0.8))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                <Attributes Name="This is a Title" Description="And a Description"/>
                <PopupTemplate Title="{Name}" StringContent="{Description}"/>
        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 app

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 https://github.com/dymaptic/dy-blazor-api-core. 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 (multi-platform, 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

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. Visit GeoBlazor.com for more information.


Related articles

Let the Sunshine In: Finding Your Daylight with GeoBlazor

Let the Sunshine In: Finding Your Daylight with GeoBlazor

Here in the Northern Hemisphere, we are rapidly approaching the Winter Solstice, also known as the shortest day of the year. Yet sunshine is...
Modern Web Development in C# with Blazor

Modern Web Development in C# with Blazor

The graphical internet is nearly 3 decades old (Mosaic was released in 1993). For most of that time, JavaScript has been the standard for we...
Creating ArcGIS Web Mapping Apps in C# Using Blazor

Creating ArcGIS Web Mapping Apps in C# Using Blazor

In my previous post, I showed you how to get up and running with ASP.NET Blazor web development. In this post, I will show you how to use th...