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");
                    
    });
}

score -4 · Answer 1 · answered Oct 31 '21 at 09:50

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

Blazor ArcGIS configuration

1 Answers1