dymaptic.GeoBlazor.Core
2.3.0-beta-1
See the version list below for details.
dotnet add package dymaptic.GeoBlazor.Core --version 2.3.0-beta-1
NuGet\Install-Package dymaptic.GeoBlazor.Core -Version 2.3.0-beta-1
<PackageReference Include="dymaptic.GeoBlazor.Core" Version="2.3.0-beta-1" />
paket add dymaptic.GeoBlazor.Core --version 2.3.0-beta-1
#r "nuget: dymaptic.GeoBlazor.Core, 2.3.0-beta-1"
// Install dymaptic.GeoBlazor.Core as a Cake Addin #addin nuget:?package=dymaptic.GeoBlazor.Core&version=2.3.0-beta-1&prerelease // Install dymaptic.GeoBlazor.Core as a Cake Tool #tool nuget:?package=dymaptic.GeoBlazor.Core&version=2.3.0-beta-1&prerelease
GeoBlazor
PUT MAPS IN YOUR BLAZOR APPS
With GeoBlazor, you have access to the world’s most powerful and versatile web mapping API, the ArcGIS JavaScript API, but without having to write a single line of JavaScript.
Getting Started
(from https://docs.geoblazor.com/pages/gettingStarted.html)
Create a new Blazor Server, Blazor Wasm, or Blazor Hybrid (MAUI) project, using the templates provided in your IDE or the
dotnet
CLI.add a
PackageReference
to the latest version of thedymaptic.GeoBlazor.Core
package via your IDE's Nuget Package Manager ordotnet add package dymaptic.GeoBlazor.Core
.The ArcGIS API requires some form of authentication. The simplest is to use an API Key. Generate a key from the ArcGIS Developer Dashboard. For Blazor Server, place it in your appsettings.json, like this:
{ "ArcGISApiKey": "yourKeyValue" }
<div style="font-size: 0.8rem; font-style: italic; margin-bottom: 1rem;">
Note: If you are using Blazor WASM, there are several issues with this approach. First, <code>appsettings.json</code> is not added by default to the template. If you want to add it yourself, you need to add it inside the <code>wwwroot</code> folder.
<span style="color:red;">Be Aware</span> that the API key will be exposed in the browser (just like it would with Javascript). Even when using Blazor Server, the API key may be present in HTTP requests visible to the user in the browsers dev tools, so you should probably take other steps like <a href="https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/#referrers" target="_blank"> setting up referrer rules in ArcGIS</a>. </div> <div style="font-size: 0.8rem; font-style: italic"> You can also set up an OAuth2 workflow, which is more secure as it does not expose a static API key, but this is more complex. You can read about all the authentication options in <a href="https://docs.geoblazor.com/pages/authentication.html">Authentication</a>. </div>
In the root file that defines your html, add the following lines to the
<head>
section. This would be_Layout.cshtml
for Blazor Server, orindex.html
for Blazor Wasm and Blazor Hybrid. Note thatYourProject
is the namespace for the application that you are creating.<link href="_content/dymaptic.GeoBlazor.Core"/> <link href="_content/dymaptic.GeoBlazor.Core/assets/esri/themes/light/main.css" rel="stylesheet" /> <link href="YourProject.styles.css" rel="stylesheet" />
or (dark theme)
<link href="_content/dymaptic.GeoBlazor.Core"/> <link href="_content/dymaptic.GeoBlazor.Core/assets/esri/themes/dark/main.css" rel="stylesheet" /> <link href="YourProject.styles.css" rel="stylesheet" />
<div style="font-size: 0.8rem; font-style: italic; margin-bottom: 1rem;"> Note: You may already have the
YourProject.styles.css
file. If so, you can just add the two lines to the existing file. In some .Net templates, this file is commented out by default and you will need to add it. </div>In
_Imports.razor
, add the following lines, or add as needed to resolve code that you consume.@using dymaptic.GeoBlazor.Core.Components @using dymaptic.GeoBlazor.Core.Components.Geometries @using dymaptic.GeoBlazor.Core.Components.Layers @using dymaptic.GeoBlazor.Core.Components.Popups @using dymaptic.GeoBlazor.Core.Components.Symbols @using dymaptic.GeoBlazor.Core.Components.Views @using dymaptic.GeoBlazor.Core.Components.Widgets @using dymaptic.GeoBlazor.Core.Objects
In
Program.cs
, add the following line to yourbuilder.Services
to inject logic components likeGeometryEngine
.
builder.Services.AddGeoBlazor();
Create a new Razor Component in the
Pages
folder, or just useIndex.razor
. Add aMapView
. Give it basicCreate a new Razor Component in the
Pages
folder, or just useIndex.razor
. Add aMapView
. Give it basic parameters to ensure that it can render.@page "/" <MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 400px; width: 100%;"> </MapView> @code { private readonly double _latitude = 34.027; private readonly double _longitude = -118.805; }
Within the
MapView
, define a map using theWebMap
component. To load a pre-generated map from ArcGIS Online or Portal, get the Map Id (PortalItem Id) of the map.<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 400px; width: 100%;"> <WebMap> <PortalItem Id="4a6cb60ebbe3483a805999d481c2daa5" /> </WebMap> </MapView>
Add a Widget to the
MapView
, after theWebMap
.
<MapView Longitude="_longitude" Latitude="_latitude" Zoom="11" Style="height: 400px; width: 100%;">
<WebMap>
<PortalItem Id="4a6cb60ebbe3483a805999d481c2daa5" />
</WebMap>
<ScaleBarWidget Position="OverlayPosition.BottomLeft" />
</MapView>
- Run your application and make sure you can see your map!
- Now that you have a great starting point, you can now start to customize the features available in your new app using Geoblazor's capabilites:<br/> -Take a look at the Documentation pages to learn more.<br/>
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 is compatible. 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.16)
- Microsoft.Extensions.Configuration (>= 6.0.1)
- Microsoft.Extensions.Configuration.Binder (>= 6.0.0)
- protobuf-net (>= 3.2.16)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.5)
- Microsoft.Extensions.Configuration (>= 7.0.0)
- Microsoft.Extensions.Configuration.Binder (>= 7.0.4)
- protobuf-net (>= 3.2.16)
NuGet packages (1)
Showing the top 1 NuGet packages that depend on dymaptic.GeoBlazor.Core:
Package | Downloads |
---|---|
dymaptic.GeoBlazor.Pro
GeoBlazor is a GIS Component Library and SDK for building interactive maps in Blazor, powered by ArcGIS. For more information, visit https://www.geoblazor.com or contact dymaptic at geoblazor@dymaptic.com |
GitHub repositories (1)
Showing the top 1 popular GitHub repositories that depend on dymaptic.GeoBlazor.Core:
Repository | Stars |
---|---|
dymaptic/GeoBlazor
Core Components for the Dymaptic GeoBlazor Library
|
Version | Downloads | Last updated | |
---|---|---|---|
3.1.1 | 880 | 8/15/2024 | |
3.1.0 | 347 | 8/1/2024 | |
3.0.3-beta-4 | 146 | 7/20/2024 | |
3.0.3-beta-3 | 202 | 6/27/2024 | |
3.0.3-beta-2 | 127 | 6/27/2024 | |
3.0.3-beta-1 | 139 | 6/27/2024 | |
3.0.2 | 1,175 | 5/8/2024 | |
3.0.2-beta-11 | 274 | 4/26/2024 | |
3.0.1 | 1,291 | 3/26/2024 | |
3.0.0 | 297 | 3/23/2024 | |
3.0.0-rc.2 | 129 | 3/9/2024 | |
3.0.0-rc.1 | 95 | 3/6/2024 | |
3.0.0-beta-95 | 325 | 2/24/2024 | |
2.5.3.2 | 5,160 | 2/11/2024 | |
2.5.3.1 | 301 | 2/10/2024 | |
2.5.3 | 336 | 2/10/2024 | |
2.5.2 | 1,746 | 12/20/2023 | |
2.5.1 | 734 | 12/13/2023 | |
2.5.0 | 1,079 | 11/26/2023 | |
2.4.1-beta-1 | 1,054 | 10/19/2023 | |
2.4.0 | 2,602 | 10/12/2023 | |
2.3.3 | 2,183 | 9/14/2023 | |
2.3.2 | 1,281 | 9/12/2023 | |
2.3.1-beta-1 | 1,580 | 8/18/2023 | |
2.3.0 | 2,124 | 8/9/2023 | |
2.3.0-beta-1 | 1,681 | 8/2/2023 | |
2.2.1 | 2,945 | 7/7/2023 | |
2.2.1-beta-1.1 | 153 | 6/16/2023 | |
2.2.0 | 3,041 | 6/2/2023 | |
2.2.0-beta-5 | 1,783 | 5/28/2023 | |
2.2.0-beta-4 | 2,174 | 5/23/2023 | |
2.2.0-beta-3 | 750 | 5/20/2023 | |
2.2.0-beta-2 | 775 | 5/20/2023 | |
2.2.0-beta-1 | 1,664 | 5/13/2023 | |
2.1.0 | 5,514 | 4/18/2023 | |
2.1.0-beta-1 | 1,754 | 4/16/2023 | |
2.0.2-beta-2 | 2,048 | 4/2/2023 | |
2.0.2-beta-1 | 2,044 | 4/1/2023 | |
2.0.1 | 2,272 | 3/18/2023 | |
2.0.1-beta-3 | 1,682 | 3/5/2023 | |
2.0.1-beta-2 | 1,706 | 3/4/2023 | |
2.0.1-beta-1 | 1,949 | 3/4/2023 | |
2.0.0 | 2,552 | 2/28/2023 | |
2.0.0-beta-9 | 1,778 | 2/24/2023 | |
2.0.0-beta-8 | 1,958 | 2/19/2023 | |
2.0.0-beta-7 | 1,659 | 2/19/2023 | |
2.0.0-beta-6 | 1,984 | 2/15/2023 | |
2.0.0-beta-5 | 1,739 | 2/15/2023 | |
2.0.0-beta-4 | 1,822 | 2/11/2023 | |
2.0.0-beta-3 | 1,903 | 2/9/2023 | |
2.0.0-beta-2 | 1,713 | 2/7/2023 | |
2.0.0-beta-11 | 1,844 | 2/25/2023 | |
2.0.0-beta-10 | 1,627 | 2/25/2023 | |
2.0.0-beta-1 | 1,790 | 2/5/2023 | |
1.2.0 | 2,946 | 11/13/2022 | |
1.1.1 | 1,370 | 10/20/2022 | |
1.1.0 | 1,198 | 10/8/2022 |