Blazor ArcGIS configuration

Question

I'm still relatively new to building Blazor applications and have found it pretty difficult to convert the ArcGIS .NET API guides into a working Blazor application. The only way I found to do it was to essentially use javascript to view my map.

Does anyone know where to find a good tutorial for implementing ArcGIS .NET into Blazor application without having to use the IJSRuntime?

Currently using this and it's working, but I would rather be able to manipulate using Blazor; however, the ArcGIS .NET guide use xaml, which doesn't seem to work very well with Blazor.

Map.razor:

@page "/maps"
@inject IJSRuntime JS
@using Microsoft.JSInterop


<h3>Map</h3>

<div id="viewDiv" style="padding: 0; margin: 0; height: 1000px; width: 100%"></div>

@code {


    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("initializeMap", null);

            StateHasChanged();
        }

    }
}

wwwroot/map.js

function initializeMap() {
    require([
        "esri/WebMap",
        "esri/views/MapView",
        "esri/widgets/Legend",
        "esri/widgets/ScaleBar",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch",
        "esri/widgets/CoordinateConversion"
    ], function (WebMap, MapView, Legend, ScaleBar, GraphicsLayer, Sketch, CoordinateConversion) {

            var webmap = new WebMap({
                portalItem: {
                    //add your map id
                    id: "**Omitted**",
                    layers: [graphicsLayer]
                }
            });

            var view = new MapView({
                container: "viewDiv",
                map: webmap,
            });

            var legend = new Legend({
                view: view
            });

            view.ui.add(legend, "top-right");

            var scalebar = new ScaleBar({
                view: view
            });

            view.ui.add(scalebar, "bottom-left");

            var graphicsLayer = new GraphicsLayer();
            webmap.add(graphicsLayer);

            var sketch = new Sketch({
                view: view,
                layer: graphicsLayer
            });

            view.ui.add(sketch, "top-right");

            var coordsWidget = document.createElement("div");
            coordsWidget.id = "coordsWidget";
            coordsWidget.className = "esri-widget esri-component";
            coordsWidget.style.padding = "7px 15px 5px";

            view.ui.add(coordsWidget, "bottom-right");

            function showCoordinates(pt) {
                var coords = "Lat/Lon " + pt.latitude.toFixed(3) + " " + pt.longitude.toFixed(3) +
                    " | Scale 1:" + Math.round(view.scale * 1) / 1 +
                    " | Zoom " + view.zoom;
                coordsWidget.innerHTML = coords;
            }

            view.watch("stationary", function (isStationary) {
                showCoordinates(view.center);
            });

            view.on("pointer-move", function (evt) {
                showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
            });

            var coordinateConversionWidget = new CoordinateConversion({
                view: view
            });

            view.ui.add(coordinateConversionWidget, "bottom-right");
                    
    });
}

Answer 1

Congratulations, now the problem is solved.

You can migrate to MAUI and easily use XAML to work with ArcGIS. Esri also stated that it will soon offer a version for working with GIS in MAUI.

But other than that you can also easily use ArcGIS Runtime API for .NET and ArcObjects SDK for .Net on Blazor server