Creating ArcGIS Web Mapping Apps in C# Using Blazor

Open your Blazor application which you built off the Blazor WebAssembly App or Blazor Server App template. In Index.razor, remove all the code and replace with the following:

@page "/"
    @inject IJSRuntime JsRuntime
    
    <PageTitle>Index</PageTitle>
    <div id="view-div" style="height: 100%; width: 100%"></div>
    
    @code {
       protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            await base.OnAfterRenderAsync(firstRender);
            await JsRuntime.InvokeVoidAsync("renderMap");
        }
    }

As you can see, this code is very minimal. It is just laying out a simple single <div> element with an id and then using the lifecycle event OnAfterRenderAsync to call into the IJSRuntime interface and invoke a JavaScript function by name.

Some Blazor templates come with a predefined JavaScript file. If you don’t have one, go ahead and add exampleJsInterop.js (or give it a better name) inside the wwwroot folder. Replace any content with the following (taken straight from https://developers.arcgis.com/javascript/latest/display-a-map/, so all credit goes to Esri).

window.renderMap = () => {
    require(["esri/config","esri/Map", "esri/views/MapView"], function (esriConfig,Map, MapView) {

        esriConfig.apiKey = "YOUR_API_KEY";

        const map = new Map({
            basemap: "arcgis-topographic" // Basemap layer service
        });

    	const view = new MapView({
            map: map,
            center: [-118.805, 34.027], // Longitude, latitude
            zoom: 13, // Zoom level
            container: "view-div" // Div element
        });
    });
};

To load your JavaScript file and the ArcGIS API JavaScript and CSS, add the following 3 lines to the head section of Pages/_Layout.cshtml.

<link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.23/"></script>
<script src="exampleJsInterop.js"></script>

One final tweak. Open wwwroot/css/site.css, find .content, and inside the brackets add the line height: 100%;. This is necessary to get the content <div> to expand along with the view-div.

From here, you could of course expand your JavaScript code to do really anything that Esri has envisioned. If you are comfortable writing in JavaScript, this is fine. But what if, instead, you could define your entire map in Razor Component syntax, seeing it inline with the rest of your UI?

<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 400px; width: 100%;">
    <Map ArcGISDefaultBasemap="arcgis-topographic">
        <LocateWidget UseHeadingEnabled="false" ZoomTo="1500" />
        <SearchWidget />
        <GraphicsLayer>
            <Graphic>
                <Point Longitude="_pointLong" Latitude="_pointLat"/>
                <SimpleMarkerSymbol Color="@(new MapColor(226, 119, 40))">
                    <Outline Color="@(new MapColor(255, 255, 255))" Width="1"/>
                </SimpleMarkerSymbol>
            </Graphic>

            <Graphic>
                <PolyLine Paths="@_mapPath" />
                <SimpleLineSymbol Color="@(new MapColor(226, 119, 40))" Width="2"/>
            </Graphic>

            <Graphic>
                <Polygon Rings="@_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}" Content="{Description}"/>
            </Graphic>
        </GraphicsLayer>
    </Map>
</MapView>