dymaptic.Blazor.GIS.API.Core
1.0.0
Renamed project to GeoBlazor. Namespaces changed, so this is breaking, but upgrading should be fairly straightforward/simple.
dotnet add package dymaptic.Blazor.GIS.API.Core --version 1.0.0
NuGet\Install-Package dymaptic.Blazor.GIS.API.Core -Version 1.0.0
<PackageReference Include="dymaptic.Blazor.GIS.API.Core" Version="1.0.0" />
paket add dymaptic.Blazor.GIS.API.Core --version 1.0.0
#r "nuget: dymaptic.Blazor.GIS.API.Core, 1.0.0"
// Install dymaptic.Blazor.GIS.API.Core as a Cake Addin #addin nuget:?package=dymaptic.Blazor.GIS.API.Core&version=1.0.0 // Install dymaptic.Blazor.GIS.API.Core as a Cake Tool #tool nuget:?package=dymaptic.Blazor.GIS.API.Core&version=1.0.0
Blazor GIS API
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) orindex.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 toIConfiguration
:
builder.Configuration.AddInMemoryCollection();
- If you want to hard-code your API key, add the key/value
"ArcGISApiKey": "YOUR_API_KEY"
to anappsettings.json
,appsettings.development.json
,secrets.json
, Azure Key Vault, or environment variable. Make sure that it is loaded intoIConfiguration
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!
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 was computed. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.6)
- Microsoft.Extensions.Configuration (>= 6.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated | |
---|---|---|---|
1.0.0 | 510 | 8/2/2022 |