dymaptic.Blazor.GIS.API.Core 1.0.0

Blazor GIS API

View the live demo site!

This project wraps the ArcGIS Javascript API in a Blazor templating framework. It generates a nuget package that can be imported and consumed from any Blazor application, without directly interacting with javascript.

In addition to "hiding" the javascript implementation, the goal is also to make a simple, component-based system for declaring a map and view. For example:

<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 600px; 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="@_mapPaths"/>
                <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>

for a 2D map with a default ArcGIS basemap, or

<SceneView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 600px; width: 100%;" ZIndex="2000" Tilt="76">
    <Map Ground="world-elevation">
        <Basemap>
            <PortalItem Id="f35ef07c9ed24020aadd65c8a65d3754" />
        </Basemap>
        <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="@_mapPaths"/>
                <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>
</SceneView>

for a 3D map with a basemap loaded from a PortalId.

Using the Library

Reference Package/Project

• Install nuget package from nuget.org with dotnet add package dymaptic.Blazor.GIS.API.Core OR
• Download and add a package reference to the /packages/dymaptic.Blazor.GIS.API.Core.1.0.x.nupkg file OR
• download the source code and add a project reference to dymaptic.Blazor.Api.

Reference Scripts and Styles

• Add the following lines to the head element of your _Layout.cshtml (Blazor Server) or index.html (Blazor Wasm or Maui Blazor Hybrid)
• Note, for _Layout.cshtml/Blazor Server, all the @ symbols below must be doubled (@@) to escape, since @ is a reserved character in Razor

    <link href="_content/dymaptic.Blazor.GIS.API.Core"/>
    <script src="https://unpkg.com/@esri/arcgis-rest-request@3.0.0/dist/umd/request.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-auth@3.0.0/dist/umd/auth.umd.js"></script>
    <script src="https://unpkg.com/@esri/arcgis-rest-demographics@3.0.0/dist/umd/demographics.umd.js"></script>
    <link href="https://js.arcgis.com/4.23/esri/themes/light/main.css" rel="stylesheet">
    <script src="https://js.arcgis.com/4.23/"></script>

Setup API Key

• See Security and authentication | Documentation | ArcGIS Developers to learn how to obtain an ArcGIS API Key.
• If you want to inject your api key via login or some other custom route, add the following line to your Program.cs file, so you can add values to IConfiguration:

builder.Configuration.AddInMemoryCollection();

• If you want to hard-code your API key, add the key/value "ArcGISApiKey": "YOUR_API_KEY" to an appsettings.json , appsettings.development.json, secrets.json, Azure Key Vault, or environment variable. Make sure that it is loaded into IConfiguration by your application. NOTE: it is never recommended to save an api key to a version control repository!

Add Using Statements

Add using statements as necessary to _Imports.razor. Below is a complete list of namespaces:

@using dymaptic.Blazor.GIS.API.Core
@using dymaptic.Blazor.GIS.API.Core.Components
@using dymaptic.Blazor.GIS.API.Core.Components.Geometries
@using dymaptic.Blazor.GIS.API.Core.Components.Layers
@using dymaptic.Blazor.GIS.API.Core.Components.Popups
@using dymaptic.Blazor.GIS.API.Core.Components.Renderers
@using dymaptic.Blazor.GIS.API.Core.Components.Symbols
@using dymaptic.Blazor.GIS.API.Core.Components.Views
@using dymaptic.Blazor.GIS.API.Core.Components.Widgets
@using dymaptic.Blazor.GIS.API.Core.Objects

Add components to Razor Components/Pages

You should now be ready to directly reference MapView and other components in your own Razor Components.

Build Requirements

For the Asp.NET projects, including the core library, you can run on the latest .NET 6 SDK.

For the Maui sample project, you need the latest preview of Visual Studio.

Projects

dymaptic.Blazor.GIS.API.Core

• The core logic library

dymaptic.Blazor.GIS.API.Core.Sample.Shared

• A razor class library for sample applications
• All sample pages are based on the ArcGIS for Javascript API Tutorials.

dymaptic.Blazor.GIS.API.Core.Sample.Server

• Asp.NET Core Blazor Server application sample
• dotnet run --project .\samples\dymaptic.Blazor.GIS.API.Core.Sample.Server\dymaptic.Blazor.GIS.API.Core.Sample.Server.csproj
• Runs on kestrel or via IIS
• Serves pages via SignalR/Websockets
• Can be loaded with a usersecrets file to provide the ArcGIS Api Key.

dymaptic.Blazor.GIS.API.Core.Sample.Wasm

• dotnet run --project .\samples\dymaptic.Blazor.GIS.API.Core.Sample.Wasm\dymaptic.Blazor.GIS.API.Core.Sample.Wasm.csproj
• Runs Blazor in Web Assembly on the client browser
• No safe storage for API key, users must input an api key or sign in from the browser

dymaptic.Blazor.GIS.API.Core.Sample.Maui

• Cross-platform mobile and desktop application
• Should be run from Visual Studio Preview. Command Line support appears to be limited at this time.
• Android and Windows versions tested

dymaptic.Blazor.GIS.API.Interactive (not included in open source repo)

• Extended application features

  • Custom renderers (e.g. image icons), see Feature Layers (demo)
  • Custom popups (e.g. charts, tables), see Popups (demo)
  • Advanced widgets (e.g. sketch, track), see Sketch Query (demo)
  • Custom layers (e.g. GeoJSON Layer), see Projection (demo)
  • Advanced event handling (e.g., pointer move, sketch events, search events), see above examples
  • GeometryEngine direct calls, see Calculate Geometries (demo)
  • ArcGIS Rest direct calls, see Demographic Data (demo)

• Please contact info@dymaptic.com to discuss licensing these advanced features!